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