专栏首页云前端[译] React 中的 dumb 组件和 smart 组件

[译] React 中的 dumb 组件和 smart 组件

原文:https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43

当你开始起步学习 React,很快就会接触到组件(Component)的概念,正是这一概念让 React 脱颖而出。创建不同的组件并将它们嵌套在一起,就能构建出一个应用。听起来再简单不过了,但真实情况还会更复杂些。有两种不同类型的组件,称之为 smart 组件和 dumb 组件。

Dumb Components

dumb(译注:哑的;无声音的;笨的)组件也叫“展示”组件(presentational components),因为它们只负责表现 DOM。一旦完成了这项工作,也就没什么可做的了。不用时常的去关注它,在页面上放置信息后就算完事儿。

这种组件本身只有一个 render() 方法(他们也用不到其他的),并且总是表现为 Javascript 函数。不用维护内部 state,不用知道当收到请求时如何改变其展现的数据 - 无知便是福。

const Footer = (props) => {
 return(
 <div>
   <ul>
     <li>Footer Information</li>
   </ul>
 </div>
 )
}

一个 “hello world” 组件可以被认为是最基础的 dumb 组件,或者网站头尾那种整块的部分。组件被定义一次后,可以在应用中被多次引用;值渲染其核心部分,组件的每个实例看起来都差不多。想要改变其外观的话,只有 props 这一个地方可以着手。简单又直观。

Smart Components

另一方面,smart(译注:adj. 聪明的;巧妙的;敏捷的)组件有着不同的职责,也成为容器组件(container components)。因为背负了灵巧之名,它们必须得关注 state 并留意应用是如何工作的。

根据容器设计模式(the container design pattern),容器组件和展示组件被分开设计并各司其职。容器组件需要管理自身繁复的生命周期,并负责将数据作为 props,向下传递给展示型组件。

smart 组件是基于类的,并在 constructor() 函数中定义自身的 state。

class App extends Component {
 constructor(props){
   super(props);
   this.state = {pictures : []};
 }
}

此类组件也经常包含其他回调函数,用于升级 state 并变成 props 传递给子组件。

应用的根组件就是一个很好的 smart 组件范例,经常负责管理整个应用的若干个 state 的片段,并需要将附加的功能下发到其子组件,从而实现用户交互时 state 能被更新。

本文分享自微信公众号 - 云前端(fewelife),作者:lua

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 复用 Vue 组件的 6 层手段

    原文:https://michaelnthiessen.com/6-levels-of-reusability/?cksubscriberid=68763622...

    江米小枣
  • [译]: Vue.js 函数式组件:what, why & when?

    原文:https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439...

    江米小枣
  • [译] 状态管理中的第一性原理

    如你所见,在任何前端框架中,包括 React、Angular 和 Svelte -- 这只是其中很少几个的名字,关于状态如何运转都存在着很多基础性的概念。

    江米小枣
  • react-02

    用户2337871
  • 如何使用Vue.js渲染JSON中定义的动态组件

    json数据content里边有个body数组,每个元素中都有一个component的字段,这个字段决定了使用哪个组件去渲染。

    前端知否
  • Vue 与 React 父子组件之间的家长里短

    FinGet
  • 组件化通用模式

    一、前言 模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变...

    企鹅号小编
  • vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image"> <uploadImg :width="150"...

    蓓蕾心晴
  • 企业 SOA 设计(2)–组件化产品开发平台

    上一篇《企业 SOA 设计(1)–ESB 设计》中,写到我们的 SOA 设计分为两个层面来进行:一个是系统间的 SOA 设计,主要通过 ESB 来完成;另一方面...

    用户1172223
  • React数据流和组件间的通信总结

    首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

    前朝楚水

扫码关注云+社区

领取腾讯云代金券