- 无状态组件与有状态组件
- 函数组件为何为纯函数
- 组件状态管理
- 状态管理三原则
- 单向数据流
- 单一数据源
- 不可变数据结构
- 渲染函数是什么
- 渲染函数做什么
- 何为副作用
- 副作用如何处理
- useeffect 使用误区
- 记忆化
- 状态
- 组件
- 函数
反模式
为什么大部分 Hook 只能在组件顶层调用 为什么 React 严格模式执行两次
React 内部函数
- 不依赖 state 的函数
- 依赖 state 的函数
-
如果一个函数不依赖 state，那么建议这个函数定义在组件外，避免函数随组件渲染而重新创建
-
如果一个函数依赖 state，并且需要根据 state 状态处理副作用，那么最好先把它们放在 useEffect 中，因为随着 state 的变化，你需要及时执行之前副作用的清除函数，避免之前的队列里的副作用影响当前结果。
为了解耦和复用，建议进一步把这个副作用逻辑封装为自定义 Hook。
-
如果一个函数依赖 state，并且需要根据 state 状态计算新值，那么建议在组件渲染期间直接根据 state 计算新值。 如果新值是直接用来渲染的，那么不考虑记忆化。如果新值的变化影响了子组件的性能，那么考虑将新值和子组件进行记忆化。
如果一个函数依赖 state 并且既执行副作用又管理组件状态，首先需要考虑函数设计问题，这个函数如何执行副作用清理， 执行不了副作用清理必然要拆逻辑。