React组件之高阶函数替换Mixins注入

值此七夕佳节，在这里记录一下今天用React写一个倒计时组件的笔记。

实现功能

基于ES6用React实现一个倒计时组件，格式：6时6分6秒，然后每隔一秒不断倒计时。

回顾Mixins

当然，完全可以直接写在一个React.createClass函数里面，但可复用性不高，所以换做在之前官方推荐的做法就是利用Mixins特性，所谓Mixins我理解就是注入，类似于Java Spring的依赖注入，简单代码如下：

// 定义一个倒计时Mixins
var SetIntervalMixin = {
    componentWillMount: function() {
        this.intervals = [];
    },
    setInterval: function() {
        this.intervals.push(setInterval.apply(null, arguments));
    },
    componentWillUnmount: function() {
        this.intervals.forEach(clearInterval);
    }
};

// 注入Mixins到组件中
var Timer = React.createClass({
    mixins: [SetIntervalMixin],
    getInitialState: function() {
        return {
            timestamp: this.props.timestamp
        }
    },
    componentDidMount: function() {
        this.setInterval(this.changeState, 1000);
    },
    changeState: function() {
        this.setState({
            timestamp: this.state.timestamp - 1000
        })
    },
    render: function() {
        //取得属性值
        var timestamp = this.state.timestamp;        
        return <p>{this.renderTime(timestamp)}</p>
    },
    renderTime(timestamp){
        // 省略掉时间计算转换
        ...
        return 'XX天XX时XX分XX秒';
    }
});

//渲染React元素
ReactDOM.render(
    <Timer timestamp="66666666"/> ,
    document.querySelector("body")
);

用Mixins的最大好处就是复用，保证组件的最小颗粒化，同时也保证了功能相对单一。

ES6的高阶函数

但是用ES6来写的话，Mixins显得有点无力，没有办法注入，这个时候高阶函数就派上用场了，其实Redux的connect就是利用了这一特性，改写上面的代码如下：

// 注意这里传入一个React组件然后返回一个React组件
var SetIntervalMixin = ComposedComponent => class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            timestamp: this.props.timestamp
        }
    }
    componentDidMount() {
        this.interval = setInterval(this.changeState.bind(this), 1000);    
    }
    componentWillUnmount() {
        clearInterval(this.interval);
    }
    changeState() {
        this.setState({
            timestamp: this.state.timestamp - 1000
        });
    }
    render() {
        return <ComposedComponent {...this.props} {...this.state} />;
    }
};

class Timer extends React.Component {
    constructor(props) {
        super(props);        
    }
    render() {
        // 注意，这里通过props取得属性值
        var timestamp = this.props.timestamp;        
        return <p>{this.renderTime(timestamp)}</p>
    }
    renderTime(timestamp){
        // 省略掉时间计算转换
        ...
        return 'XX天XX时XX分XX秒';
    }
}
export default SetIntervalMixin(Timer);

//渲染React元素
ReactDOM.render(
    <Timer timestamp="66666666"/> ,
    document.querySelector("body")
);

总结

两者方法其实我更倾向于第二种，也不单单是用ES6写起来舒服些，函数式编程以及中间件的思维在里面，总而言之，写组件多考虑抽取可复用组件出来，避免逻辑一大堆糅合在一起。

稍微再记一下今天碰到的一个坑：用ES6的for...of去遍历数组的时候，利用Babel转换在chrome 49以下会被转换成Symbol导致报错 o(╯□╰)o