第四节——组件(Components) 和 Props

组件使得你可你把UI分割为独立的，可复用的块，并且可以单独的考虑每一块。

从概念上讲，组件类似于JavaScript中的函数。它接收任意的输入（被称作 "props"）并且返回React元素来描述在屏幕上应该显示什么。

函数式(Functional)和类式组件(Class)组件

定义一个组件最简单的方式就是去写一个JavaScript函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这个函数是一个有效的React组件，因为它接收了单一的"props"（它代表着属性）这样一个带有数据的对象参数并且返回了一个React元素（Element）。我们把这样的组件称为函数式的，因为它就是一个JavaScript函数。

你同样可以使用ES6的class来定义一个组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

以上两种定义组件的方式从React的角度来看是等价的。

使用class方式定义的组件会有一些额外的附加特性，这些特性我们将会在下一章节中进行讨论。那么现在，为了简洁起见我们将会使用函数式来定义组件。

渲染一个组件

在之前，我们只遇到过用来代表DOM 标记的 React 元素(Element)：

const element = <div />;

然而，元素还可以用来代表自定义组件（ user-defined components）：

const element = <Welcome name="Sara" />;

当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')
);

让我们一起来概括一下在这个例子中都发生了什么：

1.我们用<Welcome name="Sara" /> 这个元素来调用了ReactDOM.render()方法
2.React调用Welcome组件并把{name: 'Sara'}作为"props"
3.我们的Welcome组件返回<h1>Hello, Sara</h1>元素作为结果
4.React DOM高效地在DOM中更新出<h1>Hello, Sara</h1>

附加说明：
组件名总是以首字母大写开头

React把以小写字母开头的组件当作HTML 标记。例如，<div />代表一个HTML div标记，但是<Welcome /> 代表一个组件，并且需要在作用域内有Welcome的定义。（React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.）

创作组件

组件同样可以作为其它组件的返回值部分，这让我们可以使用相同的组件抽象出任何细节层。一个按钮，一个表单，一个对话框，一个窗口：在React 应用中，这些通常作为组件来表示。

例如，我们可以创建一个APP 组件，这个组件渲染了许多次Welcome组件：

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融入到一个已存在的应用中，你或许会在底层构建一些类似于按钮这样的小型组件。逐渐地叠加这些到顶级的视图层（gradually work your way to the top of the view hierarchy）。

提取组件

不要害怕把组件分割为更小的组件。

例如，思考一下这个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 (一个对象), text (一个字符串), 和 date (一个日期对象)作为"props"，描绘了一个社交媒体网站上的评论组件。

这个组件很难去改变因为它里面的东西都嵌套在一起，也很难去复用它其中的某个单独部分。让我们一起从中提取出一些组件。

首先，我们将会提取Avatar组件：

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />

  );
}

这个Avatar组件并不需要知道它将在Comment组件中被渲染。这就是我们给它的"props"一个更加普遍的名字:user 而不是author的原因。

我们推荐给"props"命名是要从组件的角度考虑，而不是这个组件被使用的环境。

现在我们可以把这个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>
  );
}

接下来我们将会提取UserInfo组件，在渲染完Avatar后接着就是 user’s name：

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>
  );
}

提取组件在一开始可能看起来是一件很枯燥，让人发牢骚的工作，但是在构建大型应用的时候你将会尝到甜头。一个好的规则是：如果你的UI的某一部分多次被使用到（Button, Panel, Avatar），或者它自身足够复杂（App, FeedStory, Comment），把它们变成一个可复用的组件是一个不错的选择。

Props是只读的

无论你是以函数式或者是类式的方式来声明一个组件，都一定不可以对它自己的props进行修改。
思考一下这个sum函数：

function sum(a, b) {
  return a + b;
}

这样的函数被称为"pure"(纯)函数，因为它们没有尝试去改变输入的值，并且对于相同的输入，它们总是能返回相同的值。

与此相反，这个函数被称为"impure"(非纯)函数，因为它对输入值进行了改变：

function withdraw(account, amount) {
  account.total -= amount;
}

React十分的灵活，但是它有一条严格的规定:

所有的组件对于"props"都应该表现为一个纯函数（组件中不可以对"props"进行修改操作）。

当然，应用的界面是动态的，并且随时间不断改变的。在下一章节中，我们将会介绍一个被称为"state"的新概念,State允许React组件随着时间的变化改变它们的输出，以此来响应用户操作，网络等，千万不要忘记这条规则。