ReactJS学习系列课程（React mixin的使用）

React是基于组件的，也就是整个项目是各个组件组合到一起的，这样往往会用到通用的一些特性，这就衍生了mixin的概念。

其实，mixin，可以非常简单的理解，他就是把 一个 mixin 对象上的方法都混合到了另一个组件上，和 es6的extend极为类似。

在mixin中写的生命周期相关的回调都会被合并，也就是他们都会执行，而不会互相覆盖掉。

比如 你在mixin中可以定义 componentDidMount 来初始化组件，他不会覆盖掉使用这个mixin的组件。实际执行的时候，会先执行 mixin 的 componentDidMount ，最后执行组件的 componentDidMount 方法。

需要注意的是，因为mixin的作用是抽离公共功能，不存在渲染dom的需要，所以它没有render方法。如果你定义了render方法，那么他会和组件的render方法冲突而报错。

同样，mixin不应该污染state，所以他也没有 setState 方法。mixin应该只提供接口（即方法），不应该提供任何属性。mixin内部的属性最好是通过闭包的形式作为私有变量存在。

就像下面这样：

<script type='text/babel'> var IntervalMixin = { setInterval: function (callback,interval) { var token = setInterval(callback,interval); this._intervals.push(token); return token; },componentDidMount: function () { this._intervals = []; console.log("1"); },componentWillUnmount: function () { this._intervals.map(clearInterval); } }; var Since2014 = React.createClass({ mixins: [IntervalMixin],// Use the mixin componentDidMount: function () { this.setInterval(this.forceUpdate.bind(this),1000); console.log("2"); },render: function () { var from = Number(new Date(2014,0,1)); var to = Date.now(); return ( <div>{Math.round((to-from)/1000)} </div> ); } }); ReactDOM.render(<Since2014/>,document.getElementById('app')); </script>

这就是mixin， 大家可以自己尝试一下吧！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!