React的setState分析

前端框架司空眼惯,不过万变不离其宗,就是从MVC过渡到MVVM。从数量映射到DOM,angular中用的是watcher对象,vue是观望者格局,react正是state了。

React的setState分析。setState是异步处理函数吗?

React 能够将三个setState() 调用统10%三个调用来升高品质。因为 this.props
和 this.state 恐怕是异步更新的,你不应有借助它们的值来测算下一个动静。

前言

在看React setState
详解中观察1只妙不可言的标题,关于setState函数中state的值的难题,本身动手验证了须臾间,顺便记录下来加深圳影业公司象

React通过管住状态达成对组件的管理,通过this.state()方法立异state。当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI。

图片 1

this.setState({
  counter: this.state.counter + this.props.increment,  // 此代码可能无法更新计数器
});

题目

class StateTest1 extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0
        };
    }

    componentDidMount() {
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count);    // 第一次log:0

        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count);    //第二次log: 0

        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count);  // 第三次log:2

            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count);  //第四次log: 3
        }, 0);
    }

    render() {
        return null;
    }
};

前几遍输出的count为0很好领悟,因为setState还没实施完,前边的console.log就早已举办了
其前面setTimeout中的第3个log,也正是漫天进程中的第一回log输出为二,笔者以为是因为在setTimeout实行前有五遍

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

相关文章