彻底搞清楚setState

setState最常见的问题是，是异步的还是同步的？

setState在React.Component中的函数，是同步函数。但是我们调用的时候，不同的传参和不同的调用位置都会导致不同的结果。

从页面看有时候是同步的，有时候是异步的。

PS: 如果在componentDidMount触发，和用按钮事件触发是一样的。

1)调用函数中直接调用，调用完之后立即打印，结果不变，表现是异步

this.state = {number: 0}

add = () => {

   this.setState({

       number: this.state.number + 1}, () => console.log(this.state.number) //

   )

  // console.log(this.state.number); -- 0

}  // 页面显示1

后台逻辑是，事件触发-->开启批量更新模式-->执行事件方法add-->状态存入队列[{number: 1}]-->方法结束(this.state.number=0)-->关闭批量更新模式

-->更新状态(number-1)-->更新组件(render)-->componentDidUpdate-->setState.callback(number-1)

2)批量调用setState会触发批量更新

如第一个参数是对象，状态会出现覆盖；第一个参数是函数，不会被覆盖，会累计。

    state = {number: 0, name: 'lyra'}

    add2 = () => {

        this.setState((state) => ({number: state.number + 1}));

        this.setState((state) => ({name: state.name + '-good'}));

        this.setState((state) => ({number: state.number + 1}));

        this.setState((state) => ({name: state.name + '-clever'}));

    }// 执行完结果显示{number:2, name: lyra-good-clever}

    add3 = () => {

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

        this.setState({name: this.state.name + '-good'});

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

        this.setState({name: this.state.name + '-clever'});

    } // 执行完结果显示{number: 1, name: lyra-clever}

后台逻辑同上，会依次存入状态队列。但是更新状态的方式是：

this.queue.pendingStates.forEach(particalState => Object.assign(this.state, particalState));

如果传入对象，存储状态的时候直接存储。

        if (typeof particalState === 'object') {

            this.pendingStates.push(particalState);

        }

如果传入的是方法，会先进行处理，每个状态，都是以前一个状态为基础

        if (typeof particalState === 'function') {// 传入的是(state) => {}

            this.setStateFuncs.push(particalState);

            this.setStateFuncs.forEach(callback => {

                const newParticalState = callback(this.component.state);

                this.pendingStates.push(newParticalState);

                Object.assign(this.component.state, newParticalState);

            });

            this.setStateFuncs.length = 0;// 注意清空！！

        }

3）在异步任务回调函数中表现同步，且不批量更新

class Test extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            number: 0,

            name: 'lyra',

        }

    }

    componentDidMount() {

        this.add();

    }

    add = () => {

        this.setState({number: this.state.number + 1}, () => console.log('callback-3=',this.state));

        this.setState({name: this.state.name + '-good'}, () => console.log('callback-4=',this.state));

        this.setState({number: this.state.number + 1}, () => console.log('callback-5=',this.state));

        this.setState({name: this.state.name + '-clever'}, () => console.log('callback-6=',this.state));

        console.log('==1==',this.state);

        setTimeout(() => {

            console.log("==7===",this.state);

            this.setState({ // 非批量处理，立即执行,触发render

                number: this.state.number + 1,

                name: this.state.name + '-bravo'

            }, () => console.log('callback-8=',this.state))

            console.log('==9==',this.state);

            this.setState({

                number: this.state.number + 1,

                name: this.state.name + '-congratulations'

            }, () => console.log('callback-10=',this.state))

            console.log('==11==',this.state);

        })

        console.log("==2==",this.state);

    }

    render() {

        console.log('render')

        return (

            <h1>Hello, world!</h1>

        )

    }

}

