React入门–Mixins

Mixins

NOTE: 使用 ES6 class 定义的组件已经不支持 mixin 了,因为使用 mixin

的场景都可以用组合组件这种模式来做到,参见

Mixins Are Dead. Long Live

Composition

虽然组件的原则就是模块化,彼此之间相互独立,但是有时候不同的组件之间可能会共用一些功能,共享一部分代码。所以 React

提供了 mixins 这种方式来处理这种问题。

Mixin 就是用来定义一些方法,使用这个 mixin

的组件能够自由的使用这些方法(就像在组件中定义的一样),所以 mixin

相当于组件的一个扩展,在 mixin 中也能定义“生命周期”方法。

比如一个定时器的 mixin:

var SetIntervalMixin = {     componentWillMount: function() {         this.intervals = [];     },     setInterval: function() {         this.intervals.push(setInterval.apply(null, arguments));     },     componentWillUnmount: function() {         this.intervals.map(clearInterval);     } };  var TickTock = React.createClass({     mixins: [SetIntervalMixin], // Use the mixin     getInitialState: function() {         return {seconds: 0};     },     componentDidMount: function() {         this.setInterval(this.tick, 1000); // Call a method on the mixin     },     tick: function() {         this.setState({seconds: this.state.seconds + 1});     },     render: function() {         return (             <p>                 React has been running for {this.state.seconds} seconds.             </p>         );     } });  React.render(     <TickTock />,     document.getElementById('example') );
React 的 mixins 的强大之处在于,如果一个组件使用了多个 mixins,其中几个 mixins

定义了相同的“生命周期方法”,这些方法会在组件相应的方法执行完之后按 mixins

指定的数组顺序执行。

原文  http://www.spotty.com.cn/archives/90/

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » React入门–Mixins

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址