React: setState解析

作用

更新 State 中的數據

因爲 React 不允許直接更改 state 中的數據，所以引入了 setState() 方法。當調用 setState 時，會重新執行 render 函數，進而根據最新的 State 來創建 ReactElement 對象，以此實現對 DOM 的更新

這是用於更新用戶界面以響應事件處理器和處理服務器數據的主要方式

用法

setState(updater, callback)

通過 this.setState() 進行調用

setState 異步更新

constructor(props) {
  super(props);

  this.state = {
    message: "Hello World"
  }
}

changeState(){
  this.setState({
    message: 'Hello React'    
  })
  console.log(this.state.message) // Hello World
}

這段代碼最終打印出 Hello React

證明 setState() 是異步操作，並不能立即更新 state 中的數據

優點： 可以顯著提升性能

如果每次調用 setState 都進行一次更新，那麼意味着 render 函數會被頻繁調用，界面重新渲染，非常影響效率，所以選擇獲取到多個更新之後進行批量更新

缺點： 數據無法保持同步

在開發中會產生許多問題

如何獲取更新後的值：

1. 通過 setState() 第二個參數–回調函數獲取，該回調函數會在更新後立即執行

changeState(){
  this.setState({
    message: 'Hello React'    
  }), () => {
    console.log(this.state.message) // Hello React
  }
}

2. 通過生命週期函數獲取

componentDidUpdate(prevProps, provState, snapshot) {
  console.log(this.state.message) // Hello React
}

setState 一定是異步嗎？

進行如下驗證：

1. 在 setTimeout 中更新

changeState() {
  setTimeout(() => {
    this.setState({
      message: 'Hello React'
    });
    console.log(this.state.message); // Hello React
  }, 0);
}

2. 原生事件中更新

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

通過驗證，發現 setState 並不是一定異步的

分爲兩種情況：

• 在組件生命週期或 React 合成事件中，setState 是異步
• 在 setTimeout 或者原生 DOM 事件中，setState 是同步