Summary of setState in React

Is the setState method in react asynchronous or synchronous? In fact, this depends on what conditions it is asynchronous or synchronous.

1. Let’s first review several ways to change state in react components:

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 (            
        <p>
                <h1 id="currentState-this-state-count">currentState:{this.state.count}</h1>
                <button onClick={this.test1}>测试1</button>
                <button onClick={this.test2}>测试2</button>
                <button onClick={this.test3} style={{color:&#39;red&#39;}}>测试3</button>
                <button onClick={this.test4}>测试4</button>
            </p>        )
    }
}
export default Index;

2.setState () Whether the update status is asynchronous or synchronous:

Need to determine the location where setState is executed

Synchronization: Callback function controlled by react Medium: life cycle hook/react event listening callback

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 (            
        <p>
                <h1 id="currentState-this-state-count">currentState:{this.state.count}</h1>
                <button onClick={this.update1}>测试1</button>
                <button onClick={this.update2}>测试2</button>
            </p>        )
    }
}
export default Index;

Asynchronous: Non-react controlled asynchronous callback function Medium: timer callback/native event listening Callback/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 (            
        <p>
                <h1 id="currentState-this-state-count">currentState:{this.state.count}</h1>
                <button onClick={this.update1}>测试1</button>
                <button onClick={this.update2}>测试2</button>
                <button onClick={this.update3}>测试3</button>
            </p>        )
    }
}
export default Index;

3. Problem with multiple calls to setState():

Asynchronous setState()

(1) Multiple calls, processing method:

setState({}): merge and update the state once, only call render() once to update the interface, multiple calls will merge is one, and subsequent values ​​will overwrite previous values.

setState(fn): Update the state multiple times. Only call render() once to update the interface. Calling multiple times will not be merged into one, and subsequent values ​​will overwrite the previous values.

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 (            
        <p>
                <h1 id="currentState-this-state-count">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>
            </p>        )
    }
}
export default Index;

(2) How to get the status data after setState asynchronous update:

In the callback function of setState()

4. Common setState interview questions in react (setState execution sequence)

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 (            <p>
                <h1 id="currentState-this-state-count">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>
            </p>        )
    }
}
export default Index;

Summary: 2 ways to write setState() update status in react

1) setState(updater, [callback])

updater: a function that returns a stateChange object: (state, props)=>stateChange, the received state and props are guaranteed For the latest

2) setState(stateChange, [callback])

stateChange is an object, callback is an optional callback function, when the status is updated and the interface is updatedExecute only after

Note:

The object is the shorthand for the function method

If the new state does not depend on If the new state depends on the original state, use the object method;

If the new state depends on the original state, use the function method;

If you need to obtain the latest state data after setState(), in the second Get

in the callback function. This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Summary of setState in React. For more information, please follow other related articles on the PHP Chinese website!