对react setState 的理解

朴灿烈づ我的快乐病毒、 2022-05-23 02:05 219阅读 0赞

我们翻开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);
    }

组件如下

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中获取也是对的。

参考链接

[你真的理解setState吗？][setState]

[setState]: https://blog.csdn.net/firebird_one/article/details/81604400