State和组件的生命周期循环

2017-02-16 本文已影响81人编码的哲哲

考虑之前的例子，我们只学会了一种方法去更新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这个自定义组件变的真正可复用而且封装完备，让它可以在内部设置它自己的时间定时器并且按照这个定时器时时更新它的UI。
我们可以先看一看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的定时器必须在其内部定义实现。
我们想要的是只需要将Clock组件写一次它就可以自动的更新它本身，像下面这样：

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

为了实现我们所想要的效果，我们需要给Clock组件添加一个state属性。
state和props看起来像是一样的，但是state是组件私有的并且完全受到组件自身控制。
在之前的章节我们提到过，类式的声明component会使定义的组件有一些额外的特性，state就是一个，它只在类式声明的组件中起作用。

将函数式声明转化为类式声明

你可以通过以下五个步骤将函数式声明转化为类式声明：

创建一个ES6的class，这个class继承自React.Component。
为这个类添加一个名为render的空函数。
将函数式声明内部的代码移到render函数中。
将render函数中的props替换成this.props。
将函数式声明删除。

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

现在Clock组件是一个类式定义的组件了，这使得你可以使用组件额外的特性，比如：state，钩子函数。

给这个类式声明的组件添加state

我们将props对象中的state转化成state需要经过三个步骤：

在render函数中将this.props.date用this.state.date代替：

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

添加一个类构造器，在构造器中指定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(props) {
    super(props);
    this.state = {date: new Date()};
  }

类式声明的组件必须调用super(props)这行代码。

将Clock组件声明中去掉date：

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

待会我们会添加一个定时器的代码给组件。现在我们所有完成的代码看起来是下面这个样子：

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组件设置一个定时器以便Clock组件在任何被声明的时候可以立即执行这个定时器，这段代码被写在一个称之为装载函数的内部。
我们也想在这个组件被移除时销毁这个定时器，这段代码被写在一个称之为卸载函数的内部。
我们可以在class里声明两个不同的方法以实现组件的装载和卸载：

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

这些方法被称为生命循环钩子函数。
componentDidMount()函数在组件被渲染到dom上时执行，这个我们设置定时器的绝佳地方：

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

注意看看我们是如何将定时器ID保存在this中的。
当this.props被组件自己设置且this.state有一个特殊的含义时，你就可以手动的为这个类添加你需要储存的东西，这些你添加的东西是不会被输出到外部的。
你在render函数中用不到的东西不应该出现在state中。
我们将清除定时器的代码写在componentWillUnmount函数中：

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

最后，我们实现tick方法。tick方法用this.setState函数来实时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')
);

现在tick函数每过一秒便被执行一次。让我们快速整理一下上面的代码：

首先我们将clock组件作为参数传递给ReactDOM.render()函数，这时候react会调用clock组件中的构造器，在构造器中初始化了state。
react这时会调用组件中的render方法，这个方法的返回值即为react渲染到屏幕上的element。
当clock的返回值被插入到dom中时，react会开始执行componentDidMount这个方法。在这个方法内部，我们定义了一个tick的函数实时的更新时间。
每一秒钟clcok都会执行tick这个函数，在tick函数内部，我们每一秒都会用当前时间去替换this.state.date的值。
如果clock组件被移除dom时，react 将会调用componentWillUnmount函数去移除我们在componentDidMount中定义的定时器。

正确使用State

对于setState函数，你必须知道以下三点：
** 不要直接修改State **
比如，下面这行代码不会改变component:

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

你需要用下面这行代码代替：

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

你唯一可以定义state的地方便是constructor。
** state可能是异步更新的 **
react可能会因为性能而一次性的执行多个setState函数。正是由于this.props和this.state会异步更新，所以你不能直接用它们的值来进行计算，比如下面的例子你可能得不到想要的结果：

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

为了让值确定，我们需要用到setState函数的第二种传参方式，传递一个函数进去而不是对象。这个函数将以前的state作为它的第一个参数，props作为第二个参数：

// 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。比如，你的state包含以下2个变量：

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

你可以单独的更新它们：

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

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

数据流

不管是根组件或者子组件，它们都不知道一个组件是有状态的还是无状态的，也不知道这个组件使用类式定义的函数函数式定义的。这就是为什么state被称为本地的或者被封装的。一个组件可以选择是否将其state作为props传递给子组件：

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

这一特性同样也在自定义组件中工作正常：

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

FormattedDate组件将date作为其props，但是它并不知道date是来自于Clock的state，Clock的props或者手动输入的值：

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

这一特性通常被称为数据流。一些state通常被一些特定的component所有，所以这些组件之下的用到这些state的子组件会受到这些特殊组件的影响。为了展示所以的组件都是独立的，我们可以创建一个拥有3个Clock组件的应用：

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

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

每一个clock组件都有它自己的定时器。