詳解React中setState回調(diào)函數(shù)
在使用React過(guò)程中，中可以使用this.state來(lái)訪問(wèn)需要的某些狀態(tài)，但是需要更新或者修改state時(shí)，一般而言，我們都會(huì)使用setState()函數(shù)，從而達(dá)到更新state的目的，setState()函數(shù)執(zhí)行會(huì)觸發(fā)頁(yè)面重新渲染UI。但是！??！setState是異步的?。?！
1. 語(yǔ)法：
setState(updater[, callback]) //
updater是要改變的state對(duì)象，callback是state導(dǎo)致的頁(yè)面重新渲染的回調(diào)，等價(jià)于componentDidUpdate
一般而言，在設(shè)置頁(yè)面某些state的時(shí)候，需要先設(shè)置好state，然后再對(duì)頁(yè)面的一些參數(shù)進(jìn)行修改的時(shí)候，可以使用setState的回調(diào)函數(shù)。
2. 分析一下區(qū)別
不在回調(diào)中使用參數(shù)，我們?cè)谠O(shè)置state后立即使用state：
this.state = {foo: 1};
this.setState({foo: 123});
console.log(this.state.foo);
// 1
在回調(diào)中調(diào)用設(shè)置好的state
this.state = {foo: 2};
this.setState({foo: 123}, ()=> {
console.log(foo);
// 123
});
關(guān)于setState的回調(diào)函數(shù)的作用大概如此，這個(gè)函數(shù)相當(dāng)于componentDidUpdate函數(shù)，和生命周期的函數(shù)類(lèi)似。
3. 注意：
- 剛說(shuō)了，setState是異步的！不保證數(shù)據(jù)的同步。
- setState更新?tīng)顟B(tài)時(shí)可能會(huì)導(dǎo)致頁(yè)面不必要的重新渲染，影響加載。
- setState管理大量組件狀態(tài)也許會(huì)導(dǎo)致不必要的生命周期函數(shù)鉤子調(diào)用。
參考文檔：https://facebook.github.io/react/docs/react-component.html#setstate
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決React報(bào)錯(cuò)React.Children.only expected to rece
這篇文章主要為大家介紹了React報(bào)錯(cuò)React.Children.only expected to receive single React element child分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
關(guān)于antd tree和父子組件之間的傳值問(wèn)題(react 總結(jié))
這篇文章主要介紹了關(guān)于antd tree 和父子組件之間的傳值問(wèn)題，是小編給大家總結(jié)的一些react知識(shí)點(diǎn)，本文通過(guò)一個(gè)項(xiàng)目需求實(shí)例代碼詳解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-06-06
在V6版本中，<Switch>組件被替換成<Routes>組件，同時(shí)，component屬性被element屬性替換，這篇文章主要介紹了react-router?v6新特性總結(jié),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了模塊化react-router配置方法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
react實(shí)現(xiàn)頁(yè)面水印效果的全過(guò)程
大家常常關(guān)注的是網(wǎng)站圖片增加水印,而很少關(guān)注頁(yè)面水印,其實(shí)這個(gè)需求也是比較常見(jiàn)的,比如公文系統(tǒng)、合同系統(tǒng)等,這篇文章主要給大家介紹了關(guān)于react實(shí)現(xiàn)頁(yè)面水印效果的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了React日期時(shí)間顯示組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
圖文示例講解useState與useReducer性能區(qū)別
這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React Native中TabBarIOS的簡(jiǎn)單使用方法示例
最近在學(xué)習(xí)過(guò)程中遇到了很多問(wèn)題,TabBarIOS的使用就是一個(gè)，所以下面這篇文章主要給大家介紹了關(guān)于React Native中TabBarIOS簡(jiǎn)單使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-10-10
react組件中debounce防抖功能失效問(wèn)題解決辦法
在React組件中,如果使用useState管理searchKey,每次輸入變化都會(huì)導(dǎo)致組件重新渲染,從而生成新的debounce函數(shù),導(dǎo)致防抖功能失效,解決方法是使用useRef定義searchKey為非響應(yīng)式數(shù)據(jù),從而維持debounce函數(shù)的穩(wěn)定,確保防抖功能有效,感興趣的朋友跟隨小編一起看看吧2024-10-10
使用store來(lái)優(yōu)化React組件的方法
這篇文章主要介紹了使用store來(lái)優(yōu)化React組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10