运行结果如下

    ==1=={number: 0, name: 'lyra'}

    ==2=={number: 0, name: 'lyra'}

    render

    callback-3={number:1, name: 'lyra-clever}

    callback-4={number:1, name: 'lyra-clever}

    callback-5={number:1, name: 'lyra-clever}

    callback-6={number:1, name: 'lyra-clever}

    ==7==={number: 1, name: 'lyra-clever'}

    render

    callback-8={number: 2, name: 'lyra-clever-bravo'}

    ==9=={number: 2, name: 'lyra-clever-bravo'}

    render

    callback-10={number: 3, name: 'lyra-clever-bravo-congratulations'}

    ==11=={number: 3, name: 'lyra-clever-bravo-congratulations'}

后台逻辑：事件触发-->开启批量更新模式-->执行事件方法主线程（不包含setTimeout宏任务）-->前四个状态存入队列{number: 1}-->主线程结束-->

关闭批量更新模式-->批量更新状态(this.state.number = 1)并渲染(DidUpdate)-->进入SetTImout-->setState-->非批量更新状态立即更新状态并渲染(DidUpdate)-->callback->

-->下一个setState-->......

PS:原生JS模拟setState实现

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="root"></div>

    <script src="./component.js"></script>

    <script src='./counter.js'></script>

    <script src="./stateFunc.js"></script>

    <script>

        let container = document.getElementById('root');

        counterIns = new Counter({name: 'Lyra'}); //实例传属性

        counterIns1 = new SetFuncCounter({name: 'Lyra1'}); //实例传属性

        counterIns.mount(root); // ReactDOM.render(,window.root)

        counterIns1.mount(root);

    </script>

</body>

</html>

component.js

/*

 * @Author: LyraLee

 * @Date: 2019-11-18 23:49:56

 * @LastEditTime: 2019-11-18 23:57:49

 * @Description:

 */

// 用于批量更新的全局状态和方法

const batchingStragety = {

    isBatchingUpdates: false, // 默认false,表面默认直接更新

    dirtyComponents: [], // 状态和页面展示不同的组件叫脏组件;应该去重一下

    batchUpdates() {

        this.dirtyComponents.forEach(dirtyComponent => {

            dirtyComponent.updateComponent();

        });

        this.dirtyComponents.length = 0;

    }

}

// 队列用于存储更新的状态，数据先入先出，有先后顺序

class QueueUpdate{

    constructor(component) {

        this.pendingStates = []; // 队列存值

        this.setStateFuncs = []; // 传参是函数，存入该队列

        this.component = component;

    }

     // 插入队列

    addState(particalState) {

        // particalState有两种形式，function或者object;

        if (typeof particalState === 'object') {

            this.pendingStates.push(particalState);

        }

        if (typeof particalState === 'function') {// 传入的是(state) => {}

            this.setStateFuncs.push(particalState);

            this.setStateFuncs.forEach(callback => {

                const newParticalState = callback(this.component.state);

                this.pendingStates.push(newParticalState);

                Object.assign(this.component.state, newParticalState);

            });

            this.setStateFuncs.length = 0;// 注意清空！！

        }

        /*

            然后判断isBatchingUpdating 是否是true,

            如果是true,推入dirtyComponents,

        */

       // 如果是false, 遍历所有的dirtyComponents,调用各自的updateComponent()

       if (!batchingStragety.isBatchingUpdates) {

            this.component.updateComponent();

            return;

        }

        batchingStragety.dirtyComponents.push(this.component);

    }

}

class Component {

    constructor(props) {

        this.props = props;

        this.queue = new QueueUpdate(this); // 实例化一个队列，用于存储newState的值。

    }

    setState(particalState, callback) { // 传入需要更新的状态

        /** this.setState(new State)->将newState存入队列     */

        this.queue.addState(particalState);

        // callbackcomponentDidMount前存入队列，

        // 在componentDidMount后依次执行

    }

    updateComponent() { // 更新组件,在该方法中完成componentDidMount

        this.queue.pendingStates.forEach(particalState => {

            Object.assign(this.state, particalState)

        });

        this.queue.pendingStates.length = 0;

        let oldElement = this.topElement;

        let newElement = this.renderElement();

        oldElement.parentNode.replaceChild(newElement, oldElement);

    }

    renderElement() { // 模拟ReactDOM.render(element, container)

        let tempParent = document.createElement('div');

        tempParent.innerHTML = this.render(); // 将模版字符串转为真实dom

        this.topElement = tempParent.children[0]; // 使用属性，可以在this作用域暂存dom元素

        this.topElement.component = this;

        return this.topElement;

    }

    mount(container) {

        container.appendChild(this.renderElement())

    }

} 

// React中事件委托给全局document

window.trigger = function(event, method) {

    const { component } = event.target;

    // React中每次触发事件时开启批量更新模式，都默认将isBatchingUpdates置为true,事件调用完成置为false。

    // 事件触发的核心逻辑代码是方法调用，isBatchingUpdates的状态变化可以看作一个事务，包裹方法

    // 所有组件用这个方法，各个组件方法名可能相同，所以需要在实例上调用方法

    const anyMethod = component[method].bind(component);

    transaction.perform(anyMethod);

}

// 事务，将任何方法(anyMethod)用wrapper包裹，然后通过Transcation的perform()方法执行anyMethod

class Transcation{

    // 先执行所有wrapper的initialize方法，再执行anyMethod,最后执行所有wrapper的close方法。

    constructor(wrappers) {

        this.wrappers = wrappers;

    }

    perform(anyMethod) {

        this.wrappers.forEach(wrapper => {wrapper.initialize()});

        anyMethod();

        this.wrappers.forEach(wrapper => {wrapper.close()});

    }

}

const transaction = new Transcation([{ // 传入wrappers,是个数组！！

    initialize() {// 开启批量更新

       batchingStragety.isBatchingUpdates = true;

    },

    close() {

        batchingStragety.isBatchingUpdates = false;

        // 执行完后要把状态置为false, 调用更新函数

        batchingStragety.batchUpdates();

    }

}]);

counter.js

class Counter extends Component{

    constructor(props) {

        super(props);

        this.state = {

            number: 0,

            name: 'lyra'

        }

    }

    add() {

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

        this.setState({name: this.state.name + '-good'});

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

        this.setState({name: this.state.name + '-clever'});

        console.log('1==',this.state); // {number: 0, name: 'lyra'}

        setTimeout(() => {

            console.log("==3===",this.state); // {number: 1, name: 'lyra-clever'}

            this.setState({ // 非批量处理，立即执行

                number: this.state.number + 1,

                name: this.state.name + '-bravo'

            }) // 同步

            console.log('==4==',this.state); // {number: 2, name: 'lyra-clever-bravo'}

            this.setState({

                number: this.state.number + 1,

                name: this.state.name + '-congratulations'

            })

            console.log('==5==',this.state); // {number: 3, name: 'lyra-clever-bravo-congratulations'}

        })

        console.log("==2==",this.state); // {number: 0, name: 'lyra'}

    }

    render() {// 模拟JSX中虚拟DOM js中不能写html,只能写字符串模版,模版字符串只有一个顶级标签

        return `<button id="counter" onclick="trigger(event, 'add')">

            ${this.state.name}

            --------------<br/>

            ${this.state.number}

        </button>`

    }

}

巴特西

彻底搞清楚setState

1)调用函数中直接调用，调用完之后立即打印，结果不变，表现是异步

2)批量调用setState会触发批量更新

3）在异步任务回调函数中表现同步，且不批量更新

PS:原生JS模拟setState实现

最新文章

热门文章