1. 两者概念

对于React组件的拆分，主要分为UI组件和容器组件两种。

UI组件，也就是无状态组件，主要负责页面的渲染，只需要接受props作为输入参数，返回一个JSX作为输出即可。UI组件通常是一个纯函数，没有内部状态和逻辑处理，所以不需要维护组件的生命周期。由于UI组件仅仅是一个函数，因此性能也相对较高。

容器组件，则主要负责组件的逻辑处理，例如从服务端获取数据、处理业务逻辑、状态管理等，通常包含一个或多个UI组件。由于容器组件需要处理复杂的逻辑，通常使用class组件来实现，也就是有状态组件。有状态组件会维护内部的状态，同时也会维护组件的生命周期。

接下来我们看一下唯一的组件TodoList，这个组件其实包括了本身的逻辑和渲染，我们把这种逻辑和渲染都放在一个组件的话有时候会比较复杂。

所以负责页面渲染的就是UI组件，容器组件处理逻辑！

2. 拆分组件

首先我们创建了一个UI组件，接着我们把原来组件关于页面渲染的逻辑都拿过来：

然后原先组件渲染函数直接传入UI组件：

然后就要对渲染中的各种变量和引入进行修改了

例如这个state的inputValue明显是没有的，但是其实父组件是有这个value的，所以需要父组件传递进来！然后子组件这边使用props就可以了：

接着还有一些事件处理函数，也可以通过同样的方式传递进去：

之前有一个handleItemDelete的方式需要我们重点看一下：

首先他的bind方法是写在render里面的，我们把它拿出来写在组件的一开始：

接着render方法里面其实这个事件函数还传入了一个index的参数，这个怎么处理呢？需要利用匿名箭头函数，把index作为参数值传递进去：

<List style={{ marginTop: '10px', width: '300px' }} bordered dataSource={this.props.list} renderItem={(item, index) => ( <List.Item onClick={() => this.props.handleItemDelete(index)}> {item} </List.Item> )} />

这个时候就完成了UI组件和容器组件的拆分了！注意以后也需要这样拆分、