深入掌握 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避坑指南之useEffect 依賴引用類型問(wèn)題分析
這篇文章主要介紹了React避坑指南之useEffect 依賴引用類型問(wèn)題分析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了React組件實(shí)例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
react ant protable自定義實(shí)現(xiàn)搜索下拉框
這篇文章主要介紹了react ant protable自定義實(shí)現(xiàn)搜索下拉框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家介紹了React彈窗使用方式NiceModal重新思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
使用react-dnd編寫(xiě)一個(gè)可拖拽排列的list
這篇文章主要為大家詳細(xì)介紹了如何使用react-dnd編寫(xiě)一個(gè)可拖拽排列的list,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
React中useCallback useMemo到底該怎么用
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō)，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒(méi)有更改values/props的函數(shù)/組件。在react中，我們可以通過(guò)memo，useMemo以及useCallback來(lái)防止子組件的rerender2023-02-02
基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案
這篇文章主要介紹了基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細(xì)介紹了react中的雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
React Hooks如何主動(dòng)更新Hooks組件
這篇文章主要介紹了React Hooks如何主動(dòng)更新Hooks組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼
這篇文章主要介紹了React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07