Smart and Dumb Components
@H_502_5@
当我在写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的业务逻辑,样式随便怎么改,