React中的容器组件(Container Component)和展示组件(Presentational Component)
React的思想里,UI=render(data)
所以,React的组件一般是完成两种功能:
- 读取数据
- 渲染界面
如果我们把两个功能都放在同一个组件内,那么这个组件做的事情就太多了,考虑到组件复用和业务变更,让一个组件只专注做一件事,我们可以把这个组件拆分成多个组件,让每个组件只专注做一件事,所以就衍生了一种React常用的模式:容器组件和展示组件。
容器组件
容器组件在外层,有以下特点:
- 提供数据
- 关注业务处理
- 与状态管理工具交互
- 有自己的状态(state)
- 几乎没有dom和样式
展示组件
展示组件在容器组件内部,有以下特点:
- 关注UI层
- 有自己等dom和样式
- 没有自己的状态
- 不关心数据是如何获取和变化的
- 通过props接收数据和回调函数
- 不依赖其他组件
- 不需要生命周期函数
展示组件一般可以使用纯函数的声明方式:
export default (props)=>(
<div>Hello {props.name}</div>
);
这样做的好处
- 分离关注,你可以更好的理解app和UI。
- 更易复用,同样的展示组件可以在不同的状态源、数据源中使用。也可以封装成容器组件,在未来重用它们。
- 数据结构和页面结构保持一致性。