性能优化相关API、编写类API与zustand
- 一、useReducer
- 1.基础用法
- 2.分派action时传参
- 二、useMemo
- 1.基础语法
- 三、React.memo
- 1.基础语法
- 2.React.memo - props的比较机制
- 四、useCallback
- 基础语法
- 五、React.forwardRef
- 六、useInperativeHandle
- 七、类组件编写
- 1.基础结构
- 2.生命周期函数
- 3.组件通信
- 八、zustand
- 1.快速上手
- 2.异步支持
- 3.切片模式
一、useReducer
作用:和useState的作用类似,用来管理
相对复杂
的状态数据
完成案例:
1.基础用法
- 定义一个reducer函数(根据不同的action返回不同的新状态)
- 在组件中调用useReducer,并传入reducer函数和状态的初始值
- 事件发生时,通过dispatch函数分派一个action对象(通知reducer要返回哪个新状态并渲染UI)
2.分派action时传参
二、useMemo
作用:在组件每次重新渲染的时候
缓存计算的结果
1.基础语法
说明:使用useMemo做缓存之后可以保证只有count1依赖项发生变化时才会重新计算
三、React.memo
作用:允许组件在
Props没有改变
的情况下跳过渲染;React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染
React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染
思考:如果Son组件本身并不需要做渲染更新,是不是存在浪费?
1.基础语法
说明:经过memo函数包裹生成的缓存组件只有在props发生变化的时候才会重新渲染
2.React.memo - props的比较机制
机制: 在使用memo缓存组件之后,React会对每一个 prop 使用 Object.is 比较新值和老值,返回true,表示没有变化
prop是简单类型
Object.is(3, 3) => true 没有变化
prop是引用类型(对象 / 数组)
Object([], []) => false 有变化,React只关心引用是否变化
传递简单props:
传递复杂引用类型props:
四、useCallback
作用:在组件多次重新渲染的时候缓存函数
基础语法
说明:使用useCallback包裹函数之后,函数可以保证在App重新渲染的时候保持引用稳定
五、React.forwardRef
使用ref暴露DOM节点给父组件
六、useInperativeHandle
通过ref暴露子组件中的方法
七、类组件编写
1.基础结构
类组件就是通过
JS中的类来组织组件的代码
通过类属性state
定义状态数据
通过setState方法
来修改状态数据 3.
通过render
来写UI模版(JSX语法一致)
2.生命周期函数
概念:组件从创建到销毁的
各个阶段自动执行的函数
就是生命周期函数
componentDidMount:组件挂载完毕自动执行 - 异步数据获取
componentWillUnmount: 组件卸载时自动执行 - 清理副作用
3.组件通信
概念:类组件和Hooks编写的组件在组件通信的
思想上完全一致
父传子:通过prop绑定数据
子传父:通过prop绑定父组件中的函数,子组件调用
兄弟通信:状态提升,通过父组件做桥接
八、zustand
极简的状态管理工具
官网:https://zustand-demo.pmnd.rs/
1.快速上手
2.异步支持
对于异步的支持不需要特殊的操作,直接在函数中编写异步逻辑,最后只需要
调用set方法传入新状态
即可
3.切片模式
场景:当单个store比较大的时候,可以采用
切片模式
进行模块拆分组合,类似于模块化