React自定義hooks同步獲取useState的最新?tīng)顟B(tài)值方式
更新時(shí)間：2024年03月13日 09:45:37 作者：區(qū)塊鏈（Web3）開(kāi)發(fā)工程師
這篇文章主要介紹了React自定義hooks同步獲取useState的最新?tīng)顟B(tài)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
背景
- 不使用hook時(shí)，我們可以在setState回調(diào)函數(shù)獲取最新值
- 使用react hook時(shí)，最新的值只能在useEffect里面獲取
- 但我們有時(shí)候的業(yè)務(wù)場(chǎng)景需要我們同步拿到變量的最新變化值，以便做下一步操作；
- 這時(shí)我們可以封裝一個(gè)hook通過(guò)結(jié)合useRef通過(guò)回調(diào)函數(shù)來(lái)拿到最新?tīng)顟B(tài)值。
代碼
import { useEffect, useRef, useState } from 'react';
/**
* 自定義 useState
* @param state
* @returns
*/
const useSyncState: any = (state: any) => {
const cbRef: { current: any } = useRef();
const [data, setData] = useState(state);
useEffect(() => {
cbRef.current && cbRef.current(data);
}, [data]);
return [
data,
(val: any, callback: any) => {
cbRef.current = callback;
setData(val);
},
];
};
export default useSyncState;使用
const [data,setData] = useSyncState(0);
setData(1, function (data) {
console.log("我是最新的值：", data);
})總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react-native 封裝選擇彈出框示例(試用ios&android)
本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android)，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
react中如何使用定義數(shù)據(jù)并監(jiān)聽(tīng)其值
這篇文章主要介紹了react中如何使用定義數(shù)據(jù)并監(jiān)聽(tīng)其值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
使用React代碼動(dòng)態(tài)生成柵格布局的方法
這篇文章主要介紹了使用React簡(jiǎn)短代碼動(dòng)態(tài)生成柵格布局的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
react中通過(guò)props實(shí)現(xiàn)父子組件間通信的使用示例
在React中,父組件可以通過(guò)props屬性向子組件傳遞數(shù)據(jù),子組件可以通過(guò)props屬性接收父組件傳遞過(guò)來(lái)的數(shù)據(jù),本文就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-10-10
React 組件中的state和setState()你知道多少
這篇文章主要為大家詳細(xì)介紹了React組件中的state和setState()，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
map()方法是在React中常用的數(shù)組處理方法之一,可以用于遍歷數(shù)組、生成組件列表以及進(jìn)行數(shù)據(jù)轉(zhuǎn)換等操作,通過(guò)合理運(yùn)用map()方法,可以更靈活地處理和展示數(shù)據(jù),下面給大家講解react map使用方法,感興趣的朋友一起看看吧2023-10-10
react?native?reanimated實(shí)現(xiàn)動(dòng)畫(huà)示例詳解
這篇文章主要為大家介紹了react?native?reanimated實(shí)現(xiàn)動(dòng)畫(huà)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了react+antd動(dòng)態(tài)增刪表單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React-intl 實(shí)現(xiàn)多語(yǔ)言的示例代碼
本篇文章主要介紹了React-intl 實(shí)現(xiàn)多語(yǔ)言的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11