[译]Smart and Dumb Components

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

    原文作者:杨川宝
    原文地址: https://segmentfault.com/a/1190000004111786
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