react version: 15.5.0
组件允许您将UI拆分为多个独立的,可重用的部分。
概念上,组件就类似于 <code>JavaScript</code> 函数。它们接收任意的输入(<code>props</code>),返回用于描述屏幕显示内容的 <code>React elements</code>。
最简单定义组件的方式,是编写一个 <code>JavaScript</code> 函数:
这个函数是一个合法的组件,因为它接收包含数据的单个 <code>props</code> 对象参数,返回了一个 <code>React elements</code>。我们称这种用JavaScript函数定义的组件为函数式组件。
你也可以使用 ES6 class 来定义组件:
上述两个组件在视图展示上是等同的。
在 下一章节 我们会讨论类组件的一些附加特性。在这之前,我们先使用函数式组件来简化演示。
之前,我们仅仅遇到表示DOM标签的 <code>React elements</code>:
然而,元素也可以表示用户定义的组件:
当 <code>React</code> 发现元素表示一个用户定义的组件时,它将 <code>JSX</code> 属性作为单个对象传递给组件。我们称之为 <code>props</code>。
例如,以下代码在页面上渲染 "Hello, Sara":
CodePen Demo
我们回顾下这个例子中发生了什么:
使用 <code><Welcome name="Sara" /></code> 元素调用 <code>ReactDOM.render()</code>。
React 将 <code>{name: 'Sara'}</code> 作为属性调用 <code>Welcome</code> 组件。
<code>Welcome</code> 组件将 <code><h1>Hello, Sara</h1></code> 元素作为结果返回。
React DOM 使用 <code><h1>Hello, Sara</h1></code> 来更新DOM。
警告: 总是用大写字母开头命名自定义组件 例如, <code><div /></code> 表示一个DOM标签,但是 <code><Welcome /></code> 表示一个组件,且需要作用域中存在 <code>Welcome</code> 变量。
组件可以在其输出中引用其他组件。这使我们可以对不同级别的实现抽象为相同的组件。在 <code>React</code> 中,按钮、表单、对话框,屏幕都通常被抽象为组件。
例如,我们可以创建 <code>App</code> 组件来渲染多个 <code>Welcome</code> 组件:
通常,新的React应用程序在最顶层都会有一个 <code>App</code> 组件。然而,如果你集成 <code>React</code> 到一个现有的应用程序,你可以在内部先使用像 <code>Button</code> 这样的小部件,然后逐步的替换到最顶层。
组件必须返回单个根元素。这是为什么我们用 <code><div></code> 来包含多个 <code><Welcome /></code> 组件。
不要害怕将组件分成更小的组件。
例如,思考这个 <code>Comment</code> 组件:
它接收 <code>author</code>(对象类型),<code>text</code>(字符串)和 <code>date</code>(日期) 作为属性,然后在社交网站上呈现一个评论。
由于多层嵌套,这个组件很难变化,且很难重用它其中的各个部分。我们可以从中提取几个组件。
首先,我们提取 <code>Avatar</code> 组件:
<code>Avatar</code> 不需要知道谁会渲染它。这也是为什么我们使用 <code>user</code> 这个更通用的属性名称来替代 <code>author</code>。
我们建议从组件自身的角度来命名属性,而不是它的使用者。
我们现在已经稍微简化了一下 <code>Comment</code> 组件:
下一步,我们将提取 <code>UserInfo</code> 组件,用于在用户名旁边显示 <code>Avator</code>:
这让我们进一步简化了 <code>Comment</code> 组件:
提取组件可能是看起来很繁琐的工作,但是在较大的应用程序中,可重用的组件能够付出更小的代价。
如果您的UI的一部分使用了几次(按钮,面板,头像)或者它自身就很复杂(App, Comment),它们则是拆分出可重用组件的最佳候选人,这是一个相当实用的经验法则。
当你定义一个组件时,它不应该修改自己的 <code>props</code>。思考下面的 <code>sum</code> 函数。
这些不会修改输入参数,且当输入参数相同时,总是返回相同结果的函数被称之为 纯函数。
相比之下,以下的函数是不纯的,因为它改变了自己的输入:
<code>React</code> 非常灵活,但是也有一个严格的规则:
所有的React组件必须像纯函数那样使用 <code>props</code>(也就是不要在组件内部修改 <code>props</code>)
当然,应用程序的UI是动态的,可以随时间的推移而变化。在 下一节 中,我们将介绍新的概念 <code>state</code>。<code>state</code> 允许React组件根据用户操作,网络响应以及其他随时间推移产生的变化来修改组件输出,而不会违背该规则。