React（四）：Smart组件与Dumb组件

Dumb组件：在react中，只会接收props，根据props进行渲染的组件称为Dumb组件。

                    Dumb组件不依赖除了React.js和Dumb组件以外的内容，Dumb组件是最纯粹的，可复用性最好的组件。

Smart组件：单靠Dumb组件无法构建应该程序，因为它们除props外，不依赖其他外部的内容，因而无法获取数据。这就需要另一种组件，它们非常“聪明”，专门从事数据相关的应用逻辑，如与Ajax交互等，这种组件称为Smart组件。

Dumb组件与Smart组件的关系：Smart组件负责数据相关的应用逻辑，将获取到的数据通过props传递给Dumb组件，Dumb负责UI的呈现。

Smart组件一般作为Dumb组件的父组件，如下图：

举一个简单的例子：TableShow是一个显示表数据的Dumb组件，TableShowContainer是一个Smart组件，负责与后台进行数据交互，将接收到的数据传递给TableShow，再由TableShow渲染到页面。

你也许会问，那我直接由Smart组件获取到数据后直接渲染到页面不就行了，为什么还要再传递给一个Dumb组件。

确实Smart组件可以包含Dumb组件，将数据直接渲染到页面。但是Dumb组件的目的是为了高度复用。

假设一种场景，SmartA与SmartB是两个实现不同业务功能的组件，它们都可以对Table数据进行更新。如果直接在Smart组件中进行渲染，那么同一段渲染Table的代码，需要在两个Smart组件中分别写一遍。如果我们将渲染Table这一操作抽离成一个Dumb组件，那么只需要在SmartA获取到后台更新数据时，将数据通过props传给Dumb组件，即可实现Tabke数据的更新，SmartB同理。

不止是大的项目需要严格且有逻辑的组件层划分，在平时的学习以及练习中，应养成一种好的逻辑思维，让它变成一种习惯，才不会手忙脚乱。

欢迎关注公众号“洁儿的漫漫求学路”，互相学习，共同进步~