工作生活

setState()

2019-07-04  本文已影响0人  栗子daisy

setState()参数

  1. 接受一个对象作为参数this.setState({count: this.state.count + 1});
  2. 接受一个函数作为参数this.setState((prevState, props) => ({ count: prevState.count + 1 }));
    区别
// 此处设置调用两次 setState()
  increment() {
    this.setState({
      count: this.state.count + 1
    });

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

每次加1,采用的是对象合并的操作,等同于Object.assign() 。

increment() {
    // 采用传入函数的方式来更新 state
    this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
    this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
  }

与传入对象更新 state 的方式不同,传入函数来更新 state 的时候,React 会把我们更新 state 的函数加入到一个队列里面,然后,按照函数的顺序依次调用。同时,为每个函数传入 state 的前一个状态,这样,就能更合理的来更新我们的 state 了。

在 React 的源代码中,我们可以看到这样一句代码:

this.updater.enqueueSetState(this, partialState, callback, 'setState');

然后,enqueueSetState 函数中又会有这样的实现:

queue.push(partialState);
enqueueUpdate(internalInstance);

参考:
https://www.cnblogs.com/libin-1/p/6725774.html

上一篇 下一篇

猜你喜欢

热点阅读