31.UI组件与容器组件 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki
UI组件负责页面的渲染
所以需要把render函数return的内容新建放到一个UI组件中。这样,容器组件中只包含页面的逻辑。
容器组件负责页面的逻辑
TodolistUI.js---UI组件:
import React, { Component } from 'react'
class TodolistUI extends Component {
render() {
return (
//...
)
}
}
export default TodolistUI
Todolist.js---容器组件:
import TodolistUI from './TodolistUI'
render() {
return <TodolistUI />
}
总结:
就是把页面渲染部分抽为单独的一个组件。它就是UI组件,也叫傻瓜组件。只负责页面的显示,并没有任何的逻辑
Todolist组件就是一个容器组件或者聪明组件,不关注页面渲染,只负责功能实现,涉及到的都是页面的逻辑。