React中setState几个现象---先知道再理解

11

常规情况

在同一个方法中多次setState是会被合并的,并且对相同属性的设置只保留最后一次的设置;

import React from 'react';

export class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
            
        };
    }
    componentWillMount() {
        let me = this;
        me.setState({
            count: me.state.count + 2
        });
        me.setState({
            count: me.state.count + 1
        });
    }
    componentDidMount() {
        let me = this;
        me.setState({
            count: me.state.count + 2
        });
        me.setState({
            count: me.state.count + 1
        });
    }

    onClick() {
        let me = this;
        me.setState({
            count: me.state.count + 1
        });
        me.setState({
            count: me.state.count + 1
        });
    }

    render() {
        console.log(this.state.count);
        console.log('1111111111111111111111111111111111111111111');
        return (
            <div>
                <h1>{this.state.count}</h1>
                <input type="button" value="点击我" onClick={this.onClick.bind(this)} /><br />
                <br />
            </div>
        )
    }
}

上述执行过程如下:

  1. willmount中的setState会合并成一次执行,count只会保留最后一次的设置,前面的放弃,所以willmount之后是1,并不是3;并且在render之前执行,不会引起新的render
  2. render之后执行didMount,setState做同样的处理,这是count2,并且引起新的render
  3. 点击按钮,setState做同样处理,count3,引起新的render

定时器中的setState

定时器中的setState,每次都会引起新的render,即使是同一个定时器中的多次setState

代码更改成如下:

    componentWillMount() {
        let me = this;
        setTimeout(() => {
            me.setState({
                count: me.state.count + 1
            });
            me.setState({
                count: me.state.count + 1
            });
        }, 0);
    }
    
       componentDidMount() {
        let me = this;
        setTimeout(() => {
            me.setState({
                count: me.state.count + 1
            });
            me.setState({
                count: me.state.count + 1
            });
        }, 0);
    }
    
    onClickTime() {
        let me = this;
        setTimeout(() => {
            me.setState({
                count: me.state.count + 1
            });
            me.setState({
                count: me.state.count + 1
            });
        }, 0);
    }
上述代码,每次setState都会引发新的render,需要深入了解的可以查查setState的原理,简单理解是定时器中的setState没走react的事物机制,执行时批量更新没被设置true,所以每次都直接render了。

原生事件中的setState

在按钮原生事件中定义的setState,和定时器效果一样,每次setState都会引起新的render
react事件是合并的成一次render的。
 componentDidMount() {
        this.button.addEventListener('click', this.onClick.bind(this, '原生事件'), false);
 }
    
 onClick(info) {
        console.log(info);
        this.setState({
            count: ++count
        });
        this.setState({
            count: ++count
        });
    }

    render() {
        console.log(this.state.count);
        return <div>
            <input type="button" ref={input => this.button = input} onClick={this.onClick.bind(this, 'React事件')} value="生成计时器" />
            <div>Count:{this.state.count}</div>
        </div>
    }
点击按钮,先执行原生事件,再执行react事件,但是原生事件会触发两次render,react事件触发一次。

总结

上述是我对setState的理解,抛砖引玉,希望帮助大家有方向的去了解react原理机制。刚开始接触,很多同学想深入了解,但可能不知道从何入手,这也是我遇到过的困扰,所以现在分享出来,希望能帮助大家少走弯路,更快的、更有准针对性的去研究学习React。


以下为补充内容

原因是什么?

原因是:执行上下文发生了变化。

在事件执行的时候,当前上下文执行的是setTimeout函数,但当执行setTimeout函数的回调时,原来的上下文已经结束了,回调的上下文变成了window,所以依据的批量更新属性isBatchingUpdates没有被设置成true的过程,因此始终是false,因此setState就同步执行了。

回调不会触发react的批量更新机制

其实在回调函数中,setState是不会触发批量更新机制的,无论是promise,ajax,setTimeout回调等等,同时设置多次setState,每个setState都会单独执行并render,因为上下文发生了变化。

下面是验证code

  onClickBtn = () => {
    // const promise = new Promise((resolve, reject) => {
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    //   resolve();
    // });

    // promise.then(() => {
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    //   this.setState({ count: this.state.count + 1 });
    //   console.log(this.state.count);
    // });

    fetch("/api/getlist")
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log(JSON.stringify(data));
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count);
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count);
      });
  };

生命周期和事件中多次setState的区别

在写demo时发现,虽然didMount中的多次setState会被合并,符合正常的规律,但是通过调试发现,在didMountisBatchingUpdates始终是false,而事件调用触发的setStateisBatchingUpdates则是true

觉的对自己有帮助的,希望点赞收藏,鼓励鼓励!!!

---------------------转载请标明出处!--------------------

你可能感兴趣的

张希琨 · 5月5日

我觉得你写的是我最看得懂的。(当然是看过那些比较深层解释的文章之后)

回复

0

也是刚用react的时候遇到到的坑,总结了下

code_sir 作者 · 5月5日
载入中...