詳解React中setState回調(diào)函數(shù)
在使用React過程中，中可以使用this.state來訪問需要的某些狀態(tài)，但是需要更新或者修改state時，一般而言，我們都會使用setState()函數(shù)，從而達到更新state的目的，setState()函數(shù)執(zhí)行會觸發(fā)頁面重新渲染UI。但是?。?！setState是異步的！?。?/p>
1. 語法：
setState(updater[, callback]) //
updater是要改變的state對象，callback是state導(dǎo)致的頁面重新渲染的回調(diào)，等價于componentDidUpdate
一般而言，在設(shè)置頁面某些state的時候，需要先設(shè)置好state，然后再對頁面的一些參數(shù)進行修改的時候，可以使用setState的回調(diào)函數(shù)。
2. 分析一下區(qū)別
不在回調(diào)中使用參數(shù)，我們在設(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ù)的作用大概如此，這個函數(shù)相當(dāng)于componentDidUpdate函數(shù)，和生命周期的函數(shù)類似。
3. 注意：
- 剛說了，setState是異步的！不保證數(shù)據(jù)的同步。
- setState更新狀態(tài)時可能會導(dǎo)致頁面不必要的重新渲染，影響加載。
- setState管理大量組件狀態(tài)也許會導(dǎo)致不必要的生命周期函數(shù)鉤子調(diào)用。
參考文檔：https://facebook.github.io/react/docs/react-component.html#setstate
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用
這篇文章主要介紹了詳解使用webpack+electron+reactJs開發(fā)windows桌面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
詳解react內(nèi)聯(lián)樣式使用webpack將px轉(zhuǎn)rem
這篇文章主要介紹了詳解react內(nèi)聯(lián)樣式使用webpack將px轉(zhuǎn)rem，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
深入理解React Native核心原理(React Native的橋接（Bridge)
這篇文章主要介紹了深入理解React Native核心原理(React Native的橋接（Bridge),本文重點給大家介紹React Native的基礎(chǔ)知識及實現(xiàn)原理，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了react移動端二級路由嵌套的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了react-native消息推送實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了React性能優(yōu)化方法總結(jié)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實例分析
這篇文章主要介紹了React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程,結(jié)合具體實例形式分析了虛擬dom的基本原理與實現(xiàn)方法,需要的朋友可以參考下2023-05-05
解決react-connect中使用forwardRef遇到的問題
這篇文章主要介紹了解決react-connect中使用forwardRef遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
詳解前端路由實現(xiàn)與react-router使用姿勢
本篇文章主要介紹了詳解前端路由和react-router使用姿勢，詳細(xì)的介紹了react-router的用法，有興趣的可以了解一下2017-08-08
這篇文章主要為大家介紹了styled-components?的性能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01