class组件逻辑复用

  • Mixins 早已废弃
  • 高阶组件 HOC
  • render prop

高阶组件 HOC

  • 组件层级嵌套过多，不易渲染，不易调试
  • HOC 会劫持 props，必须严格规范，容易出现疏漏

Render Prop

  • 学习成本高，不易理解
  • 只能传递纯函数，而默认情况下纯函数功能有限

React Hooks做逻辑复用好处

  • 完全符合 Hooks 原有规则，没有其他要求，易理解记忆
  • 变量作用域很明确
  • 不会产生组件嵌套

React Hooks 注意事项

  • useState 初始化值，只有第一次有效
  • useEffect 内部不能修改 state ```jsx const [count, setCount] = useState(0);

useEffect(() => { const timer = setInterVal(() => { console.log(count) // 0 0 0 0 … setCount(count + 1) }, 1000)

return () => clearInterval(timer) }, []) // 依赖是 []，re-render 不会重新执行 effect 函数

// 如果没有依赖，不写第二个参数则无问题，re-render会重新执行 effect 函数 ```

  • useEffect 可能出现死循环