React 拾遗：类作为组件 (3)

如何使用代码

安装项目前置依赖，以及启动项目的方法，参看：React 拾遗：项目脚手架。

请根据文章内容，把相应部分的代码注释取消，即可运行。

摘要

本文介绍

• setState() 的异步性
• setState 的回调函数
• setState 获取之前的状态

项目代码地址：React 拾遗：类作为组件 (3)

setState 的异步性

请注意：setState() 可能是异步的。

假设我们需要实现：点击标题，文字从 'Hello' 改变成 'changed'。在改变前后，把 state 中的 title 打印出来。改变之前应该是 'Hello'，改变之后应该是 'change'。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  state = {
    title: 'Hello'
  };
  changeTitle = () => {
    console.log(this.state.title);
    this.setState({ title: 'changed' })
    console.log(this.state.title);
  }
  render() {
    return (
      <div>
        <h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
      </div>
    );
  }
}

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

点击标题触发 setState，获得打印结果，全部都是之前的状态，第二个不是改变后的状态。

Hello
Hello
>

setState() 不是马上就去改变状态。

原因是：React 中状态 state 如果被更改，会触发重新渲染，而渲染是代价很高的动作。假设 setState 是一个同步动作，改变状态后触发渲染，可能会导致浏览器没有响应。为了性能考虑，状态改变之前与之后有一个过渡状态，setState 会把所有的改变状态的请求汇总、形成一个队列，React 会根据队列去执行状态改变的任务。所以 setState 类似于一个 http 请求（request），并不是发起请求以后，马上就有请求的结果。setState 负责归并请求、形成队列，React 会根据情况修改状态、触发渲染。

重点是，setState() 改变状态，然后马上去获取改变后的状态，并不能可能还是之前的状态。

setState 的回调函数

如果一定要 setState 之后，获取到状态改变之后的数据，有两种方法：

• 使用 setState 的回调函数
• 使用生命周期 componentDidUpdate 函数

setState 的回调函数是可选项。

setState(stateChange[, callback])

把之前的代码中加入回调函数

  changeTitle = () => {
    console.log(this.state.title);
    this.setState({ title: 'changed' }, () => {
     console.log(this.state.title)
    })
    console.log(this.state.title);
  }

再次点击标题触发 setState，获得打印结果会得到。最后 'changed' 就是 setState 的回调函数得到的结果。

Hello
Hello
changed
>

setState 获取之前的状态

如果 setState 不依赖之前的状态，就是直接修改，比如之前使用的代码：

setState({ title: 'changed' })

但是如果 setState 依赖之前的状态，就可以写成如下类似的代码：

setState({ num: this.state.num +1 })

完整代码是

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  state = {
    num: 0
  };
  changeTitle = () => {
    this.setState({
      num: this.state.num + 1
    });
  };
  render() {
    return (
      <div>
        <h1>Count: {this.state.num}</h1>
        <button onClick={this.changeTitle}>Increment</button>
      </div>
    );
  }
}

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

但是，这个 this.state.<someVariable> 是一个不稳定的存在。因为 setState 形成了一个状态改变请求的队列。本次修改使用的 this.state.<someVariable> 可能并不是理想的前次状态的结果。

如果状态修改依赖之前的状态数据，最佳实践是使用更新函数。

• 在 this.setState() 中传入的参数不再是一个对象，而是一个更新函数（updater function）。
• 更新函数第一个参数就是之前的状态，第二个函数是 props。
• 用之前的状态 prevState 来替代 this.state 是最佳实践

this.setState((prevState, props) => {
  return { num: prevState.counter + 1 };
});

完整的修改函数是：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  state = {
    num: 0
  };
  changeTitle = () => {
    this.setState((prevState, props) => {
      return { num: prevState.num + 1 }
    });
  };
  render() {
    return (
      <div>
        <h1>Count: {this.state.num}</h1>
        <button onClick={this.changeTitle}>Increment</button>
      </div>
    );
  }
}

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

另外提一点，之前使用返回对象的形式。

this.setState({ title: 'changed' })

即使使用不带参数的箭头函数，也可以实现。据称后面这种箭头函数的形式，渲染性能更佳。

this.setState(() => { title: 'changed' })