一. setState是什么

它是React組件中用于更新狀態(tài)的方法。它是類組件中的方法，用于更新組件的狀態(tài)并重新渲染組件。
setState 方法接受一個(gè)對象或一個(gè)函數(shù)作為參數(shù)。當(dāng)傳遞一個(gè)對象時(shí)，它會(huì)將該對象合并到當(dāng)前的狀態(tài)對象中，并觸發(fā)組件的重新渲染。當(dāng)傳遞一個(gè)函數(shù)時(shí)，該函數(shù)會(huì)接收先前的狀態(tài)作為參數(shù)，并返回一個(gè)新的狀態(tài)對象，然后 setState 方法會(huì)將返回的狀態(tài)對象合并到當(dāng)前的狀態(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>
    );
  }
}

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

二、更新類型

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

• 異步更新
• 同步更新

異步更新

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

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

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

這并不能看到最新的state的結(jié)果

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

同步更新

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

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

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

小結(jié)

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

State的賦值

三種情況

1.通常情況下的賦值

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

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

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

增加一個(gè)值的方法

// 方法一：將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ù)組擴(kuò)展 
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});
}))

今天就學(xué)到這，以后有深入理解還會(huì)更新的。

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

最新評論