深入掌握 react的 setState的工作機(jī)制
react 是單向數(shù)據(jù)流，若想要改變已有組件的外觀，我們只能通過(guò)更改組件的 props 或者更新組件的 state。在 react 項(xiàng)目的代碼中我們操作最多的就是 this.setState 方法。下面對(duì) setState 方法進(jìn)行詳細(xì)的說(shuō)明。
<!--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 };
});
該語(yǔ)法和直接為 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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React組件用來(lái)實(shí)現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/image等等)，這篇文章主要介紹了React組件的用法和理解,需要的朋友可以參考下2023-02-02
react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼
本文主要介紹了react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
react路由v6版本NavLink的兩個(gè)小坑及解決
這篇文章主要介紹了react路由v6版本NavLink的兩個(gè)小坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了React中上傳圖片到七牛的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
本文主要介紹了React中井字棋游戲的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
create-react-app中添加less支持的實(shí)現(xiàn)
這篇文章主要介紹了react.js create-react-app中添加less支持的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
React實(shí)現(xiàn)路由返回?cái)r截的三種方式
最近項(xiàng)目為了避免用戶誤操作導(dǎo)致數(shù)據(jù)丟失,增加返回?cái)r截功能,但是之前由于qiankun的報(bào)錯(cuò)導(dǎo)致這個(gè)功能一直有一些問(wèn)題,所以專門獨(dú)立搞了一個(gè)專題研究在react中各種方式實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2024-05-05
使用React?SSR寫Demo一學(xué)就會(huì)
這篇文章主要為大家介紹了使用React?SSR寫Demo實(shí)現(xiàn)教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了ReactNative環(huán)境搭建的教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
React?Fiber構(gòu)建completeWork源碼解析
這篇文章主要為大家介紹了React?Fiber構(gòu)建completeWork源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02