深入理解React中的setState

jiezi

5 年前

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

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

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

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

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 中传入一个函数作为第一个参数，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 是异步的？嗯，事实证明并非总是如此！这取决于执行上下文，例如：

  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，则将使用完全更新后的状态调用每个回调。

在更新发生后确保代码执行的另一种方法是将其放在 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}
});

深入理解React中的setState

更新状态

setState 是异步的

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

为什么 setState 是异步的？

setState 接受一个回调函数

常见错误

附录