参考资料： TypeScript 官网：https://www.typescriptlang.org/zh/ TypeScript 语法文档：https://zhongsp.gitbooks.io/typescript-handbook/content/ 所有文件格式都是 .ts 后缀名。 1. TS 环境安装下载并安装好 nodejs。 全局安装 typescript：npm i ty

参考： TypeScript 语法文档：https://zhongsp.gitbooks.io/typescript-handbook/content/ 案例源码：https://github.com/janycode/react-ts-demo 所有文件格式都是 .ts 后缀名，React 项目中是 .tsx 后缀名（因为使组件化了默认支持 xml 结构）。 1. 创建项目1.1 创建

参考资料： TypeScript 官网：https://www.typescriptlang.org/zh/ TypeScript 语法文档：https://zhongsp.gitbooks.io/typescript-handbook/content/ 所有文件格式都是 .ts 后缀名。 1. TS + Vue3 TypeScript 的定位是静态类型语言，在写代码的阶段就能检查错误，

参考： React 官网：https://zh-hans.react.dev/ React 教程：https://zh-hans.react.dev/learn React17 文档（英文）：https://17.reactjs.org/docs/getting-started.html React18 的新内容：https://zh-hans.react.dev/blog/2022/03/2

参考： React 官网：https://zh-hans.react.dev/ React 教程：https://zh-hans.react.dev/learn 1.受控与非受控组件1.1 表单非受控组件 ref 来从 DOM 节点中获取表单数据，就是非受控组件 如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。 在 React 渲

参考： React 官网：https://zh-hans.react.dev/ React 教程：https://zh-hans.react.dev/learn 1. 组件数据挂载1.1 状态 state状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)。 state 与 setState sta

参考： React 官网：https://zh-hans.react.dev/ React 教程：https://zh-hans.react.dev/learn 1. 生命周期v17 & v19组件的生命周期可分成三个状态： Mounting(挂载|初始化)：已插入真实 DOM (constructor→render→componentDidMount) Updating(更新|运

参考： React 官网：https://zh-hans.react.dev/ React 教程：https://zh-hans.react.dev/learn React Router 官网：https://reactrouter.com/ React Router 教程V6：https://reactrouter.com/6.30.3 React Router 教程V6（中文）：https

参考： React 官网：https://zh-hans.react.dev/ React 教程：https://zh-hans.react.dev/learn 参考资料：https://juejin.cn/post/7492238013192454170 React HooksReact Hooks 是 React 16.8 版本引入的一项重大特性。它允许在不编写 class 的情况下使用

参考： Flux 架构思想框架×15：https://github.com/voronianski/flux-comparison Redux 源码：https://github.com/reduxjs/redux Redux 官网：https://redux.js.org/ React-Redux 源码：https://github.com/reactjs/react-redux Redux