type
status
date
slug
summary
tags
category
icon
password
1. 初始化 React 项目1. React 脚手架 create-react-app 初始化项目1. node 安装2. React脚手架 create-react-app2. 组件化开发1. React组件划分2. 类组件要求3. Helloworld（类组件的封装细节）1. install2. 项目结构3. react-scripts 命令对应的 webpack 配置4. render 函数的返回值4. 函数式组件的封装5. 类组件的生命周期1. 常用的生命周期代码示例2. 常用的生命周期详解3. 不常用的生命周期函数6. 组件通信1. 父传子2. 父传子代码示例3. 类型校验4. 子传父7. 组件的插槽实现7.1. 实现方式一（不推荐）2. 实现方式二（推荐）3. 作用域插槽8. 非父子组件通信 - Context1. 作用2. 类组件中使用 Context3. 函数式组件获取 context 中的数据4. context 中的默认值设置5. 多个 context 使用9. 非父子组件通信 - 事件总线1. Install2. demo case3. 存在this绑定问题10. setState 用法及原理参考1. setState的三种用法2. react 为什么设计成异步的？11. React 性能优化1. diff 算法和 key 的作用2. render 函数优化3. 数据不可变的力量12. ref 获取原生 dom 的三种方式13. ref 获取组件（类组件和函数式组件）14. 受控组件和非受控组件
1. 初始化 React 项目
1. React 脚手架 create-react-app 初始化项目
1. node 安装
版本选择：最新版带有LTS（稳定版）的。
node下载好之后会自动带一个npm的包管理工具。
2. React脚手架 create-react-app
- 下载脚手架
npm 下载react脚手架
npm install create-react-app -g查看react脚手架版本
create-react-app --version
- 通过脚手架创建项目
create-react-app 【项目名】，项目名不可以包含大写字母
这里创建过慢需要设置下淘宝源：
create-react-app learn_react_scaffold
- 项目启动
通过运行
npm run start运行项目。react-scripts 命令集成了webpack的打包方式。
- 项目目录结构
2. 组件化开发
1. React组件划分
- 根据组件的定义方式，划分为函数组件和类组件。
- 根据组件内部是否有状体需要维护，划分为无状态组件和有状态组件。
- 根据组件的不同职责，划分为展示型组件和容器型组件。
- 函数组件，无状态组件和展示型组件主要关注ui展示。
- 类组件，有状态组件和容器型组件主要关注数据逻辑。
2. 类组件要求
- 组件的名称必须是大写字母开头。（无论是类组件还是函数式组件）
- 类组件需要继承自 React.Component。
- 类组件必须实现 render 函数。
3. Helloworld（类组件的封装细节）
1. install
2. 项目结构
3. react-scripts 命令对应的 webpack 配置
webpack配置默认隐藏：
- 弹出对应配置：
执行
弹出webpack配置
文件变动：
4. render 函数的返回值
4. 函数式组件的封装
5. 类组件的生命周期
1. 常用的生命周期代码示例
初次页面：
点击修改文本：
点击切换：
2. 常用的生命周期详解
3. 不常用的生命周期函数
6. 组件通信
1. 父传子
- 通过props传递数据
2. 父传子代码示例
效果：
3. 类型校验
4. 子传父
• 通过从父组件中传递过来的函数将参数传递进去实现通信
子传父代码示例:
7. 组件的插槽实现
7.1. 实现方式一（不推荐）
2. 实现方式二（推荐）
3. 作用域插槽
8. 非父子组件通信 - Context
1. 作用
• 非父子组件间的数据共享
2. 类组件中使用 Context
3. 函数式组件获取 context 中的数据
4. context 中的默认值设置
5. 多个 context 使用
9. 非父子组件通信 - 事件总线
1. Install
2. demo case
1. 创建 eventBus 对象
- 使用
3. 存在this绑定问题
1. 问题复现
2. 修复
方法一和方法二任选一个就可以:
10. setState 用法及原理参考
1. setState的三种用法
- 用法一：基本使用
- 用法二：传入回调函数
好处一: 可以在回调函数中编写对新state处理的逻辑
好处二: 当前的回调函数会将之前的state和props传递进来
- 用法三：setState 是一个异步调用，传入 callback 来使用最新的 state 的值处理逻辑
2. react 为什么设计成异步的？
📌 注意事项一：setState是批量更新的，不是每次调用都会更新
• 错误使用
• 我们要想每次都拿到最新的 state 的值使用，应该用回调函数的方式:
📌 注意事项二：setState 在 React 18 之前是同步的，React 18 之后是异步的
💡 将setState异步变为同步
- 使用callback回调参数
- 使用react-dom中的flushSync
11. React 性能优化
1. diff 算法和 key 的作用
juejin.cn
juejin.cn
2. render 函数优化
1. 问题
问题说明：在每个组件中包含的子组件，只要父组件的一个 state 或者 props 值被修改，该组件以及子组件都会重新执行 render 函数
👨🏻💻 code demo：
💡 解法一：使用 shouldComponentUpdate 来阻止更新（SCU优化）
• 同样，当我们的 state 的值没有被修改时，也可以这样来优化
💡 解法二：（推荐）使用 PureComponent 和 memo 来进行 render 优化
- 类组件继承 PureComponent， 函数式组件用memo包裹，目的还是当 state 或者 props 的值不发生变化时不进行 render 渲染
👨🏻💻 code demo：
3. 数据不可变的力量
参考：
• 我们通常写的类组件或者函数式组件都继承自 PureComponent 或者被 memo 所包裹，这样在 setState 或者 useState 的时候，都需要保证新对象和旧对象的内存地址不一样，才可以触发页面渲染。
👨🏻💻 code case：
case: 修改books的count
12. ref 获取原生 dom 的三种方式
• React 可以使用 ref 来获取原生 dom 对象
👨🏻💻 code case：
13. ref 获取组件（类组件和函数式组件）
- 通过 ref 获取组件信息，可以通过下面代码查看具体获取方式，注意函数式组件 forwardRef 和 memo 包裹函数的顺序。
14. 受控组件和非受控组件
todo