深刻理解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}
});