您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

React Mixins

使用 ES6 class 定义的组件已经 mixin 了,因为使用 mixin 的场景都可以用组合组件这种模式来做到,参见 

这里暂时留存这部分。

虽然组件的原则就是模块化,彼此之间相互独立,但是有时候不同的组件之间可能会共用一些,共享一部分。所以 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 指定的数组顺序执行。


联系我
置顶