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