摘要：我的教程可能也会帮你一把其他的二分法展示型组件和容器型组件这种分类并非十分严格，这是按照它们的目的进行分类。在我看来，展示型组件往往是无状态的纯函数组件，容器型组件往往是有状态的纯类组件。不要把展示型组件和容器型组件的划分当成教条。
本文译自Presentational and Container Components，文章的作者是Dan Abramov，他同时也是Redux和Create React App的作者。
在实际使用React + Redux 技术栈的开发过程中，非常好的理解了容器型组件和展示型组件的概念是开发出易维护，可复用React App的基础
在开发React应用的时候，我发现了一种极其简单的开发模式。如果你已经用过一段时间的React，你也许已经发现了它。这篇文章已经讲的很好了，但是我想补充几点。
如果你将组件分为两类，你会发现它们更容易被复用和理解。我把这两类称为容器型组件 和 展示型组件 ，但是我也听说过其他名字，比如臃肿型组件和简单型组件，智能型组件和傻瓜型组件，有状态组件和纯组件，封装型组件和元组件等等。它们不完全相同，但是在核心观点上是相似的。
展示型组件
关心数据的展示方式
内部可能包含展示型组件和容器型组件，并且通常存在其他DOM元素及其样式
允许通过this.props.children控制组件
不依赖app中的其它文件，像Flux的actions或stores
不关心数据是如何加载和变化的
仅通过props接收数据和回调函数
几乎不用组件内的state（如果用到的话，也仅仅是维护UI状态而不是数据状态）
除非需要用到state,生命周期函数或性能优化，通常写成函数式组件，
例如：Page,Sidebar,Story,UserInfo,List
容器型组件
关心数据的运作方式
内部可能包含展示型组件和容器型组件，但是通常没有任何用于自身的DOM元素，除了一些用于包裹元素的div标签，并且不存在样式
为展示型组件和容器型组件提供数据和操作数据的方法
调用Flux actions并以回调函数的方式给展示型组件提供actions
通常是有状态的，并且作为数据源存在
通常由高阶函数生成例如React Redux的connect()，Realy的createContainer，或者Flux Utils的Container.create(),而不是手写的
例如：UserPage,FollowersSidebar,StoryContainer,FollowedUserList
为了清晰的区分这两种组件，我把放在不同的文件夹中
这种方法的优势关注点分离。通过用这种方式开发组件，你可以更好的理解你的app和UI
更好的复用性。你可以在不同的数据源中使用相同的展示型组件，也可以把它们放进不同容器型组件中更进一步的进行复用
展示型组件是你的app必不可少的"调色板"，你可以把它们放在一个独立的页面中，让设计师随意拖拽它们的变量而不改变应用的逻辑。在这个页面上进行页面快照回归测试
这种方法逼你去把用于布局的组件抽出来，例如Sidebar，Page，ContextMenu。然后通过子组件的方式引入而不是在各个容器型组件中复制粘贴已有的样式和布局
记住，组件不一定要输出DOM元素，它们只需要提供UI之间的组合关系和分界
好好利用这一点
什么时候引入容器？我建议你先用展示型组件搭建你的app。最终你会意识到你给中间的组件传递了太多的props。有些组件并不使用这些props，而仅仅向下传递。并且当下层组件需要更多数据的时候，你必须重写改写所有的中间组件。这时候就需要引入一些容器型组件。通过这种方式，你可以从叶子节点组件获取数据和方法，而不用考虑处于中间的组件。
这需要边开发边重构，所以没有必要一次做对。随着日常应用这种模式，你会组件培养出一种『这时候我该抽出一个Container』的直接，就像你已经知道什么时候应该提取出一个函数一样。我的Redux教程可能也会帮你一把
其他的二分法展示型组件和容器型组件这种分类并非十分严格，这是按照它们的目的进行分类。
为了与之前的概念做比较，这是一些相关但不同的二分法
有状态和无状态 有些组件使用React的setState()方法，有些不用。容器型组件往往是有状态的而展示型组件往往是无状态的，这并不是一条铁律。展示型组件也可以是有状态的，容器型组件也可以是无状态的
类和函数 从React0.14开始，组件既可以声明为类也可以声明为函数。函数式组件可以定义的更简单但是也缺少一些只能在类组件中使用的特写。有些限制可能未来会消除，但是在当下仍然是存在的。由于函数式组件更加易于理解，所以我建议你尽量的使用它。除非你需要state，生命周期函数，或者性能优化，这些特性只有在类组件中才可以使用。
纯和非纯 如果一个组件在输入相同props的情况下总是输出相同的结果，那我们称这个组件为pure component。pure component既可以声明为类组件也可以声明为函数式组件，即可以是有状态的也可以是无状态的。另一个重要的方面是，pure component不依赖props和state的深层比对，所以可以在shouldComponentUpdate方法中进行浅比较优化性能，但是在未来可能有很多变化。
展示型组件和容器型组件都可以放进以上任何一种二分法中。在我看来，展示型组件往往是无状态的纯函数组件，容器型组件往往是有状态的纯类组件。然而这并不是一种要求，而是一种现象，并且在一些特定的场景中我也确实见过完全相反的情况。
不要把展示型组件和容器型组件的划分当成教条。有的时候没有必要对二者进行区分。如果你不太确定一个组件是展示型组件还是容器型组件，也许现在还不是区分它的时候，别太心急！
例子Michael Chan为我们用一个gist阐释了上面的道理
延伸阅读Redux入门
Mixins模式已死，组合模式永存
容器型组件
Atomic Web Design
Building the Facebook News Feed with Relay
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93367.html
摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...
摘要：作者沪江前端开发工程师本文原创翻译，有不当的地方欢迎指出。管理数据，而提供服务器上的数据，因此应用于处理网络请求。结论使用建立的应用都是模块化的会成为其中一个模块，库是另一个模块。原文原创新书移动前端高效开发实战已在亚马逊京东当当开售。 作者：Oral （沪江Web前端开发工程师）本文原创翻译，有不当的地方欢迎指出。转载请指明出处。 当你问起有关AJAX与React时，老司机们首先就会...
摘要：协调状态的这三个方面是前端开发的重要组成部分，对这项任务有不同程度的支持。这使得保持高度统一。的真正威力到目前为止，看上去只是的辅助工具。在的术语中这称之为派发动作。撤销重做流行的撤销重做功能需要系统级规划。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 你知道 Redux 真正的作用远不止状态管理吗？ 你是否想要了解 Redux 的工作原理？ 让我们深入研究 ...
摘要：它是由一个非常聪明的人开发的，用来缓解在单页面应用中管理状态的问题。的问题没有一种适合所有场景的完美工具。为设计的是世界的另一个新增内容，但目前仅适用于。这将导致最后期限延长，并且留下更多需要我们维护的代码。 原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不讨厌 ...
摘要：而不是卷入无休止的撕逼，用了某某而产生的优越，甚至借贬低他人来抬高自己。 前言 这是一个系列文章，旨在分享在react及相关技术栈实践过程中的个人感悟，心得。如果有不好的地方，欢迎各位批评指正。 由于对react本身还未深入了解，今天我们先来谈一谈redux相关的问题。 Who creates it? Dan Abramov是redux的作者，同时，他也是Create React...
阅读 2850·2021-11-22 15:22
阅读 19091·2021-09-22 15:00
阅读 1436·2021-09-07 09:58
阅读 1241·2019-08-30 13:01
阅读 2414·2019-08-29 16:27
阅读 2347·2019-08-26 13:25
阅读 1620·2019-08-26 12:13
阅读 938·2019-08-26 11:53
