面试了许多求职者，很多求职者只知其然，而不知所以然，写此文章为广大前端小伙伴指引迷津。纯干货！纯干货！纯干货！
目录
Mixin、Hoc、Render props 和 Hook
Mixin
是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，可以拷贝多个属性到一个对象上，为了解决代码复用问题。
var LogMixin = {
log: function() {
console.log('log');
},
componentDidMount: function() {
console.log('in');
},
componentWillUnmount: function() {
console.log('out');
}
};
var User = React.createClass({
mixins: [LogMixin],
render: function() {
return (<div>...</div>)
}
});
var Goods = React.createClass({
mixins: [LogMixin],
render: function() {
return (<div>...</div>)
}
});
- 缺点
- Mixin 可能会相互依赖，相互耦合，不利于代码维护
- 不同的 Mixin 中的方法可能会相互冲突
- 现在大量使用 ES6 语法后，React.createClass 已经取消，这种方式也不再推荐
Hoc
React中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 (高阶组件是参数为组件，返回值为新组件的函数。)
const MouseHoc = (MouseComponent, props) => {
props.text = props.text + "---I can operate props";
return class extends React.Component {
render() {
return (
<div style={{ height: "100%" }} onMouseMove={this.handleMouseMove}>
<MouseComponent {...props} mouse={this.state} />
</div>
);
}
};
};
MouseHoc(Mouse, {
text: "some thing..."
});
-
解决的问题
- 高阶组件就是一个没有副作用的纯函数，各个高阶组件不会互相依赖耦合
- 高阶组件也有可能造成冲突，但我们可以在遵守约定的情况下避免这些行为
- 高阶组件并不关心数据使用的方式和原因，而被包裹的组件也不关心数据来自何处。高阶组件的增加不会为原组件增加负担
-
存在的问题
- HOC 需要在原组件上进行包裹或者嵌套，如果大量使用 HOC，将会产生非常多的嵌套，这让调试变得非常困难
- 当存在多个 HOC 时，你不知道 Props 是从哪里来的。
Render props
通过一个名为“render”(属性名也可以不是 render，只要值是一个函数即可)的属性，该属性是一个函数，这个函数接受一个对象并返回一个子组件，会将这个函数参数中的对象作为 props 传入给新生成的组件。tip: 类似于vue插槽。
Hook
使用函数代替 class：为了解决 class 组件的一系列问题，比如 this 指向、绑定事件、自定义hook代替Hoc等等。质上就是一类有状态的特殊的函数。
减少状态逻辑复用的风险
避免Hoc地狱式嵌套
