React中異步數(shù)據(jù)更新不及時問題及解決
react異步數(shù)據(jù)更新不及時問題
最近在學習react的過程中，遇到了個問題，當我使用useState這個hook的時候，發(fā)現(xiàn)我們這個方法更新數(shù)據(jù)他是異步更新的，數(shù)據(jù)不會及時同步上我們的頁面，在仔細的研究下，找到了以下
解決方法
const [value,setValue] = useState([]);
const changeValue = ()=>{
setValue(data)
console.log(value) //在此處輸出會出現(xiàn)不及時更新問題，不會同步到頁面上
}
//利用useEffect這個hook來監(jiān)聽數(shù)據(jù)的變化再去輸出或者是調用
useEffect(()=>{
console.log(value)//這樣就可以解決更新不及時的問題啦
},[value])react異步更新、尋找DOM
1.react異步更新
react異步更新指的是this.setState()是異步更新的，異步更新之后怎么獲取更新之后值
有兩種方法：
1.1 componentDidUpdate生命周期函數(shù)獲取更新之后的值
componentDidUpdate:已經(jīng)更新生命周期函數(shù)中打印state中的數(shù)據(jù)是更新后的值
componentDidUpdate(prevProps, prevState) {
console.log(2, prevState.name, this.state.name) // 張三, 李四
}1.2 在this.setState()的回調函數(shù)中獲取更新后的值
this.setState的第二個參數(shù)是可選的回調，是異步更新完成時的回調，在該回調函數(shù)中獲取更新后的值
this.setState({
name: "李四"
}, ()=>{
// this.setState的第二個參數(shù)是可選的回調, 是異步更新完成時的回調 (與小程序setData相同)
console.log(3, this.state.name) // 李四
// 注意: this.setState數(shù)據(jù)更新屬于異步更新, 此處打印是更新前的值
console.log(1, this.state.name) // 張三2.react查找DOM
在react組件中獲取DOM元素的三種方式：
2.1 給標簽設置ref屬性
給標簽設置ref屬性，通過this.refs調用(老版本語法，將要廢除)
<h1 ref="myH1"></h1> this.refs.myH1
2.2 在構造器中創(chuàng)建ref全局變量
在構造器中創(chuàng)建ref全局變量，在標簽中ref屬性動態(tài)綁定這個全局變量，通過全局變量的current字段調用
constructor(props) {
super(props);
this.d2 = React.createRef()
}
<div ref={this.d2}>2</div>
console.log(this.d2.current);2.3 在標簽ref屬性綁定函數(shù)
在標簽ref屬性綁定函數(shù)，在函數(shù)中定義全局變量賦值，通過全局變量調用
<h3 ref={ ele => this.myH3 = ele }></h3>
this.myH3注意：
1.在父組件中用ref獲取子組件對象，必須保證子組件是類組件，函數(shù)式組件獲取結果是undefined
2.父組件中子組件標簽綁定ref屬性，父組件使用ref獲取子組件對象后，可以對子組件狀態(tài)數(shù)據(jù)和函數(shù)執(zhí)行調用和修改
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React與Redux之數(shù)組處理講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
這篇文章主要給大家介紹了關于React中如何引入Angular組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-08-08
這篇文章主要介紹了詳解react-redux插件入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
React?Context?變遷及背后實現(xiàn)原理詳解
這篇文章主要為大家介紹了React?Context?變遷及背后實現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
React+Ant Design前端實現(xiàn)讀取與導出Excel文件
在實際業(yè)務場景中,我們經(jīng)常需要處理 Excel 文件的導入導出,本文將以 React + Ant Design 項目為例,演示如何通過 xlsx 庫實現(xiàn)以下功能,希望對大家有所幫助2025-08-08
React從react-router路由上做登陸驗證控制的方法
本篇文章主要介紹了React從react-router路由上做登陸驗證控制的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進入到了 commit 階段，本章將講解 commit 階段執(zhí)行過程源碼2022-11-11
這篇文章主要介紹了react國際化react-intl的使用,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
react中將html字符串渲染到頁面的實現(xiàn)方式
這篇文章主要介紹了react中將html字符串渲染到頁面的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了react使用websocket實時通信方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09