Skip to content

binghuis/better-use-of-react

Repository files navigation

如何更好的使用 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