思考一下之前章节中的时钟案例

到目前为止，我们只学习了一种更新UI的方式。

我们调用了ReactDOM.render() 方法来改变渲染输出：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

在这一章节中，我们将学习如何把Clock 这个组件真正地进行封装和复用。它将会启动属于自己的定时器并且每秒钟它将会对自己进行更新。

我们首先开始封装Clock 在页面中呈现的样子：

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

但是，它缺少很关键的一点：事实上 Clock启动一个定时器并且在每秒钟更新UI应该是Clock组件的内部实现。

最理想的情况是我们只这样写一次，然后让Clock组件对自己进行更新：

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

为了可以像这样实现，我们需要给Clock组件添加状态（state）。

state和props相似，但是它是私有的，并且完全被组件控制。

我们在之前提到过，如果一个组件以类的方式定义的话，会有一些额外的特性：局部state变量就是这样一个特性：这个特性仅为类式定义组件提供。

把函数转变为类

你可以把一个函数式组件通过以下五个步骤来转化为类式组件：
1.以相同的名字创建一个ES6类，这个类继承React.Component
2.在里面添加一个被称为render()的方法
3.把函数体中的内容移到render()方法中
4.把render()中的props用this.props替换
5.删掉原来的函数

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Clock组件现在就是一个类式定义的组件了，而不再是函数式定义的组件。

这将使得我们可以使用例如局部(state)和生命周期(Lifecycle)钩子

在类里添加state局部变量

我们将会用三步把date从props中移动到state中：
1.在render()方法中用this.state.date来替换this.props.date：

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

2.添加一个类构造器(class constructor)来标识初始化的this.state：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

注意我们是如何将props传入到这个构造器的(constructor)：

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

类式定义的组件应该总是调用构造器函数，并且传入props

3.从<Clock /> 元素中移除date属性：

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

我们将会在稍后给Clock组件自身添加定时器部分的代码

现在它看起来应该是这样的:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

接下来，我们将使得这个Clock启动自己的定时器，并且每秒钟更新自己一次。

为类添加生命周期函数

在一个拥有许多组件的应用中，当一个组件被销毁时，释放掉它所占用的资源是十分重要的。

我们想要为Clock启动一个定时器，无论何时它被第一次渲染进DOM中。在React中，这个过程被称为挂载(mounting).

我们同时也想清除一个定时器，无论何时Clock元素从DOM中移除。在React中，这个过程被称为卸载(unmounting).

我们可以在组件类中声明一些特殊的方法，在组件挂载（mounting）和卸载（unmounting）的时候执行一些代码

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

这些方法被称为生命周期钩子（lifecycle hooks）

这个componentDidMount()生命周期钩子在组件输出已经被渲染进DOM后执行，在这里是开启一个定时器的好地方:

 componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

注意，我们在this上保存了timer ID

this.props是React自己设置的，而this.state有着一个特殊的含义，如果你想存储一些西并且这些东西不会为了视觉上的展示而使用，你可以随意的在类中手动的添加域（fileds）

如果这些东西你不需要在render()方法中使用，那么请不要把它放在state中

我们将会在componentWillUnmount()生命周期钩子中清除定时器：

 componentWillUnmount() {
    clearInterval(this.timerID);
  }

最后，我们将实现一个被称为tick()的函数，来让Clock组件每秒钟运行一次

它将会使用this.setState() 方法来按照计划更新Clock组件中的局部变量state：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

现在时钟每秒钟滴答走一次啦！！！

让我们一起快速的总结一下发生了什么，这些方法是按照什么样的顺序来调用的：
1.当<Clock />元素被传入到 ReactDOM.render()方法中，React将会调用Clock组件中的构造器函数(constructor)。因为时钟需要展示当前的时间，它使用一个包含当前时间的对象来初始化this.state。我们将会在稍后更新这个state。
2.React然后调用了Clock组件的render() 方法，通过这样使得React知道了在页面上应该显示什么。然后React更新DOM来使之与Clock组件的渲染输出相匹配。
3.当Clock 的渲染输出被插入的DOM中后，React调用componentDidMount()生命周期钩子。在这里面，Clock组件要求浏览器开启一个定时器，来每秒钟调用一次组件中的tick()方法。
4.每秒钟浏览器调用一次tick()方法。在它里面，Clock组件按照计划更新UI，通过调用setState() 方法，向其中传入一个包含当前时间的对象。多亏了setState() 方法的调用，React知道了state已经发生了改变，然后再一次调用render()方法去了解应该在页面上展示什么。这时，在render()方法中的this.state.date发生了改变，因此渲染输出将会包含更新的时间。React据此更新DOM。
5.如果Clock组件从DOM中移除，React会调用componentWillUnmount()这个生命周期钩子来清除定时器。

正确地使用state

关于setState()方法你有三点需要知道：

不要直接对state进行修改

例如，这样子并不会让组件重新渲染：

// Wrong
this.state.comment = 'Hello';

取而代之的，应该使用setState()方法：

// Correct
this.setState({comment: 'Hello'});

唯一的你可以指定this.state的地方就是在构造器函数中(constructor)中

state更新可能是异步的
React可能处于性能的考虑来对多个setState()方法调用，通过批操作只进行一整次更新（React may batch multiple setState() calls into a single update for performance.）

由于this.props和this.state的更新可能是异步的，你不应该依赖它们的值为了下一次state计算（you should not rely on their values for calculating the next state.）

例如，这段代码可能无法更新这个counter：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

为了修复它，我们将使用第二种形式的setState()方法，它将接收一个函数而不是一个对象。这个函数将会接收previous state 作为第一个参数，
更新申请的时候的props作为第二个参数（the props at the time the update is applied as the second argument）：

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

在上面我们使用了箭头函数，我们同样可以使用常规的函数：

// Correct
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

state更新被融合

当你调用setState()方法，React把你提供的对象融合进当前的state对象。

例如，你的state可能包含几个单独的变量：

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

你可以单独的更新它们，通过分别调用setState()方法：

componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

这个合并是一种浅层的合并，因此this.setState({comments})使得this.state.posts 完好无损，但是会把this.state.comments完全覆盖。

数据向下流动（The Data Flows Down）

父组件和子组件都不知道一个确切的组件是有状态的（stateful）还是无状态的（stateless），它们不应该在意它是用类式定义的还是函数式定义的。

这也是state被称为局部的或者封装的原因，它除了被拥有它的组件访问以外，不可以被任何其它的组件访问。

一个组件可能会选择以props的形式向下传递state给它的子组件：

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

它同样适用于自定义组件：

<FormattedDate date={this.state.date} />

这个FormattedDate 组件将会在它的props中接收到date，但是并不知道它是否来自Clock的state，Clock的props，或者是手动输入的：

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

这通常被称作自顶向下（top-down）或者 单向（unidirectional）的数据流动。任何state都被指定的组件所拥有，并且任何源自这个state的数据或者UI仅仅可以影响在组件树中位于它们下方的组件（Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree.）。

如果你把组件树想象成props的瀑布流，每个组件的state在某一点随意加入的水源，但是它也是向下流动的。

为了展示所有的组件都是独立的，我们可以创建一个App组件，它渲染了三个<Clock/>：

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

每一个Clock启动它自己的定时器，并且独立的进行更新。

在React应用中，无论一个组件是有状态的还是无状态的，都被当作是组件的细节实现。它们可能随时间而改变，你可以在有状态的组件；里面使用无状态的组件，反之亦然。