zoukankan      html  css  js  c++  java
  • 为什么 setState 是异步的?原理是?

    1、setState为什么是异步的、什么时候是异步的?

    setState本身的执行过程是同步的,只是因为在react的合成事件与钩子函数中执行顺序在更新之前,所以不能直接拿到更新后的值,形成了所谓的异步;

    2、能不能同步,什么时候是同步的?

    可以同步,在ajax、原生事件与setTimeout中是同步的

    3、验证

    代码中也包含了关于react批量更新优化的验证:

    在合成事件与钩子函数中会对多次setState进行更新优化,只执行最后一次;

    在原生事件与setTimeout内不会进行批量更新优化;

    //测试setState同步与异步
    
    //关于react的批量更新优化
    //在react的合成事件函数与钩子函数中会进行批量更新优化
    //多次调用setState只会调用最后一次
    class App extends React.Component{
        constructor(props){
            super(props);
            this.state={
                num:1
            }
        }
        componentDidMount(){
            this.clickFunc();
        }
        //num增加
        //合成事件、钩子函数内进行了批量更新优化
        addNum(e){
            console.log('react合成事件函数');
            this.setState({num:this.state.num+1});
            this.setState({num:this.state.num+1});
            this.setState({num:this.state.num+1});
            this.setState({num:this.state.num+1});
            console.log(this.state.num);
        }
        //原生点击事件的处理函数
        //原生事件与setTimeout中不会进行批量更新
        clickFunc(){
            document.querySelector('#btn').addEventListener('click',()=>{
                console.log('原生事件处理函数开始');
                this.setState({num:this.state.num+1});
                console.log(this.state.num);
                this.setState({num:this.state.num+1});
                console.log(this.state.num);
                this.setState({num:this.state.num+1});
                console.log(this.state.num);
                this.setState({num:this.state.num+1});
                console.log(this.state.num);
                console.log('原生事件处理完成');
            })
        }
        render(){
            return(
                <div>
                    <h1>{this.state.num}</h1>
                    {/* react的合成事件 */}
                    <button onClick={(e)=>{this.addNum(e)}}>React合成事件的按钮</button>
                    {/* 原生DOM事件 */}
                    <button id='btn'>绑定原生DOM事件的按钮</button>
                </div>
            )
        }
    }
    ReactDom.render(<App/>,document.querySelector('#app'));

    4、验证结果

    点击React合成事件的按钮

    点击绑定原生DOM事件的按钮

  • 相关阅读:
    BZOJ3813 奇数国
    BZOJ2735 世博会
    BZOJ2081 [Poi2010]Beads
    BZOJ3276 磁力
    BZOJ2054 疯狂的馒头
    BZOJ2610 [Poi2003]Monkeys
    BZOJ2428 [HAOI2006]均分数据
    BZOJ2120 数颜色
    BZOJ2527 [Poi2011]Meteors
    补比赛——牛客OI周赛9-普及组
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12122136.html
Copyright © 2011-2022 走看看