Zusammenfassung von setState in React

Ob die setState-Methode in React asynchron oder synchron ist? Tatsächlich ist dies unterteilt in welche Bedingungen sie asynchron oder synchron ist.

1. Sehen wir uns zunächst mehrere Möglichkeiten zum Ändern des Status in Reaktionskomponenten an:

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 () Ob der Aktualisierungsstatus asynchron oder synchron ist:

Es muss bestimmt werden, wo setState ausgeführt wird

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

Asynchron: Nicht reagierende kontrollierte asynchrone Callback-Funktion 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 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. Problem mit mehreren Aufrufen von setState():

Asynchronous setState()

(1) Mehrere Aufrufe, Verarbeitungsmethode:

setState({}): Führen Sie den Status einmal zusammen und aktualisieren Sie ihn. Rufen Sie render() nur einmal auf, um die Schnittstelle zu aktualisieren. Mehrere Aufrufe werden zusammengeführt ist eins, und nachfolgende Werte überschreiben vorherige Werte.

setState(fn): Rufen Sie render() nur einmal auf, um die Schnittstelle zu aktualisieren. Durch mehrmaliges Aufrufen von werden keine Werte zusammengeführt überschreibt die vorherigen Werte.

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) So erhalten Sie die Statusdaten asynchron von setState aktualisiert:

In der Callback-Funktion von setState()

4. Häufige setState-Interviewfragen in React (setState-Ausführungssequenz)

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;

Zusammenfassung: 2 Möglichkeiten, den Aktualisierungsstatus von setState() in React zu schreiben

1) setState(updater, [callback])

updater: eine Funktion, die ein stateChange-Objekt zurückgibt: (state, props)=>stateChange, der empfangene state und props sind garantiert Das neueste

2) setState(stateChange, [callback])

stateChange ist ein Objekt, Callback ist eine optionale Rückruffunktion, wenn der -Status und die Schnittstelle aktualisiert werden wird aktualisiertErst ausgeführt nach

Hinweis:

Objekt ist eine Abkürzung für Funktionsmodus

Wenn das neue Der Zustand hängt nicht davon ab. Wenn der ursprüngliche Zustand der ursprüngliche Zustand ist, verwenden Sie die Objektmethode.

Wenn der neue Zustand vom ursprünglichen Zustand abhängt, verwenden Sie bei Bedarf die Funktionsmethode Holen Sie sich die neuesten Statusdaten nach setState() im zweiten Schritt. Holen Sie sich

in der Rückruffunktion. Dieser Artikel stammt aus der Spalte

js-Tutorial

, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonZusammenfassung von setState in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!