[译]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的业务逻辑,样式随便怎么改,

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...