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的营业逻辑,款式随意怎样改,