redux进阶、无状态组件、UI组件和容器组件的拆分

UI组件和容器组件拆分

就是将父组件render里面的任何模块都可以拆分程ui组件。然后通过父子组件通信的方式进行数据交互
如果父组件的函数有出了this之外的参数，则要用剪头函数进行传值
例如下面的list,是一个子组件，delItem函数是父组件传过来的，但是除此之外，还有一个index参数。

 <List
                bordered
                dataSource={this.props.list}
                renderItem={(item,index) => (<List.Item onClick={() => {this.props.delItem(index)}}>{item}</List.Item>)}
            />

无状态组件

当一个组件只有render的时候，就可以把这个组件写成无状态组件,就像下面的代码一样，只有一个函数，接收props,取值的时候直接取值，不用this.就是无状态组件。

无状态组件性能比较高，它就是一个函数。而普通子组件，会有一些生命周期函数。

当一个组件只负责页面的渲染，没有任何逻辑的时候就可以将这个组件写成一个性能较高的无状态组件。UI组件一般都可以写成无状态组件

const TodoListUI= (props) => {
return(
    <div style={{marginTop:"10px",marginLeft:"10px"}}>
        <div>
            <Input
                value={props.inputValue}
                placeholder={'请输入'}
                style={{width:"70%"}}
                onChange={props.handleInputChange}
            />
            <Button type="primary" onClick={props.handleBtn}>提交</Button>
        </div>
        <List
            bordered
            dataSource={props.list}
            renderItem={(item,index) => (<List.Item onClick={() => {props.delItem(index)}}>{item}</List.Item>)}
        />
    </div>
	)
}