React版本：15.4.2
**翻译：xiyoki **
组件允许你将UI拆分为独立的可重用的部分，并孤立地考虑每个部分。
从概念上讲，组件就像Javascript函数。它接受任意输入（称为‘props’），并返回React元素，该元素描述了屏幕上应该显示什么内容。
Functional and Class Components（函数和类组件）
定义组件最简单的方式是编写javascript函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
此函数是有效的React组件，因为它接受带有数据的单个‘props’对象参数，并返回React元素。我们把这样的组件称为‘Functional’，因为它们是字面上的Javascript函数。
你也可以使用ES6类定义组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
上述两个组件从React的角度来看是等效的。
类有一些额外的功能，我们将在接下来的章节中进行讨论。在那之前我们将使用简洁的functional组件。
Rendering a Components（渲染组件）
以前，我们只遇到了表示DOM标签的React元素：
const element = <div />;
但是，react元素也可以表示用户自定义的组件：
const element = <Welcome name="Sara" />;
当React遇到表示用户自定义组件的react元素时，它将JSX属性作为单个对象传递给此组件。我们称这个对象为‘props’。
例如，这段代码在页面中渲染出 "Hello, Sara" ：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
让我们回顾一下在这个例子中发生了什么：
- 调用
ReactDOM.render()，并传入<Welcome name="Sara" />元素。 - React调用
Welcome组件，并传入对象{name: 'Sara'}作为props。 -
Welcome组件返回<h1>Hello, Sara</h1>元素作为结果。 - React DOM 高效地更新 DOM 以匹配
<h1>Hello, Sara</h1>。
警告:
始终以大写字母作为组件名的开头。例如，<div />代表一个 DOM 标签，但是<Welcome />代表一个组件，并且需要Welcome处于作用域中。
Composing Components（构建组件）
组件可以在其输出中引用其他组件。这允许我们对任何级别的细节使用相同的组件抽象。一个按钮，一个表单，一个对话框，一个屏幕：在React应用程序中，所有这些通常都表示为组件。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
通常情况下，新的React应用程序在最上层只有一个App组件。但是，如果你将React整合到现有的应用程序中，那么你可以用一个个像Button这样的小组件自下而上地开始自己的构建工作，并用自己的方式逐步构建到应用程序视图层结构的顶部。
警告：
组件必须返回一个唯一的根元素。这就是为什么我们用一个<div>包裹所有的<Welcome />元素。
Extracting components（提取组件）
不要害怕将组件拆分成更小的组件。
例如，考虑这个Comment组件：
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
它接受author (an object), text (a string),和 date (a date) 作为 props, 并且描述的是一个社会媒体网站上的评论模块。
这个组件可能因为嵌套而很难改变，它也很难重用其中的单个部分。让我们从中提取几个组件。
首先，我们将提取Avatar（头像）：
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
Avatar没有必要知道它正被渲染到Comment中. 这就是为什么我们给它的prop一个更通用的名称user而不是author。我们建议从组件自己的角度来命名prop，而不是它的上下文。
现在，我们可以简化Comment一点点：
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
下一步，我们将要提取渲染user’name 和Avatar的UserInfo组件。
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
让我们更进一步地简化Comment:
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
提取组件起初看起来像是一件枯燥乏味的工作，但是在更大的应用程序中，提取出来的可重用组件就像调色板中的各种颜料，可以很方便、快捷地应用到大型程序中，这就是组件提取工作的回报。
Props are Read-Only（props是只读的）
不论你是通过函数的方式，还是类的方式声明一个组件，组件绝不能修改自己的props。考虑一下这个sum函数：
function sum(a, b) {
return a + b;
}
这类函数被称为‘pure’，因为它们不试图改变它们的输入，并且对于相同的输入总是返回相同的结果。
相反，下面这个函数是不纯的，因为它改变了自己的输入：
function withdraw(account, amount) {
account.total -= amount;
}
React非常灵活，但它有一个严格的规则：
** 所有React组件必须像纯函数那样，不能改变其props。**
当然，应用程序的UI是动态的，随时间变化。在下一节中，我们将介绍‘state’的概念。state允许React组件随时间变化而改变它们的输出，以此来响应用户操作、网络响应或其他任何内容，而不违反上述规则。
