React中setState学习总结

react中setstate方法到底是异步还是同步，其实这个是分在什么条件下是异步或者同步。

1.先来回顾一下react组件中改变state的几种方式：

import react, { component } from 'react'

class index extends component {
    state={
        count:1
    }
    test1 = () => {
        // 通过回调函数的形式
        this.setstate((state,props)=>({
            count:state.count+1
        }));
        console.log('test1 setstate()之后',this.state.count);
    }
    test2 = () => {
        // 通过对象的方式(注意：此方法多次设置会合并且只调用一次！)
        this.setstate({
            count:this.state.count+1
        });
        console.log('test2 setstate()之后',this.state.count);
    }
    test3 = () => {
        // 不能直接修改state的值，此方法强烈不建议！！！因为不会触发重新render
        this.state.count += 1;
    }
    test4 = () => {
        // 在第二个callback拿到更新后的state
        this.setstate({
            count:this.state.count+1
        },()=>{// 在状态更新且页面更新(render)后执行
            console.log('test4 setstate()之后',this.state.count);
        });
    }
    render() {
        console.log('render');
        return (
            <div>
                <h1>currentstate:{this.state.count}</h1>
                <button onclick={this.test1}>测试1</button>
                <button onclick={this.test2}>测试2</button>
                <button onclick={this.test3} style={{color:'red'}}>测试3</button>
                <button onclick={this.test4}>测试4</button>
            </div>
        )
    }
}
export default index;

2.setstate()更新状态是异步还是同步：

需要判断执行setstate的位置

同步：在react控制的回调函数中：生命周期钩子/react事件监听回调

import react, { component } from 'react'

class index extends component {
    state={
        count:1
    }
    /* 
    react事件监听回调中，setstate()是异步状态
    */
    update1 = () => {
        console.log('update1 setstate()之前',this.state.count);
        this.setstate((state,props)=>({
            count:state.count+1
        }));
        console.log('update1 setstate()之后',this.state.count);
    }
    /* 
    react生命周期钩子中，setstate()是异步更新状态
    */
    componentdidmount() {
        console.log('componentdidmount setstate()之前',this.state.count);
        this.setstate((state,props)=>({
            count:state.count+1
        }));
        console.log('componentdidmount setstate()之后',this.state.count);
    }
    
    render() {
        console.log('render');
        return (
            <div>
                <h1>currentstate:{this.state.count}</h1>
                <button onclick={this.update1}>测试1</button>
                <button onclick={this.update2}>测试2</button>
            </div>
        )
    }
}
export default index;

异步：非react控制的异步回调函数中：定时器回调/原生事件监听回调/promise

import react, { component } from 'react'

class index extends component {
    state={
        count:1
    }
    /* 
    定时器回调
    */
    update1 = () => {
        settimeout(()=>{
            console.log('settimeout setstate()之前',this.state.count);//1
            this.setstate((state,props)=>({
                count:state.count+1
            }));
            console.log('settimeout setstate()之后',this.state.count);//2
        });
    }
    /* 
    原生事件回调
    */
    update2 = () => {
        const h1 = this.refs.count;
        h1.onclick = () => {
            console.log('onclick setstate()之前',this.state.count);//1
            this.setstate((state,props)=>({
                count:state.count+1
            }));
            console.log('onclick setstate()之后',this.state.count);//2
        }
    }
    /* 
    promise回调
    */
    update3 = () => {
        promise.resolve().then(value=>{
            console.log('promise setstate()之前',this.state.count);//1
            this.setstate((state,props)=>({
                count:state.count+1
            }));
            console.log('promise setstate()之后',this.state.count);//2
        });
    }
    
    render() {
        console.log('render');
        return (
            <div>
                <h1 ref='count'>currentstate:{this.state.count}</h1>
                <button onclick={this.update1}>测试1</button>
                <button onclick={this.update2}>测试2</button>
                <button onclick={this.update3}>测试3</button>
            </div>
        )
    }
}
export default index;

3.setstate()多次调用的问题：

异步的setstate()

（1）多次调用，处理方法：

setstate({})：合并更新一次状态，只调用一次render()更新界面，多次调用会合并为一个，后面的值会覆盖前面的值。

setstate(fn)：更新多次状态，只调用一次render()更新界面，多次调用不会合并为一个，后面的值会覆盖前面的值。

