Hooks 组件逻辑复用

---

回顾之前 class 组件的逻辑复用

mixin 已被废弃

相互依赖，相互耦合

• 变量作用域不明确
• 属性重名
• mixin 过多时的顺序冲突问题

高阶组件 HOC

（回顾之前的 ppt 和代码）

HOC 的缺点：

• 使用多了，导致组件层级嵌套过多，不易渲染，更不易调试
• HOC 可以劫持 props ，需要严格遵守约定 （即，如果 HOC 没传或者传错了 props ，将会给子组件带来很大困扰）

render props

（回顾之前的 ppt 和代码）

缺点：

• 有一定学习和理解成本 （这种方式，感觉很绕，并不是那么直白，而且一不小心就忘）
• 只能传函数组件 （而函数组件如果没有 hooks ，功能有限）

---

使用 Hooks 做组件逻辑复用

无论是 mixin HOC 还是 render prop ，他们不是完美的解决方案，多少都会有一些令人费解或者困惑的地方。

其实用 Hooks 做组件逻辑复用，本质上就是自定义 Hook 。可先回顾自定义 Hook 的内容。

再对比之前的 HOC 和 render prop ，自定义 Hook 做一个鼠标位置的 demo 。参考 useMousePosition.js 代码。

• 完全符合自定义 Hook 规则，没有其他要求，很好理解和记忆
• 变量作用域非常明确
• 不会产生组件嵌套

（Vue3 Composition API 也是参照 Hooks 来设计的）