如何更好的使用 React

1. 无状态组件与有状态组件
2. 函数组件为何为纯函数
3. 组件状态管理
4. 状态管理三原则
   • 单向数据流
   • 单一数据源
   • 不可变数据结构
5. 渲染函数是什么
   • 渲染函数做什么
6. 何为副作用
7. 副作用如何处理
8. useeffect 使用误区
9. 记忆化
   • 状态
   • 组件
   • 函数

反模式

为什么大部分 Hook 只能在组件顶层调用 为什么 React 严格模式执行两次

React 内部函数

• 不依赖 state 的函数
• 依赖 state 的函数

1. 如果一个函数不依赖 state，那么建议这个函数定义在组件外，避免函数随组件渲染而重新创建

2. 如果一个函数依赖 state，并且需要根据 state 状态处理副作用，那么最好先把它们放在 useEffect 中，因为随着 state 的变化，你需要及时执行之前副作用的清除函数，避免之前的队列里的副作用影响当前结果。

   为了解耦和复用，建议进一步把这个副作用逻辑封装为自定义 Hook。

3. 如果一个函数依赖 state，并且需要根据 state 状态计算新值，那么建议在组件渲染期间直接根据 state 计算新值。 如果新值是直接用来渲染的，那么不考虑记忆化。如果新值的变化影响了子组件的性能，那么考虑将新值和子组件进行记忆化。

如果一个函数依赖 state 并且既执行副作用又管理组件状态，首先需要考虑函数设计问题，这个函数如何执行副作用清理， 执行不了副作用清理必然要拆逻辑。

react-test-renderer