展示组件
 
- 只关心它们的样子。
 
- 可能同时包含子级容器组件和展示组件,一般含DOM标签和自定的样式。
 
- 通常用this.props.children来包含其他组件
 
- 不依赖app其它组件,比如flux的actions和stores
 
- 不会定义数据如何读取,如何改变
 
- 只通过this.props接受数据和回调函数
 
- 很少有自己的状态变量,即使有,也是UI的状态变量,比如toggleMenuOpen,InputFocus
 
- 一般是函数级组件,除非它们需要状态,lifecycle hooks,优化处理。
 
容器组件
 
- 只关心它们的运作方式。
 
- 可能同时包含子级容器组件和展示组件,但大都不含DOM标签,而含他们自己所用的wrapping div,从不用自己的样式。
 
- 为展示组件或其他组件提供数据和方法。
 
- 调用Flux的actions,并且将其作为展示组件的回调函数。
 
- 维持许多状态变量,通常充当一个数据源。
 
- 通常由高阶组件生成,比如Redux里的connect(),Relay里的createContainer(),Flux Utils里的Container.create(),而非手工写出(译者:可能在meteor中数据是例外吧)
 
- 例子有UserPage, FollowersSidebar, StoryContainer, FollowedUserList。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React容器组件和展示组件的更多相关文章

  1. React 之容器组件和展示组件相分离解密

    Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想.明智的做法是只在最顶层组件(如路由操作)里使用 Redux.其余内部组件仅仅是展示性的,所有数据都通过 props 传入 ...

  2. Vue之合理划分容器组件与展示组件

    Vue之合理划分容器组件与展示组件 时间 2019-06-02 00:30:32  Poetry's Blog 原文  http://blog.poetries.top/2019/06/01/vue- ...

  3. react(三):容器组件和傻瓜组件

    让一个组件只专注于一件事,如果发现让一个组件做的事情太多,就可以把这个组件拆分成多个组件让每一个组件只专注于一件事 <深入浅出react和redux> ---程墨 一个react组件最基本 ...

  4. React之智能组件和木偶组件

    智能组件 VS 木偶组件 在 React + Redux 结合作为前端框架的时候,提出了一个将组件分为“智能”和“木偶”两种 智能组件:它是数据的所有者,它拥有数据.且拥有操作数据的action,但是 ...

  5. React 世界的一等公民 - 组件

    猪齿鱼Choerodon平台使用 React 作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库Choerodon UI.结合实际业务情况,不断对组件优化设计,提高代码质量. ...

  6. React 设计模式 --- Container and Presentational pattern(容器和展示组件分离)

    在React开发中,一个典型的React组件通常会混杂着逻辑操作部分和展示部分.逻辑操作部分指的是和页面UI无关的内容,如API的调用,数据的处理,事件处理函数. 展示部分则指的是创建页面UI 的内容 ...

  7. 展示组件(Presentational component)和容器组件(Container component)之间有何不同

    展示组件关心组件看起来是什么.展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态.(子组件)容器组件则更关心组件 ...

  8. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  9. React 深入系列2:组件分类

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列2:组件分类 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加 ...

随机推荐

  1. 利用async和await异步操作解决node.js里面fs模块异步读写,同步结果的问题

    async await 解决异步问题,这两个关键字是es7提出的,所以测试,node和浏览器版本提高一些 async await 操作基于promise实现的 async await这两个关键字是一起 ...

  2. C++模板的特化与偏特化

    http://cppblog.com/SmartPtr/archive/2007/07/04/27496.html (1) 类模板定义一个栈的类模板,它可以用来容纳不同的数据类型 template & ...

  3. Android 属性动画(Property Animation) 全然解析 (上)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38067475 1.概述 Android提供了几种动画类型:View Animat ...

  4. Intellij IDEA报错:Could not save application settings: java.io.IOException: java.lang.AssertionError: Unexpected content storage modificat

    Question: i have a message saying "Could not save application settings: java.io.IOException: ja ...

  5. Unable to update auto-refresh reference 'microsoft.codedom.providers.dotnetcompilerplatform.dll'.

    Unable to update auto-refresh reference 'microsoft.codedom.providers.dotnetcompilerplatform.dll'. Ca ...

  6. unique(V.begin(),V.end())

    unique(V.begin(),V.end()) 重排容器算法:sort,unique unique  返回指向不重复区域之后一个位置的迭代器 ///删除vstr中重复的元素 void delete ...

  7. [BZOJ 1691] 挑剔的美食家

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1691 [算法] 不难想到如下算法 : 将所有牛和牧草按鲜嫩程度降序排序,按顺序扫描, ...

  8. [SCOI 2010] 连续攻击游戏

    [题目链接] https://www.luogu.org/problemnew/show/P1640 [算法] 二分图匹配 实现时需要常数优化和特判 [代码] //code by byf and lm ...

  9. java 监听机制模拟(JButton按钮监听机制)

    一.概念 1.事件监听器 事件监听器就我个人的理解就是:被外部事件(键盘.鼠标)引发的程序,这段程序是被嵌入到事件源的类里面,它负责监听事件列表.而很多人把事件监听器理解成是实现EventListen ...

  10. DStream 转换操作----无状态转换

    DStream转换操作包括无状态转换和有状态转换. 无状态转换:每个批次的处理不依赖于之前批次的数据. 有状态转换:当前批次的处理需要使用之前批次的数据或者中间结果.有状态转换包括基于滑动窗口的转换和 ...