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