共计 1126 个字符，预计需要花费 3 分钟才能阅读完成。

我们知道，React 中最重要的概念就是 state 和 props，我们在写每一个组件时，都可以为该组件创建一个 state，用以保存当前组件的数据。那么如何去更新 state 就是一个重要的问题了。

setState

首先我们来看一个 React Component 初始化的例子：

import React, {Component} from 'react';

class newComponent extends Component {constructor(props) {super(props);
    this.state = {
      name: 'flyrk',
      sex: 'male'
    };
  }

  render() {
    return (//....);
  }
}

而当我们要更新 state，不能直接赋值修改 this.state，而是应该使用 this.setState() 方法。

异步更新

但在最近写项目的过程中，我遇到了一个问题，我想实现从服务器异步获取数据，然后在 React 对收到的数据进行更新 state，更新的 state 再进行处理，同步显示在某个 div 中。

当我这样写的时候，发现视图层迟迟没有更新：

class newComponent extends Component {constructor(props) {super(props);
    this.state = {name: ''};
  }

  componentWillMount() {this.props.getName().then(res => {  // 从服务器获取数据
      const name = res.data.name;
      this.setState({name});
      //...
    });
  }
  render() {
    return (
      <div>
        {this.state.name}
      </div>
    );
  }
}

后来上网查阅官方文档，才发现 React 的 setState() 可能是异步的。

也就是说，当我们用 this.setState() 更新 state 时，state 可能不会立即更新，React 会将多个 setState() 合并在一起最后调用来提高性能。

如何立即更新 state

如果我们想立即使用更新后的 state，有两种方法：

方法一

setState() 接受函数参数，我们可以这样写：

this.setState((prevState, props) => ({name: prevState.name + props.name}));

这样我们就可以获取之前的 state。

方法二

还有一种方法，setState() 第二个参数接受一个 callback：

this.setState({name}, callback);

在 callback 里我们可以对修改后的 state 进行操作。

这两种方法，都可以保证操作的 state 是最新值，并且能在 render() 里展现出来。