import react, { component } from 'react'

class index extends component {
    state={
        count:1
    }
    update1 = () => {
        console.log('update1 setstate()之前',this.state.count);
        this.setstate((state,props)=>({
            count:state.count+1
        }));
        console.log('update1 setstate()之后',this.state.count);
        console.log('update1 setstate()之前2',this.state.count);
        this.setstate((state,props)=>({
            count:state.count+1
        }));
        console.log('update1 setstate()之后2',this.state.count);
    }
    update2 = () => {
        console.log('update2 setstate()之前',this.state.count);
        this.setstate({
            count:this.state.count+1
        });
        console.log('update2 setstate()之后',this.state.count);
        console.log('update2 setstate()之前2',this.state.count);
        this.setstate({
            count:this.state.count+1
        });
        console.log('update2 setstate()之后2',this.state.count);
    }
    update3 = () => {
        console.log('update3 setstate()之前',this.state.count);
        this.setstate({
            count:this.state.count+1
        });
        console.log('update3 setstate()之后',this.state.count);
        console.log('update3 setstate()之前2',this.state.count);
        this.setstate((state,props)=>({
            count:state.count+1
        }));// 这里需要注意setstate传参为函数模式时，state会确保拿到的是最新的值
        console.log('update3 setstate()之后2',this.state.count);
    }
    update4 = () => {
        console.log('update4 setstate()之前',this.state.count);
        this.setstate((state,props)=>({
            count:state.count+1
        }));
        console.log('update4 setstate()之后',this.state.count);
        console.log('update4 setstate()之前2',this.state.count);
        this.setstate({
            count:this.state.count+1
        });// 这里需要注意的是如果setstate传参为对象且在最后，那么会与之前的setstate合并
        console.log('update4 setstate()之后2',this.state.count);
    }
    render() {
        console.log('render');
        return (
            <div>
                <h1>currentstate:{this.state.count}</h1>
                <button onclick={this.update1}>测试1</button>
                <button onclick={this.update2}>测试2</button>
                <button onclick={this.update3}>测试3</button>
                <button onclick={this.update4}>测试4</button>
            </div>
        )
    }
}
export default index;

（2）如何得到setstate异步更新后的状态数据：

在setstate()的callback回调函数中

4.react中常见的setstate面试题（setstate执行顺序）

import react, { component } from 'react'
// setstate执行顺序
class index extends component {
    state={
        count:0
    }
    componentdidmount() {
        this.setstate({count:this.state.count+1});
        this.setstate({count:this.state.count+1});
        console.log(this.state.count);// 2 => 0
        this.setstate(state=>({count:state.count+1}));
        this.setstate(state=>({count:state.count+1}));
        console.log(this.state.count);// 3 => 0
        settimeout(() => {
            this.setstate({count:this.state.count+1});
            console.log('settimeout',this.state.count);// 10 => 6
            this.setstate({count:this.state.count+1});
            console.log('settimeout',this.state.count);// 12 => 7
        });
        promise.resolve().then(value=>{
            this.setstate({count:this.state.count+1});
            console.log('promise',this.state.count);// 6 => 4
            this.setstate({count:this.state.count+1});
            console.log('promise',this.state.count);// 8 => 5
        });
    }
    render() {
        console.log('render',this.state.count);// 1 => 0  // 4 => 3 // 5 => 4 // 7 => 5 // 9 => 6 // 11 => 7
        return (
            <div>
                <h1>currentstate:{this.state.count}</h1>
                <button onclick={this.update1}>测试1</button>
                <button onclick={this.update2}>测试2</button>
                <button onclick={this.update3}>测试3</button>
                <button onclick={this.update4}>测试4</button>
            </div>
        )
    }
}
export default index;

总结：react中setstate()更新状态的2种写法

1）setstate(updater，[callback])

updater：为返回statechange对象的函数：(state,props)=>statechange，接收的state和props都保证为最新的

2）setstate(statechange，[callback])

statechange为对象，callback是可选的回调函数，在状态更新且界面更新后才执行

注意：

对象是函数方式的简写方式

如果新状态不依赖于原状态，则使用对象方式；

如果新状态依赖于原状态，则使用函数方式；

如果需要在setstate()后获取最新的状态数据，在第二个callback函数中获取