小編給大家分享一下react中setState工作機(jī)制的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(成都創(chuàng)新互聯(lián)公司).為客戶提供專業(yè)的雅安服務(wù)器托管,四川各地服務(wù)器托管,雅安服務(wù)器托管、多線服務(wù)器托管.托管咨詢專線：13518219792

react 是單向數(shù)據(jù)流，若想要改變已有組件的外觀，我們只能通過更改組件的 props 或者更新組件的 state。在 react 項(xiàng)目的代碼中我們操作最多的就是 this.setState 方法。下面對(duì) setState 方法進(jìn)行詳細(xì)的說明。

<!--more -->

setState要點(diǎn)：react 框架為了提高性能，會(huì)對(duì) state 的更新進(jìn)行收集、合并、再進(jìn)行一次批量的狀態(tài)更新。這種機(jī)制常常導(dǎo)致一些意想不到的情況。

setState 有兩種調(diào)用形式：

向 setState 傳遞對(duì)象
setState()并不會(huì)立即觸發(fā) state 的更新。

//this.state.demo = 1;
handleClick = () => {
  this.setState({demo: 2});
  console.log(this.state.demo);// 1
}

1、?注意：在 addEventListener、setTimeout、ajax 回調(diào)中 this.setState 是立即觸發(fā)的。

2、setState 會(huì)合并更新，可能會(huì)造成狀態(tài)更新的丟失

handleClick = () => {
  this.setState({demo: this.state.demo + 1});
  this.setState({demo: this.state.demo + 1});
}
//click 之后 demo 為2而不是3

綜上：在同一代碼塊中不要多次調(diào)用 this.setState 方法

react 的 setState 還提供了另一種調(diào)用形式： this.setState(callbackFunc)

this.setState((previousState, currentProps) => {
  return { ...previousState, foo: currentProps.bar };
});

該語法和直接為 setState 傳遞對(duì)象不同,不會(huì)合并更新。

// demo + 1
handleSyncStateChange = () => {
  this.setState({
    demo: this.state.demo + 1
  });
  this.setState({
    demo: this.state.demo + 1
  });

}
// demo + 2
handleAsyncStateChange = () => {
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
  this.setState((preState, preProps) => {
    return {
      demo: preState.demo + 1
    }
  });
}

refs

Async Nature Of setState

以上是“react中setState工作機(jī)制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：react中setState工作機(jī)制的示例分析
轉(zhuǎn)載來源：http://www.chinadenli.net/article14/jcoide.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)