深入理解React中的setState

组件的状态是一种保存、处理和使用给定组件内部信息的方法，并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object)，并且改变它是使组件重新进行渲染的几种方法之一。

这是React背后最基本的思路之一,但是它(状态)有一些使用起来很棘手的属性，可能会导致应用程序出现意外行为。

更新状态

组件中的构造函数是唯一一个你可以直接写this.state的地方，而在其他地方你应该使用this.setState，setState将接受最终合并到组件当前状态的一个对象或方法作为参数。

虽然技术上可以通过直接写入this.state来改变状态，但它不会导致组件使用新数据重新渲染，并且通常会导致状态的不一致。

setState是异步的

setState导致协调(重新渲染组件树的过程)的事实是基于下一个属性 — setState是异步的。这允许我们在单个范围内多次调用setState，而不是触发不需要重新渲染整个组件树。

这就是为什么在更新后没有在状态中看到新值的原因。

// assuming this.state = { value: 0 }
this.setState({
  value: 1
});
console.log(this.state.value); // 0

React还会尝试将setState分组调用或批量调用到一个回调中，这会导致我们第一次“陷阱”。

// assuming this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});

上面所有的调用过程结束后，this.state.value的值是1,而不是我们所期望的3。为了解决这个问题 …

setState接受一个方法作为它的参数

如果你在setState中传入一个函数作为第一个参数，React将以 at-call-time-current状态来调用它，并期望你返回一个对象来合并到状态中。所以更新我们以上的代码：

// assuming this.state = { value: 0 };
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));

最终的结果将如我们所期望的this.state.value = 3，记住在将状态更新为值时始终使用此语法，该值是根据以前的状态计算的！

为什么setState是异步的？

记住你是如何知道setState是异步的？嗯，事实证明并非总是如此！这取决于执行上下文，例如：

  render() {
    return <button onClick={this.inc}>Click to update</button>
  }
  
  inc() {
    console.log('before: ' + this.state.test);
    this.setState({
      test: this.state.test+1
    });
    console.log('after: ' + this.state.test);
  }
  

点击按钮，然后在控制台的显示结果可能是：

// click!
before: 1
after: 1

// click!
before: 2
after: 2

但是如果我们新增以下代码：

componentDidMount() {
  setInterval(this.inc, 1000);
}

结果是：

before: 1
after: 2
before: 2
after: 3

所以，我们应该学会何时期待什么行为吗？显然不是。可以肯定的是，假设setState确实是异步的，因为在将来的版本中它将是如此。

setState接受一个回调函数

如果你需要执行某个函数，或验证状态确实是否正确更新，你可以传递一个函数作为setState调用的第二个参数，一旦状态更新，该函数将被执行。记住，因为在一个范围内的所有更新是批量的，如果你有多次调用setState，则将使用完全更新后的状态调用每个回调。

在更新发生后确保代码执行的另一种方法是将其放在componentWillUpdate或componentDidUpdate中。然而，当使用shouldComponentUpdate来阻止更新的时候，相反上两个钩子函数是不用去使用的。

常见错误

其中最常见的一个错误是在构造函数中基于属性(props)来使用组件的state设置它的值。考虑以下的代码：

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }

  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

如果其父组件如下面这样对它进行渲染：

<Component value={42} />

将正确渲染“The value is 42”，如果父组件改变了

<Component value={13} />

最后this.state.value的值依然是42，这是因为React并不会销毁和重新创建这个组件，它将重用一次渲染的组件，不会重新运行构造函数。为了解决这个，你不应将props分配给state而是在render方法中使用this.props.value。然而如果你决定使用state，你应该实现一个解决方案，它将在需要时更新状态，例如：

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: this.props.value };
  }
  componentWillReceiveProps(nextProps) {
    if(nextProps.value !== this.props.value) {
      this.setState({value: nextProps.value});
    }
  }
  render() {
    return <div>The value is: {this.state.value}</div>
  }
}

记住任何componentWill *函数都不是触发副作用的地方（例如进行AJAX调用），所以对于上面的情况请使用componentDidUpdate(previousProps, previousState)。

附录

我们可以预期setState会随着React Fiber及其他更改而发生一些变化。正如前面提到的，在大多数情况下setState是异步的，
另一个变化是使用函数语法可以终止“进行中”的setState调用:

this.setState((state) => {
  if(checkSomeConditions()) return undefined;
  else return { value: 42}
});