UI组件与容器组件的拆分

UI组件也叫傻瓜组件，称它傻是因为它只负责页面的显示没有任何逻辑。容器组件也叫聪明组件，容器组件并不管页面长什么样子，它关注的是整个页面的业务逻辑。
组件渲染是由render决定的，在前面组件的渲染和所有的逻辑都写在了一个文件中。当我们把一个组件的逻辑和渲染都放在一个文件里管理的时候组件维护起来会比较困难，于是就需要对组件做一个拆分，让UI组件来专门做渲染，容器组件专门来处理逻辑部分。


上面代码那样写肯定是不对的，因为UI组件里面没有state，下面接着处理UI组价接收数据部分的代码：
容器组件通过属性把值传给UI组件，UI组件里面接收数据还是用props来接收。


如果想调用父组件的方法同时可以传参数可以这么写，在箭头函数里面调用父组件的方法同时传给父组件参数：

注意：箭头函数里不能再传index了。箭头函数里面接收的是event对象。