React之智能组件和木偶组件

智能组件和木偶组件（也有叫容器组件和UI组件的）。见名知意，智能组件就要做一些比较智能比较‘高端’的工作，智能组件负责逻辑处理、数据获取等比较‘智能’的工作；
而木偶组件就比较‘呆板’，它原则上只负责展示功能，像一只木偶，别人（智能组件）用线牵着它来控制它的展示内容。

来看一个例子：

class ListUI extends React.Component{
    render(){
        let data = this.props.data;
        return (
            <ul>
                {data.map(item => <li key={item.id} >{item.text}</li>)}
            </ul>
        )
    }
}

class List extends React.Component{
    constructor(){
        super();
        this.getData = this.getData.bind(this);
    }
    render(){
        let data = this.getData();
        return <ListUI data={data} />
    }
    getData(){
        return [{id : 1,text : 'hello'},{id : 2,text : 'world'}];
    }
}

本例中组件List（智能组件）负责获取数据（getData），实际开发中会比这复杂的多，涉及到调用接口获取数据，数据的处理等等，本例侧重说明概念，具体的就不再赘述。
而组件ListUI（木偶组件）则只负责数据的展示，傻瓜式的别人给他什么他就展示什么。

这是react开发中很重要的一个概念，这种解构分工明确，解构清晰，方便维护和扩展。实属react开发必备之技能。

本例中还有一点值得注意：
构造函数中的绑定this 实际开发中会在一个组件中定义很多方法，这些方法中可能会有回调函数，这就会导致this指向的问题（当然ES6中的箭头函数能规避这个问题，也推荐只用ES6的写法）
但是也不排除有ES5的写法存在，所以需要我们绑定this，这里强烈推荐在构造函数中统一的绑定this，这样哪些方法绑定了this就一目了然也便于维护。

基于这个概念做一些扩展。
事件处理: 有了以上概念的基础，现给组件添加一个点击事件，目的是点击li时弹出当前li的文本内容。根据以上的概念，要把逻辑处理的方法写在智能组件中，然后把方法作为一个prop传递给木偶组件，最后在木偶组件中添加点击事件来调用传过来的方法。
代码如下：

class ListUI extends React.Component{
    constructor(){
        super();
        this.clickHandler = this.clickHandler.bind(this);
    }
    render(){
        let data = this.props.data;
        return (
            <ul>
                {data.map(item => <li key={item.id} onClick={this.clickHandler}>{item.text}</li>)}
            </ul>
        )
    }
    clickHandler(e){
        this.props.clickHandler(e);
    }
}

class List extends React.Component{
    constructor(){
        super();
        this.getData = this.getData.bind(this);
        this.clickHandler = this.clickHandler.bind(this);
    }
    render(){
        let data = this.getData();
        return <ListUI data={data} click={this.clickHandler}/>
    }
    getData(){
        return [{id : 1,text : 'hello'},{id : 2,text : 'world'}];
    }
    clickHandler(e){
        let ele = e.currentTarget || e.srcElement;
        alert(ele.innerHTML);
    }
}

最后想说的是：智能组件和木偶组件这种编程思想非常重要，开发大型项目时体现的尤为明显，当项目很大时更需要把木偶组件细分，不然代码会杂乱无章，非常的不便于阅读，及其的不利于维护和扩展，最后的结果是项目无法进行。