[译] 组件、Prop 和 State

原文连接: learnreact.design/2017/08/16/…

喜欢理由: 插图大爱 生动有趣 视角独到

特别鸣谢: 原做者 Linton Ye 的倾情校对

系列博客: 用通俗的语言和涂鸦来解释 React 术语

• 图解 React
• 图解 React Native
• 组件、Props 和 State (本文)
• 深刻理解 Props 和 State (待翻译)
• React Native vs. Cordova、PhoneGap、Ionic，等等 (待翻译)

今天咱们来学习 React 里最重要的三个概念: 组件、prop 和 state ，以及 prop 和 state 之间的区别。

如同以前的文章，我仍是会尝试用通俗的语言来解释这些概念。所以，阅读本文一样不须要任何 JavaScript 基础。

在本章中你根本找不到任何 JavaScript 代码，我将用一种简单的标识语言来帮助你理解主要的概念，在之后的文章里我再用 JavaScript 代码详细讲解。一步一个脚印嘛，我相信这种方法对于学习 React 或其余技术都是有效的，尤为是当你没有太多编程经验时。要是将 React 的概念和 JavaScript 的细节混在一块儿的话，极可能会令你不知所措！

学习目标

当你读完本文后但愿你能从新回到这里，并可以轻松回答如下问题:

• 什么是 prop ？
• 什么是 state ？
• 什么时候使用 prop ？什么时候使用 state ？
• 如何让例子的窗户能够打开和关闭？
• 你能写出 Domo 帽子那个例子的伪代码吗？

盖房子

要想理解这些概念是什么以及如何使用它们，咱们先来写一个小示例。就盖个房子如何？(点击门有惊喜)

查看由 focuser (@focuser) 在 CodePen 编写的 Demo : React 小屋。

组件

若是你还记得咱们在前面文章中所讨论过的，组件的概念是 React 的三大支柱之一。使用 React 开发应用基本都是在使用组件。

第一步是将 UI 分解成多个组件。例如，咱们能够这样来拆分房子:

如今来编码！

House:

  <div> <Roof /> // 房顶 <Wall /> // 墙 <Window /> // 窗 <Door /> // 门 </div>
复制代码

等一下，怎么看起来这么像 HTML ？没错！React 的部分代码看上去就是很是像 HTML ，其实就是这样设计的，这是为了让 Web 设计师理解和编写 React 代码更容易一些。太贴心了！

所以，在上面的代码中，咱们使用 <div> 做为容器，这基本和 HTML 中是同样的。而像 Roof 和 Wall 这样的标签是咱们即将定义的自定义标签/组件。

舒适提示: 上面的代码并不是实际的 React 代码，甚至连 JavaScript 都算不上。暂时，咱们只使用这种宽松的语法来介绍概念。一旦你理解这些概念后，咱们再来学习 JavaScript 的细节并将上述概念转换成真实代码。

为了让这个例子更容易理解一些，我再简化一下: 从如今开始，咱们来写一个超级简单的 Web 应用，连图片都不用，只显示文字。

例如，Roof 其实就是一个里面有文字的 div :

Roof:

  <div>roof</div>
复制代码

其余组件也是如此，都是只有文字的 div 而已。首先，咱们来看下房子的完整的 React 风格的代码:

House:

  <div> <Roof /> <Wall /> <Window /> <Door /> </div>  

Roof:

  <div>roof</div>

Wall:

  <div>wall</div>

Window:

  <div>window</div>

Door:

  <div>door</div>
复制代码

这没什么很差理解的，是吧？House 是由 Roof、Wall、Window 和 Door 组成的，这些都是纯文本构成的组件。

最后，React 生成的 HTML 以下所示:

<div>
  <div>roof</div>
  <div>wall</div>
  <div>windows</div>
  <div>door</div>
</div>
复制代码

使用 Props 来配置屋顶的颜色

想象一下，咱们将规格说明书发给一个工厂，这个工厂负责代工全部的零部件。在规格说明书中，咱们能够告诉工厂每一个部件的固有属性，好比屋顶的颜色、门的形状，等等。在按照咱们的要求将屋顶和门生产出来后，它们的属性不会产生任何变化，屋顶仍是蓝色的，门依旧是矩形的。这些属性压根不会改变。

在 React 里，咱们将这些属性称之为 Prop ，即 property 的缩写。关于 Prop ，你须要记住两点: 首先，咱们来决定 Prop 的值，并在组件构建以前将其做为组件设计的一部分。其次，Prop 的值永远不会改变。

