Résumé de setState dans React

La méthode setState dans React est-elle asynchrone ou synchrone ? En fait, cela est divisé en quelles conditions elle est asynchrone ou synchrone ?

1. Examinons d'abord plusieurs façons de changer l'état des composants de réaction :

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>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 () Que l'état de la mise à jour soit asynchrone ou synchrone :

Besoin de déterminer où setState est exécuté

Synchronisation : Fonction de rappel contrôlée par React Moyen : rappel d'écoute d'événement hook/react du cycle de vie

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

Asynchrone : Fonction de rappel asynchrone contrôlée sans réaction Moyen : rappel de minuterie/rappel d'écoute d'événement natif /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 ref=&#39;count&#39;>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. Problème avec plusieurs appels à setState() :

SetState() asynchrone

(1) Appels multiples, méthode de traitement :

setState({}) : fusionner et mettre à jour l'état une fois, appeler render() une seule fois pour mettre à jour l'interface, plusieurs appels fusionneront en est un, et les valeurs suivantes écraseront les valeurs précédentes.

setState(fn) : mettez à jour l'état plusieurs fois. N'appelez render() qu'une seule fois pour mettre à jour l'interface. Les appels plusieurs fois ne seront pas fusionnés en un seul, et les valeurs suivantes seront. écraser les valeurs précédentes.

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>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) Comment mettre à jour les données d'état de manière asynchrone par setState :

Dans la fonction de rappel de setState()

4. Questions courantes d'entretien setState dans React (séquence d'exécution 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 (            <p>
                <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>
            </p>        )
    }
}
export default Index;

Résumé : 2 façons d'écrire le statut de mise à jour setState() dans React

1) setState(updater, [callback])

updater : une fonction qui renvoie un objet stateChange : (state, props)=>stateChange, l'état et les accessoires reçus sont garantis Pour le dernier

2) setState(stateChange, [callback])

stateChange est un objet, le rappel est une fonction de rappel facultative, lorsque le statut est mis à jour et que l'interface est mis à jourExécuté uniquement après

Remarque :

L'objet est un raccourci pour le mode fonction

Si le nouveau l'état ne dépend pas de Si l'état d'origine est l'état d'origine, utilisez la méthode objet ;

Si le nouvel état dépend de l'état d'origine, utilisez la méthode fonction ; obtenez les dernières données d'état après setState(), dans la deuxième colonne Get

dans la fonction de rappel. Cet article provient de la colonne

tutoriel js

, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!