溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解React中setState回調函數

發布時間:2020-09-06 21:25:31 來源:腳本之家 閱讀:1973 作者:化風 欄目:web開發

在使用React過程中,中可以使用this.state來訪問需要的某些狀態,但是需要更新或者修改state時,一般而言,我們都會使用setState()函數,從而達到更新state的目的,setState()函數執行會觸發頁面重新渲染UI。但是?。?!setState是異步的?。?!

1. 語法:

setState(updater[, callback]) //

updater是要改變的state對象,callback是state導致的頁面重新渲染的回調,等價于componentDidUpdate
一般而言,在設置頁面某些state的時候,需要先設置好state,然后再對頁面的一些參數進行修改的時候,可以使用setState的回調函數。

2. 分析一下區別

不在回調中使用參數,我們在設置state后立即使用state:

this.state = {foo: 1};
this.setState({foo: 123});
console.log(this.state.foo);
// 1

在回調中調用設置好的state

this.state = {foo: 2};
this.setState({foo: 123}, ()=> {
 console.log(foo);
 // 123
});

關于setState的回調函數的作用大概如此,這個函數相當于componentDidUpdate函數,和生命周期的函數類似。

3. 注意:

  1. 剛說了,setState是異步的!不保證數據的同步。
  2. setState更新狀態時可能會導致頁面不必要的重新渲染,影響加載。
  3. setState管理大量組件狀態也許會導致不必要的生命周期函數鉤子調用。

參考文檔:https://facebook.github.io/react/docs/react-component.html#setstate

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女