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, 大家可以自己尝试一下吧!

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...