React进阶-状态逻辑复用

目录

1. 组件复用的说明

2. mixins 混入（已废弃）

3. 高阶组件

概述

基本使用

封装 withMouse 高阶组件

高阶组件的注意点

4. render-props 模式

基本使用

children 代替 render 属性

5. React Hooks 状态逻辑复用

6. 为什么要有 Hooks

7. 性能优化

8. 优化的方向

9. React.memo

浅对比的说明

10. useCallback

11. useMemo

12. class 组件优化

1. 组件复用的说明

问题 1：如果两个组件中的部分功能相似或相同，但 UI 结构不同，该如何优化相似的功能？复用

问题 2：复用什么？1. state 状态 2. 操作 state 状态的方法。也就是：组件状态逻辑复用

在 Hooks 之前，组件的状态逻辑复用经历了：mixins(混入)、HOCs(高阶组件)、render-props 等模式

注意：这几种方式不是新的 API，而是利用 Re