［译］Smart and Dumb Components

Smart and Dumb Components

原文地址

当我在写React应用的时候我发现一种老有用并且简单的写法了。要是你写了一段时间React的话。。我估摸着你也应该发现了这种写法了。这篇文章（下次我就翻译这片文章）就说的很好，可是捏，我还想多差两句嘴

你要是把你的组件分红两大类。。你将会发现，这样的话你更容易思考你的组件该怎么写。。而你的组件写出来也更容易复用。我把这两大类称做 Smart和 Dumb，可是我也据说他们被称为Fat 和 Skinny, Stateful 和 Pure, Screens 和 Components等。虽然叫法不一样，但核心思想都差很少

Dumb components:

-它必须能独立运做。。不能依赖依赖这个app的actions 或者 stores 部分

• 能够容许有this.props.children,这样的话有助于这个组件有修改弹性

• 接受数据和数据的改变只能经过props來处理,没必要也不能用state。

• 组件的外观能用一个css來维护(这样才更容易重用，相似支付宝的ant)

• 不多用到state,(通常呈现动画的时候可能会用到。。好比控制下拉框的展开或者收起)

• 也许会用到其余的dumb components

• 好比说: Page, Sidebar, Story, UserInfo, List,像这些都是dumb components.

smart components:

• 必定包含至少一个Smart 或者 Dumb的元件，（这确定啊。。否则他干的啥）

• 负责把从flux(or redux等)接收到的state传给dumb component

• 负责call action,并把它的callback传給dumb component

• 它应该只有结构没有外观（这样的话。。改个样式只须要改dumb 组件 就行了。。他写着。。他写那里 否则很累啊）

• 好比说: UserPage, FollowersSidebar, StoryContainer,
  FollowedUserList.

这样作的好处

• 有助理你分离关注点，这样的话更有助于理解你的app的业务逻辑 和 它的ui

• 更有助于复用你的dumb组件，你能够将你的dumb组件复用于别的state下，并且这两个state还彻底不一样

• 本质上dumb 组件 其实 就是你的app的调色版。。你能够将它们放到一个页面上。。而后让设计师除了app的业务逻辑，样式随便怎么改，