状态和生命周期

学习使用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);

Try it on CodePen.

以上代码忽略了一个关键的需求,就是设置定时器和每秒更新UI内容。理想情况下,我们希望只编写一次代码,然后使用定时器来更新内容。

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

如果想实现这个,我们需要在Clock的组件添加statestate是一个参数,但是他是私有的并且由组件全权控制。

把函数转换成类

举个例子,可以把Clock组件转换成类,只需要以下五步。

  • 1.创建一个同名的ES6类,并且使用extends React.Component.
  • 2.添加一个空的方法到render()里面。
  • 3.把函数的内容放到render()方法里。
  • 4.替换render()方法里的参数名this.参数名
  • 5.删除剩余的空函数声明。
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Clock现在被定义成一个类。这样我们就可以对组件添加额外的特性,如当前状态和生命周期。

添加本地state到类中

date从参数到state只需要3步。

  • 1.在render()中替换this.参数.datethis.state.date
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
  • 2.添加一个类构建方法到来创建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>
    );
  }
}

如何把对象传给父类的构建器,如:

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

类组件会经常调用父类构建的参数。

  • 3.在<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')
);

Try it on CodePen.

之后添加个定时器就可以运作了。

在类中添加一个生命周期方法

我们需要管理一个组件的生命周期,尤其再不使用组建后,需要释放使用的资源和空间。
Clock第一次渲染Dom的时候回在React中使用mounting方法,释放的时候会使用unmounting方法。我们可以在这两个特殊的点里添加特有的方法。
如下

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

  componentDidMount() {
      //第一次启动 如IOS的viewDidLoad
  }

  componentWillUnmount() {
    //释放 如IOS的dealloc
  }
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
    );
  }

然后在组件释放前,释放不使用的定时器,如

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

最后需要实现tick()方法内容,来执行定时器任务。
如下:

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

Try it on CodePen.

剖析上面的代码流程。

  • 1.执行ReactDOM.render()后会运行组件<Clock />,运行后会调用构建函数constructor,就会初始化this.state对象并获取当前时间。
  • 2.接着会运行组件<Clock />render()方法。由于React把组件的render()绑定了ReactDOM.render()。所以谁输出到界面上。
  • 3.当组件<Clock />输出显示就会调用componentDidMount()创建定时器,并每秒执行定时器里面的方法tick()
  • 4.在tick()方法中,会设置this.state这个对象,并且获取当前时间,React会被告知状态修改,并进行执行render()。当render()执行后,会通知ReactDOM.render并刷新。
  • 5.当把组件<Clock />移除会执行componentWillUnmount并释放定时器。
    整个生命周期完毕。

使用当前的state

关于setState(),有三样东西需要注意。

  • 不能直接赋值this.state
//错误的做法
this.state.comment = 'Hello';

需要使用

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

只有在构建方法中才能直接赋值。

  • state的更新尽可能异步进行
    React 为了性能,可能在一个的更新里批量处理多次的setState() 调用。
    因为this.propsthis.state可能异步更新了,你不应该依赖他们的值来计算下一个state。
    如:
// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

以上做法错误的,但是可以使用函数来解决这个问题,如:

// 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: []
    };
  }

当你需要更新时,可以对state里的对象分开回调,如

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.

单项数据流

所有的父组件或者子组件都不知道一个组件是有状态或者无状态的,并且他们也不应该关心自己是被定义成一个函数或者是类组件。

这就是为什么state经常被本地调用或者被封装。对于别的组件来说,组件的拥有的state是不可被访问的。

一个组件可能会把自己的state作为props传递给他们的子组件中:

这同样适用用户定义的组件中:

FormattedDate组件将会接收data作为他的props并且将不知道他是来自哪,是Clock's state,是来自Clock's state, 还是来自手动输入的。

这就是我们平常所说的从上往下或者单向数据流。任何的state都是属于一些特定的组件,并且任何的数据或者UI视图 只能影响在他组件树下面的的组件。

如果你把一个组件的props想象成是瀑布,每一个组件的state就像一个额外的水资源,并且这在任意点处链接还往下流。

为了展示所有的组件都是孤立的,我们创建一个App组件来渲染三个<Clock>组件:

每个Clock都会独立设置以及更新自己的定时器。

在React app里,无论一个stateful or stateless的组件都被认为组件独立的细节都可能随着时间而改变。

你能用stateless组件代替stateful组件,反之亦然。

推荐阅读更多精彩内容