[[408006]]

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰 。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

一、是什么

一個組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，而數(shù)據(jù)狀態(tài)就是state

當需要修改里面的值的狀態(tài)需要通過調(diào)用setState來改變，從而達到更新組件內(nèi)部數(shù)據(jù)的作用

如下例子：

import React, { Component } from 'react' 
 
export default class App extends Component { 
    constructor(props) { 
        super(props); 
 
        this.state = { 
            message: "Hello World" 
        } 
    } 
 
    render() { 
        return ( 
            <div> 
                <h2>{this.state.message}</h2> 
                <button onClick={e => this.changeText()}>面試官系列</button> 
            </div> 
        ) 
    } 
 
    changeText() { 
        this.setState({ 
            message: "JS每日一題" 
        }) 
    } 
} 

通過點擊按鈕觸發(fā)onclick事件，執(zhí)行this.setState方法更新state狀態(tài)，然后重新執(zhí)行render函數(shù)，從而導致頁面的視圖更新

如果直接修改state的狀態(tài)，如下：

changeText() { 
    this.state.message = "JS每日一題"; 
} 

我們會發(fā)現(xiàn)頁面并不會有任何反應，但是state的狀態(tài)是已經(jīng)發(fā)生了改變

這是因為React并不像vue2中調(diào)用Object.defineProperty數(shù)據(jù)響應式或者Vue3調(diào)用Proxy監(jiān)聽數(shù)據(jù)的變化

必須通過setState方法來告知react組件state已經(jīng)發(fā)生了改變

關于state方法的定義是從React.Component中繼承，定義的源碼如下：

Component.prototype.setState = function(partialState, callback) { 
  invariant( 
    typeof partialState === 'object' || 
      typeof partialState === 'function' || 
      partialState == null, 
    'setState(...): takes an object of state variables to update or a ' + 
      'function which returns an object of state variables.', 
  ); 
  this.updater.enqueueSetState(this, partialState, callback, 'setState'); 
}; 

從上面可以看到setState第一個參數(shù)可以是一個對象，或者是一個函數(shù)，而第二個參數(shù)是一個回調(diào)函數(shù)，用于可以實時的獲取到更新之后的數(shù)據(jù)

二、更新類型

在使用setState更新數(shù)據(jù)的時候，setState的更新類型分成：

• 異步更新
• 同步更新

異步更新

先舉出一個例子：

changeText() { 
  this.setState({ 
    message: "你好啊" 
  }) 
  console.log(this.state.message); // Hello World 
} 

從上面可以看到，最終打印結(jié)果為Hello world，并不能在執(zhí)行完setState之后立馬拿到最新的state的結(jié)果

如果想要立刻獲取更新后的值，在第二個參數(shù)的回調(diào)中更新后會執(zhí)行

changeText() { 
  this.setState({ 
    message: "你好啊" 
  }, () => { 
    console.log(this.state.message); // 你好啊 
  }); 
} 

同步更新

同樣先給出一個在setTimeout中更新的例子：

changeText() { 
  setTimeout(() => { 
    this.setState({ 
      message: "你好啊 
    }); 
    console.log(this.state.message); // 你好啊 
  }, 0); 
} 

上面的例子中，可以看到更新是同步

再來舉一個原生DOM事件的例子：

componentDidMount() { 
  const btnEl = document.getElementById("btn"); 
  btnEl.addEventListener('click', () => { 
    this.setState({ 
      message: "你好啊" 
    }); 
    console.log(this.state.message); // 你好啊 
  }) 
} 

小結(jié)

在組件生命周期或React合成事件中，setState是異步

在setTimeout或者原生dom事件中，setState是同步

三、批量更新

同樣先給出一個例子：

handleClick = () => { 
    this.setState({ 
        count: this.state.count + 1, 
    }) 
    console.log(this.state.count) // 1 
 
    this.setState({ 
        count: this.state.count + 1, 
    }) 
    console.log(this.state.count) // 1 
 
    this.setState({ 
        count: this.state.count + 1, 
    }) 
    console.log(this.state.count) // 1 
} 

點擊按鈕觸發(fā)事件，打印的都是 1，頁面顯示 count 的值為 2

對同一個值進行多次 setState， setState 的批量更新策略會對其進行覆蓋，取最后一次的執(zhí)行結(jié)果

上述的例子，實際等價于如下：

Object.assign( 
  previousState, 
  {index: state.count+ 1}, 
  {index: state.count+ 1}, 
  ... 
) 

由于后面的數(shù)據(jù)會覆蓋前面的更改，所以最終只加了一次

如果是下一個state依賴前一個state的話，推薦給setState一個參數(shù)傳入一個function，如下：

onClick = () => { 
    this.setState((prevState, props) => { 
      return {count: prevState.count + 1}; 
    }); 
    this.setState((prevState, props) => { 
      return {count: prevState.count + 1}; 
    }); 
} 

而在setTimeout或者原生dom事件中，由于是同步的操作，所以并不會進行覆蓋現(xiàn)象

參考文獻

https://juejin.cn/post/6844903667426918408

https://juejin.cn/post/6844903636749778958

https://segmentfault.com/a/1190000039077904