mixin、hoc、render props、react-hooks的优劣对比

1、Mixin

缺陷：

1. 组件和mixin之间存在隐式依赖（Mixin中会定义一些特殊的方法，但是当组件过多的时候，我们就很容易忘记查看，导致不可预期的错误！）
2. 多个Mixin之间可能产生冲突（比如定义相同的state字段）
3. Mixin倾向于增加更多状态，这降低了应用的可预期性。
4. 组件自身的方法和state字段不敢轻易删除，因为难以确认有没有Mixin依赖它，Mixin也难以维护，因为Mixin逻辑最后会被打包合并在一起，很难知道那个是输入那个是输出。

2、HOC

相对于Mixin的优势：

• HOC通过外层组件利用Props影响内层组件的状态，而不是直接改变其State，不存在冲突和相互干扰，这就降低了耦合度。

不同于Mixin的打包平台，HOC具有天然的层级结构，这又降低了复杂度。

缺陷：

• 扩展性限制：HOC无法从外部访问子组件的State因此无法通过shouldCoponentUpdate过滤掉不必要的更新。
• Ref传递问题：Ref会被隔断。

3、Render Props

render props 就是通过class声明的，并且construct接受了props

优点：

• 可以判断子组件是否需要更新，来减少DOM操作，减少渲染时间。
• 可以通过Ref传递数据和属性。

4、React Hooks

优点：

• React Hooks 解决了 render props的嵌套问题，更加简洁。
• 解耦：React Hooks 可以更方便的把UI和状态分离，做到更彻底的解耦。
• 函数的友好：React Hooks为函数式组件解决了很多的问题

1. 错综复杂的this指向问题。
2. 分割在不同生命周期中的逻辑使得代码难以理解和维护。
3. 代码复用成本高。

缺点：

• 额外的学习成本，需要学习Function。
• 写法出现了很多的限制。