框架进阶gogogog

[MJingv]

vue3

[MJingv]

技术没有好坏之分，只有是否合适

代码复用：hoc / mixins

react

高阶组件

高阶组件（HOC）是react中的高级技术，用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。

---

• 使用高阶组件（HOC）解决横切关注点
• 不要改变原始组件，使用组合
• 约定：贯穿传递不相关props属性给被包裹的组件
• 约定：最大化的组合性
• 约定：包装显示名字以便于调试
• 告诫

  1. 不要在render方法内使用高阶组件
  2. Refs属性不能贯穿传递
  3. 必须将静态方法做拷贝

---

• 特点

  1. 高阶组件(HOC)应该是无副作用的纯函数，且不应该修改原组件
  2. 高阶组件(HOC)不关心你传递的数据(props)是什么，并且被包装组件(WrappedComponent)不关心数据来源
  3. 高阶组件(HOC)接收到的 props 应该透传给被包装组件(WrappedComponent)

容器组件是专注于在高层和低层关注之间进行责任分离的策略的一部分。容器管理的事情诸如订阅和状态，传递props属性给某些组件。这些组件处理渲染UI等事情。高阶组件使用容器作为他们实现的一部分。你也可以认为高阶组件就是参数化的容器组件定义。

mixins

1. mixins 带来了隐式依赖
2. mixins 与 mixins 之间，mixins 与组件之间容易导致命名冲突
3. 由于 mixins 是侵入式的，它改变了原组件，所以修改 mixins 等于修改原组件，随着需求的增长 mixins 将变得复杂，导致滚雪球的复杂性