那 prop 在代码中是怎样的呢？在 House 组件中，若是咱们想要蓝色屋顶的话，只需在 Roof 组件上添加 “color” 属性。这就比如是在发给工厂的规格说明书中指定颜色。

这有点相似于给 HTML 标签添加属性:

House:

  <div> <Roof color="blue"/> ... </div> 复制代码

那 Roof 里面又是怎么样使用 prop 的呢？代码以下所示:

Roof:

  <div>{props.color} roof</div>
复制代码

就这样？没错！可是有几点须要注意:

• 定义组件的 HTML 风格代码是一个模板，而不是单纯的 HTML 标签。这意味着咱们能够在其中放置占位符来改变 HTML 输出的内容，而没必要重复编写不一样的 HTML (还记得 Domo 的帽子吗？这就是占位符的概念！)。在这个示例中，<Roof color="blue" /> 生成的 HTML 是 <div>blue roof<div>，而 <Roof color="red" /> 生成的是 <div>red roof</div>，以此类推。
• 模板中使用的花括号告诉 React 咱们要在此处使用占位符来替代纯文本。
• props 能够看做是 Roof 组件全部属性值的集合。假设组件是这样使用的: <Roof color="blue" material="wood" /> ，那么在 Roof 组件的定义中就可使用 props.color 和 props.material 。

使用 State 来开门

为组件添加 State

组件还能够拥有 state 。那么什么是 state ？state 是一种能够在组件建立后更改的数据。

举个例子，门既能够开，又能够关。咱们能够说门的状态就是 state ，由于它的值是能够在门建立后更改的。在这点上，state 与 prop 是不一样的，prop 是不会改变的，好比门的形状。

状态值的改变一般是由外部事件所引发的。在 Web 应用中，这些所谓的外部事件一般包括：用户输入了数据，或者从服务端获取了数据，又或者是定时器的触发。

下面，咱们来为门添加 state :

Door:
  State:
    status   // "open" 或 "closed"
  <div>Door is {state.status}</div>
复制代码

与 props 相似，state 也是组件内部全部状态值的集合。所以，咱们能够在组件定义的模板中使用 state.[something] 。

接下来，咱们来添加一些处理用户输入的“伪代码”来让门具备交互性。

Door:
State:
  status // "open" 或 "closed"

  <div>Door is {state.status}</div>
  // 处理用户输入
  当开门时
    将 state.status 修改为 "open"
  当关门时
    将 state.status 修改为 "closed"
复制代码

这里的关键点是组件的 state 是随时间而变化的。模板的输出，也就是生成的 HTML 会根据 state 的变化而自动改变。

顺便说句，不要忘了上面的只是“伪代码”，而不是 React 代码。不要尝试将其复制黏贴到你的项目中！不然你的电脑炸了我不负责……💣

State 是私有的

组件的 state 是私有的。门不管是开仍是关，这都仅仅是门的逻辑。与房子或其余组件没有任何关系。事实上，咱们彻底能够将门从房子中移出去，它仍然能够本身打开或关闭。

所以，门的状态只有在 Door 组件内部是可见的。在 Door 组件内，咱们能够读取或改写它的 state 。

House:
  <div> <Door /> ... <!-- 下面这句是错的 --> <div>The door is {Door.state.status}</div> </div>

Window:
  ...
  <!-- 下面这句是错的！ -->
  将 Door.state.status 修改为 'open'

Door:
  ...
  <!-- 兄dei，这仍是错的！ -->
  if House.state.正在出售
    房产经纪人就能够开门
复制代码

总结

好啦，这就是 prop 和 state 。prop 是组件的配置项，它的值是在组件建立以前就已经决定好了，好比门的形状和屋顶的颜色就能够定义为 prop。prop 的值永远不会改变。而 state 是组件的私有数据，当组件建立后才可使用它。好比门的开关状态能够包括在 state 里面。state 会随着一些外部事件的发生而变化。这些所谓的外部事件一般包括：用户输入了数据，或者从服务端获取了数据，又或者是定时器的触发。

但…是，咱们尚未开发任何实际的东西啊？一个只显示纯文本的应用能有多大用处呢？至少要学到如何建造本文开头所说的房子吧？界面里有东西能够点才有用啊？

毫无疑问，要作到这些呢，咱们就须要用 JavaScript 编程了。这个之后再讲吧。若是你不喜欢等待，能够注册个人课程并经过教学视频进行学习。