深入React技术栈之setState详解

最新推荐文章于 2023-01-31 09:30:16 发布

微信公众号：大前端实践者

最新推荐文章于 2023-01-31 09:30:16 发布

阅读量140

点赞数

分类专栏： react 文章标签： react setState js setState详解

本文链接：https://blog.csdn.net/xinzechen/article/details/101293569

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

请看以下代码中问题：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
      index: 0,
    };
	this.click = this.click.bind(this);
  }

  componentDidMount() {
    this.setState({ value: this.state.value + 1 });
    console.log('第一次输出', this.state.value);
    this.setState({ value: this.state.value + 1 });
    console.log('第二次输出', this.state.value);
    setTimeout(() => {
      this.setState({ value: this.state.value + 1 });
      console.log('第三次输出', this.state.value);
      this.setState({ value: this.state.value + 1 });
      console.log('第四次输出', this.state.value);
    }, 0);
    this.refs.button.addEventListener('click', this.click)
  }

  click = () => {
    this.setState({ value: this.state.index + 1 });
    this.setState({ value: this.state.index + 1 });
  }

  render() {
    return (
      <div><span>value: {this.state.value}index: {this.props.index}</span>
        <span onClick={this.click}>点击</span>
        <button ref="button" onClick={this.click}>点击</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);
</script>

</body>
</html>

a. 这四次输出，按常理来说分别是: 1，2，3，4。但是，实际输出为: 0, 0, 2, 3

setState的注意点

1. setState不会立刻改变React组件中state的值（即setState是异步更新）

setState通过一个队列机制实现state更新；
当执行setState时，会将需要更新的state合并后放入状态队列，而不会立即更新，队列可以高效的批量更新state；
通过this.state直接修改的值，state不会放入状态队列，当下次调用setState并对状态队列进行合并时，会忽略之前直接被修改的state.

2. setState通过引发一次组件的更新过程来引发重新绘制

此处重绘指的就是引起React的更新生命周期函数4个函数：
shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state仍然会被更新）
componentWillUpdate（被调用时this.state没有更新）
render（被调用时this.state得到更新）
componentDidUpdate

3. 多个相邻的state的修改可能会合并到一起一次执行

 this.setState({name: 'Pororo'})
 this.setState({age: 20})

等同于

this.setState({name: 'Pororo'，age: 20})

上面两块代码的效果是一样的。如果每次调用都引发一次生命周期更新，那性能就会消耗很大了。所以，React会将多个this.setState产生的修改放进一个队列里，等差不多的时候就会引发一次生命周期更新。

问题分析

对于前两次setState：

this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第一次输出
this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第二次输出

由于setState不会立即改变React组件中state的值，所以两次setState中this.state.value都是同一个值0，故而，这两次输出都是0。因而value只被加1。
既然这样，那么是不是可以直接操作this.state呢？比如：this.state.value=this.state.value+1;
这样的确可以修改this.state.value的状态但是却不可以引发重复渲染。
所以，就必须通过React设定的setState函数去改变this.state，从而引发重新渲染。
setTimeout里面的两次setState：

setTimeout(() => {
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第三次输出
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第四次输出
}, 0)；

这两次this.state的值同步更新了;
同步更新：是由React引发的事件处理（比如：onClick引发的事件处理），调用setState会异步更新this.state；
异步更新：除此之外的setState调用会同步执行this.setState。 “除此之外”指的是：绕过React - 通过addEventListener直接添加的事件处理函数和setTimeout/setInterval产生的异步调用。
this.setState更新机制图解：
每次setState产生新的state会依次被存入一个队列，然后会根据isBathingUpdates变量判断是直接更新this.state还是放进dirtyComponent里回头再说。
isBatchingUpdates默认是false，也就表示setState会同步更新this.state。
但是，当React在调用事件处理函数之前就会调用batchedUpdates，这个函数会把 isBatchingUpdates修改为true，造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

同步更新（函数式setState）

如果this.setState的参数不是一个对象而是一个函数时，这个函数会接收到两个参数，第一个是当前的state值，第二个是当前的props，这个函数应该返回一个对象，这个对象代表想要对this.state的更改；
换句话说，之前你想给this.setState传递什么对象参数，在这种函数里就返回什么对象。不过，计算这个对象的方法有些改变，不再依赖于this.state，而是依赖于输入参数state。

function increment(state, props) {
  return {count: state.count + 1};
}

function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState(increment);
}

假如当前this.state.count的值是0，第一次调用this.setState(increment)，传给increment的state参数是0，第二调用时，state参数是1，第三次调用是，参数是2，最终incrementMultiple让this.state.count变成了3。
对于多次调用函数式setState的情况，React会保证调用每次increment时，state都已经合并了之前的状态修改结果。

要注意的是，在increment函数被调用时，this.state并没有被改变，依然，要等到render函数被重新执行时（或者shouldComponentUpdate函数返回false之后）才被改变。

同步异步setState的用法混合

function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState({count: this.state.count + 1});
  this.setState(increment);
}

在几个函数式setState调用中插入一个传统式setState调用，最后得到的结果是让this.state.count增加了2，而不是增加4。
这是因为React会依次合并所有setState产生的效果，虽然前两个函数式setState调用产生的效果是count加2，但是中间出现一个传统式setState调用，一下子强行把积攒的效果清空，用count加1取代。
所以，传统式setState与函数式setState一定不要混用。