React--Components and Props（组件和属性组件）

Components and Props（组件和属性组件）

组件允许你将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 component（渲染组件）

以前，我们只遇到了表示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')
);

让我们回顾一下在这个例子中发生了什么：

1. 调用ReactDOM.render()，并传入<Welcome name="Sara" />元素。

2. React调用Welcome组件，并传入对象{name: 'Sara'}作为props。

3. Welcome组件返回<h1>Hello, Sara</h1>元素作为结果。

4. React DOM 高效地更新 DOM 以匹配<h1>Hello, Sara</h1>。

警告:
始终以大写字母作为组件名的开头。例如， <div />代表一个 DOM 标签，但是 <Welcome />代表一个组件，并且需要 Welcome处于作用域中。

Composing Components（构建组件）

组件可以在其输出中引用其他组件。这允许我们对任何级别的细节使用相同的组件抽象。一个按钮，一个表单，一个对话框，一个屏幕：在React应用程序中，所有这些通常都表示为组件。

例如，我们可以创建一个可以多次呈现“欢迎”的App组件：

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 (对象), text (字符串),和 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 Reaad-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组件随时间变化而改变它们的输出，以此来响应用户操作、网络响应或其他任何内容，而不违反上述规则。

原文：https://facebook.github.io/react/docs/components-and-props.html