React组件逻辑复用分别在class和function中的比较

class组件逻辑复用

• Mixins早已废弃
  • 变量作用域来源不清
  • 属性重名
  • Mixins引入过多会导致顺序冲突
• 高阶组件HOC
  • 组件层级嵌套过多，不宜渲染，不宜调试，维护困难
  • HOC会劫持props，必须严格规范，容易出现疏漏
• Render Prop
  • 学习成本高不易理解
  • 只能传递纯函数，而且默认情况下纯函数功能有限

Hooks组件逻辑复用

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

React Hooks注意事项(keng)

• useState初始化值，只有第一次有效
  • render:初始化state
  •  re-render:之回复初始化的state的值，不会再重新设置的值，只能用它set某来改变
• useEffect内部不能修改state
  • useEffect(,[])第二个参数为空时触发，因为依赖为[]时re-render不会重新执行effect函数，没有依赖时re-render会重新执行effect函数
• useEffect可能出现死循环
  • 第二个参数是通过Object.is()方法比较，第二个参数依赖最好不要出现数组和对象等引用类型，