React学习(8)——容器组件与展示组件

 学习 React  原创  管理员  2017-09-07 09:46

概要:让一个组件只专注做好一件事情,如果发现某个组件做的事情太多了,就可以把这个组件拆分成多个组件。与Redux的Store打交道的组件称为容器组件,只负责页面渲染的组件称为展示组件。

在Redux框架下,一个React组件基本上就是要完成如下功能:

  • 和Store打交道,读取Store的状态,用于初始化组件的状态,同时还需要监听Store的状态的改变;当Store状态发生变化时,需要更新组件的状态,从而驱动组件重新渲染;当需要更新Store状态时,就要派发action对象。
  • 根据当前props与state渲染界面

容器组件

负责和Redux Store打交道的组件,处于外层。

涉及到状态的更新与转换。

展示组件

只负责渲染界面的组件,处于中间层或内层。

就是一个纯函数,根据props产生结果,而不需要state。

关系

容器组件与展示组件的拆分,是设计React组件的一种模式,和Redux没有直接关系。

区别

  容器组件 展示组件
位置 最顶层,路由处理 中间和子组件
使用Redux
读取数据 从Redux获取 state 从props获取数据
修改数据 向Redux发起 actions 从props调用回调函数

完整示例:

 

深入浅出React和Redux  

编辑:myweb   最后更新于:2017-09-05 21:20


版权声明:本站所有原创内容受到法律的严格保护,版权归本站所有。如果您觉得我们的内容有价值,您仍然可以进行自由传播,但必须显著地标识或说明此内容在本站的链接地址。




联系我:help@wodeabc.com鄂ICP备14016278号-2
©2016-2021 我的ABC All Rights Reserved.
友情链接: 一起编程网
点击这里给我发消息
我的ABC交流群