React状态管理|青训营笔记

Context缺点

1. Context 只能存储单一值，当数据量大起来时，你可能需要使用createContext创建大量context；

2. 直接使用的话，会有一定的性能问题：每一次对state的某个值变更，都会导致其他使用该state的组件re-render，即使没有使用该值。可以通过useMemo来解决这个问题，但是就需要一定的成本来定制一个通用的解决方案；

3. 无法处理异步请求。对于异步的逻辑，Context API并没有提供任何API，需要自己做封装；

4. 无法处理数据间的联动。Context API并没有提供API来生成派生状态，同样也需要自行去封装一些方法来实现。 React 状态管理的常见模式有：

5. 状态提升：兄弟组件间是没法直接共享状态的，可以通过将状态提升到最近的祖先组件中，所有兄弟组件就可以通过 props 一级级传递获取状态；

6. 状态组合：某些状态可能只在应用程序的特定子树中需要。最好将状态存储在尽可能接近实际需要的位置，这有助于优化渲染行为；

7. 属性下钻：将父组件的状态以属性的形式一级级显示传递给嵌套子组件；

8. Provider：React Context 通过 Provider 包裹组件，被包裹的所有嵌套子组件都可以不用通过属性下钻而是通过 context 直接获取状态。

10. 层层传递的 value onChange 会对一个优质代码库带来的毁灭性影响，粗暴地把数据塞在 redux 中也并不能让一个应用得到很好的拓展性和可维护性。

Hook的使用规则：

1. 只在函数组件中使用：Hook只能在函数组件中使用，不能在类组件中使用。
2. 只在顶层调用：Hook只能在函数组件的顶层调用，不能在循环、条件语句或嵌套函数中调用。
3. 不要在条件语句中使用：由于Hook的调用顺序是固定的，因此不要在条件语句中使用Hook，否则可能会导致状态不一致的问题。
4. 只在React函数组件中使用：Hook只能在React函数组件中使用，不能在普通的JavaScript函数中使用。
5. 使用规范的命名方式：Hook的命名应该以use开头，如useState、useEffect等。

个人感觉React还是挺抽象的，像我在学vue的生命周期那块的感觉，要去理解一些抽象的概念，但是如果领悟了就很好地能使用