React中setState學習總結

来源:https://www.cnblogs.com/abc-x/archive/2019/12/18/12051364.html
-Advertisement-
Play Games

react中setState方法到底是非同步還是同步，其實這個是分在什麼條件下是非同步或者同步。 1.先來回顧一下react組件中改變state的幾種方式： import React, { Component } from 'react' class Index extends Component { ...


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函數中獲取


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Sqlite—資料庫備份與恢復
    資料庫備份 例如：備份 /www/wwwroot 下麵的 task.db 資料庫 1.進入資料庫 [root@localhost ~]# sqlite3 /www/wwwroot/task.db 2.備份資料庫 sqlite> .output test.sql sqlite> .dump sqlit ...
  • MySQL資料庫Group by分組之後再統計數目Count(*)與不分組直接統計數目的區別
    簡述問題“統計最新時刻處於某一狀態的設備的數量” 1. 首先子查詢結果，可以看到每個設備最新的狀態信息 2.1 在子查詢的基礎上，對設備狀態進行分組，進行統計每個狀態的設備數量 2.1.1 可以看到處於'火警'狀態的數量是2，沒有問題，但是看下一張圖 2.1.2 可以看到處於'故障'狀態的數量是(n ...
  • [20191218]降序索引疑問4.txt
    [20191218]降序索引疑問4.txt--//前幾天優化一個項目,我發現許多表裡面有有隱含欄位,一般開發很少建立函數索引.我自己檢查發現裡面存在大量的降序索引.--//我感覺有點奇怪,為什麼開發要建立大量降序索引有什麼好處呢?--//我在鏈接http://www.itpub.net/thread ...
  • 4.Android-adt安卓打包過程、adb指令學習
    本章學習adt安卓打包過程、adb指令學習、並通過adb將打包的APK發給設備 1.打包 在eclipse中已經幫我們實現打包了. 具體打包流程如下: 最終一個APK包含瞭如下: classes.dex文件 (由class編譯過來的) resources.arsc文件 (編譯過的資源文件) Andr ...
  • 2.Android-sdk目錄介紹、ADT使用介紹、創建helloworld
    1.android中常用名詞介紹 ADT: ADT為Eclipse的插件。為Eclipse和SDK之間起了一個橋梁的作用。 SDK: 軟體開發工具包(Soft Development Kit),它為開發者提供了Android庫文件以及其它開發所用到的工具 JDK: java開發工具包,提供java工 ...
  • 遇見的奇葩問題
    最近在維護項目遇到一些奇葩的問題，自己研究了一下，但並沒有解決，再此做個記錄，路過的大牛還望，出個思路；再此，描述問題，以供大家研討1. MJRefresh 佈局問題ViewController裡面有兩個和self.View 一樣大小的View 一個 是添加了MJRefresh.mj_header ...
  • javascript中引用傳遞的問題如何解決
    我們有時候會向一個方法中傳入一個參數，並且對這個參數做一些處理的操作； 但是因為是引用傳遞，處理過後會對原有的對象造成修改，無法進行反覆使用。 如例子： 兩次列印的結果一模一樣。這樣下一個方法在繼續使用arr這個數的時候就不是["a","b","c"]這個值了，而是["a","b","c",2]; ...
  • 用js寫一個滑鼠坐標實例
    HTML代碼 寫一個div來作為滑鼠區域 div中寫一個span顯示坐標信息 <body> <div id=""> <span></span> </div> </body> 給div和span增加樣式並定位 <style type="text/css"> div{ position: relativ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類