詳解React中的setState執(zhí)行機制

更新時間：2023年12月18日 08:48:12 作者：白鯨ld

setState是React組件中用于更新狀態(tài)的方法,是類組件中的方法,用于更新組件的狀態(tài)并重新渲染組件,本文給大家詳細介紹了React中的setState執(zhí)行機制,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下

一. setState是什么

它是React組件中用于更新狀態(tài)的方法。它是類組件中的方法，用于更新組件的狀態(tài)并重新渲染組件。
setState 方法接受一個對象或一個函數(shù)作為參數(shù)。當傳遞一個對象時，它會將該對象合并到當前的狀態(tài)對象中，并觸發(fā)組件的重新渲染。當傳遞一個函數(shù)時，該函數(shù)會接收先前的狀態(tài)作為參數(shù)，并返回一個新的狀態(tài)對象，然后 setState 方法會將返回的狀態(tài)對象合并到當前的狀態(tài)中。

簡單例子

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

這里有個count屬性。當用戶點擊按鈕時，調(diào)用incrementCount方法，該方法使用setState更新count屬性的值，觸發(fā)組件的重新渲染，并在頁面上顯示更新后的計數(shù)值。

二、更新類型

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

異步更新
同步更新

異步更新

當調(diào)用setState方法時，React會將更新請求放入隊列中，并在合適的時候進行批處理，然后批量更新組件的狀態(tài)。這意味著在調(diào)用setState后，不會立即改變組件的狀態(tài)值，而是在稍后的時間點進行更新。

異步更新的好處是可以提高性能，避免不必要的重復渲染。當多次調(diào)用setState時，React會將這些更新合并為一個更新，只觸發(fā)一次重新渲染。

changeAge() {
  this.setState({
    age: 22
  })
  console.log(this.state.age); // 不會是22，是之前的一個值
}

這并不能看到最新的state的結果

changeText() {
  this.setState({
    age: 22
  }, () => {
    console.log(this.state.age); // 22
  });
}

同步更新

在某些情況下，需要立即獲取最新的狀態(tài)值，而不是等待異步更新。為了實現(xiàn)同步更新，可以使用回調(diào)函數(shù)形式的setState。

回調(diào)函數(shù)形式的setState接收一個函數(shù)作為參數(shù)，該函數(shù)可以接受先前的狀態(tài)和屬性作為參數(shù)，并返回一個新的狀態(tài)對象。React會立即執(zhí)行該函數(shù)，并使用返回的狀態(tài)對象進行更新。

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

小結

在組件生命周期或React合成事件中，setState是異步的
在setTimeout或者原生dom事件中，setState是同步的

State的賦值

三種情況

1.通常情況下的賦值

使用的類型有：數(shù)字，字符串，布爾值，null，undefined

this.setState({
  count: 1,
  title: 'setState',
  success: true
})

2.數(shù)組類型的賦值

增加一個值的方法

// 方法一：將state先賦值給另外的變量，然后使用concat創(chuàng)建新數(shù)組
var hobaies= this.state.hobaies; 
this.setState({
  hobaies: hobaies.concat(['籃球']);
})
// 方法二：使用preState、concat創(chuàng)建新數(shù)組
this.setState(preState => ({
  hobaies: preState.hobaies.concat(['籃球']);
}))
// 方法三：ES6數(shù)組擴展 
this.setState(preState => ({
  hobaies: [...preState.hobaies, '籃球'];
}))

3.對象類型的賦值

// 方法一：使用Object.assign
let ages= this.state.ages;
this.setState({
  owner: Object.assign({}, ages, {age: 22});
})
// 方法二：使用preState、Object.assign創(chuàng)建新對象
this.setState(preState => ({
  owner: Object.assign({}, preState.ages, {age: 22});
}))

今天就學到這，以后有深入理解還會更新的。

以上就是詳解React中的setState執(zhí)行機制的詳細內(nèi)容，更多關于React setState執(zhí)行機制的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: