对react setState 的理解

setState是异步的，对于这个我们随便测试一些就知道的，关于为什么是异步的可以参考博客的一些见解。

我们翻开react源码（version:16.3.2）, 首先是 setState部分，看到这里接受两个参数partialState (局部状态，限定只有对象和函数可以作为第一个参数), callback

 

Component.prototype.setState = function (partialState, callback) {
  !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : void 0;
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

 

然后是更新部分enqueueSetState 函数

enqueueSetState: function (instance, partialState, callback) {
      var fiber = get(instance);
      callback = callback === undefined ? null : callback;
      {
        warnOnInvalidCallback$1(callback, 'setState');
      }
      var expirationTime = computeExpirationForFiber(fiber);
      var update = {
        expirationTime: expirationTime,
        partialState: partialState,
        callback: callback,
        isReplace: false,
        isForced: false,
        capturedValue: null,
        next: null
      };
      insertUpdateIntoFiber(fiber, update);
      scheduleWork(fiber, expirationTime);
}

function insertUpdateIntoFiber(fiber, update) {
  ensureUpdateQueues(fiber);
  var queue1 = q1;
  var queue2 = q2;

  // Warn if an update is scheduled from inside an updater function.
  {
    if ((queue1.isProcessing || queue2 !== null && queue2.isProcessing) && !didWarnUpdateInsideUpdate) {
      warning(false, 'An update (setState, replaceState, or forceUpdate) was scheduled ' + 'from inside an update function. Update functions should be pure, ' + 
'with zero side-effects. Consider using componentDidUpdate or a ' + 'callback.');
      didWarnUpdateInsideUpdate = true;
    }
  }

  // If there's only one queue, add the update to that queue and exit.
  if (queue2 === null) {
    insertUpdateIntoQueue(queue1, update);
    return;
  }

  // If either queue is empty, we need to add to both queues.
  if (queue1.last === null || queue2.last === null) {
    insertUpdateIntoQueue(queue1, update);
    insertUpdateIntoQueue(queue2, update);
    return;
  }

  // If both lists are not empty, the last update is the same for both lists
  // because of structural sharing. So, we should only append to one of
  // the lists.
  insertUpdateIntoQueue(queue1, update);
  // But we still need to update the `last` pointer of queue2.
  queue2.last = update;
}　

待续。。。

组件如下

import React, { Component } from 'react';

import './App.css';

class App extends Component {
state = {
count: 0
}
countChange = () => {
this.setState({
count: this.state.count + 1
})
this.setState({
count: this.state.count + 1
})
console.log('count change')
}
countChange2 = () => {
this.setState(preState => ({
count: preState.count + 1
}))
this.setState(preState => ({
count: preState.count + 1
}))
console.log('count change2')
}
UNSAFE_componentWillMount() {
console.log('~~')
}
render() {
return (
<div className="App">
<p>{this.state.count}</p>
<button onClick={this.countChange}>加一</button>
<button onClick={this.countChange2}>加一</button>
</div>
);
}
}
class App2 extends Component {
render() {
return <div><App></App></div>
}
}

export default App2;

测试中在setState中分别使用 对象参数和函数作为参数，结果说明 函数作为参数的方式是准确的，猜想，主要是对象的值已经确定了，而用使用函数是使用的preState作为参数，这个参数是在回调执行的时候传递下来的，所以是准确（在一个函数調用里面多次this.setState的情况下）。在第一种情况下面setState第二个参数是回调函数～在回调函数中使用this.state.count中获取也是对的。

 

 

 

posted @ 2018-05-07 20:12  wwr-ready  阅读(721)  评论(0)  编辑  收藏  举报