【React】展示组件和容器组件

展示组件：

• 展示型组件一般是无状态组件，不需要state
• 一般含有dom标签和样式
• 数据的主要来源是props
• 展示组件一般也被成为傻瓜组件，你通过props往里面传入什么值就能预测到展示结果，就像纯函数

容器组件：

• 大多不包含标签和样式
• 包含状态
• 通常由高阶组件构成

举例

// 举个例子：下面这个类很难实现复用，如果要想复用要把容器组件和展示型组件分开才行
class TodoList extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            todos:[]
        }
        this.fetchData = this.fetchData.bind(this);
    }
    componentDidMount(){
        this.fetchData();
    }
    fetchData(){
        fetch('/api/todos').then(data =>{
            this.setState({
                todos:data
            })
        })
    }
    render(){
        const {todos} = this.state;
        return (<div>
                <ul>
                    {todos.map((item,index)=>{
                        return <li key={item.id}>{item.name}</li>
                    })}
                </ul>
            </div>)
    }
}

// 以下这样子就很容易实现组件的复用
//展示组件
class TodoList extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const {todos} = this.props;
        return (<div>
                <ul>
                    {todos.map((item,index)=>{
                        return <li key={item.id}>{item.name}</li>
                    })}
                </ul>
            </div>)
    }

//容器组件
class TodoListContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            todos:[]
        }
        this.fetchData = this.fetchData.bind(this);
    }
    componentDidMount(){
        this.fetchData();
    }
    fetchData(){
        fetch('/api/todos').then(data =>{
            this.setState({
                todos:data
            })
        })
    }
    render(){
        return (<div>
                <TodoList todos={this.state.todos} />
            </div>)
    }
}