React中useRef hook的簡(jiǎn)單用法

更新時(shí)間：2024年01月10日 15:06:29 作者：卡卡舅舅

useRef是react的自定義hook,它用來(lái)引用一個(gè)不需要渲染的值,這篇文章介紹useRef的簡(jiǎn)單用法,感興趣的朋友一起看看吧

介紹

useRef是react的自定義hook，它用來(lái)引用一個(gè)不需要渲染的值。這篇文章會(huì)介紹useRef的簡(jiǎn)單用法。

使用場(chǎng)景

1.實(shí)現(xiàn)節(jié)流

通過(guò)useRef實(shí)現(xiàn)節(jié)流功能，在限制時(shí)間內(nèi)多次提交，已第一次提交為準(zhǔn)。

useThrottle.jsx

import {useEffect, useRef, useState} from "react";
import {useEffect, useRef, useState} from "react";
export const useThrottle = (state, timeout) => {
    // 計(jì)時(shí)器引用
    const timeoutRef = useRef(null);
    // 計(jì)時(shí)器執(zhí)行結(jié)束
    const existTimeOut = useRef(false);
    // 節(jié)流值
    const [throttleValue, setThrottleValue] = useState(state);
    useEffect(()=>{
        // 存在定時(shí)器
        if (existTimeOut.current){
            return;
        }
        existTimeOut.current = true;
        // 設(shè)置節(jié)流值
        timeoutRef.current = setTimeout(()=>{
            setThrottleValue(state);
            existTimeOut.current = false;
        }, timeout)
    },[state])
    return throttleValue;
}

app.jsx(使用樣例)

import './App.css';
import {useEffect, useState} from "react";
import {useThrottle} from "./demo/UseRefDemo";
const App =()=>{
    const [state, setState] = useState('')
    const throttleState = useThrottle(state, 10000);
    useEffect(()=>{
        console.log('延遲執(zhí)行:' + throttleState);
    }, [throttleState])
    return <>
         用戶(hù)名: <input type='text' value={state} onChange={(e)=> setState(e.target.value)}/>
    </>
}
export  default App

實(shí)現(xiàn)效果

2.操作dom元素

export default function Form() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        聚焦輸入框
      </button>
    </>
  );
}

實(shí)現(xiàn)效果

到此這篇關(guān)于React之useRef hook的文章就介紹到這了,更多相關(guān)React useRef hook內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

ReactJS中使用TypeScript的方法
TypeScript 實(shí)際上就是具有強(qiáng)類(lèi)型的 JavaScript,可以對(duì)類(lèi)型進(jìn)行強(qiáng)校驗(yàn),好處是代碼閱讀起來(lái)比較清晰,代碼類(lèi)型出現(xiàn)問(wèn)題時(shí),在編譯時(shí)就可以發(fā)現(xiàn),而不會(huì)在運(yùn)行時(shí)由于類(lèi)型的錯(cuò)誤而導(dǎo)致報(bào)錯(cuò),這篇文章主要介紹了ReactJS中使用TypeScript的方法,需要的朋友可以參考下
2024-04-04
React中阻止事件冒泡的問(wèn)題詳析
這篇文章主要給大家介紹了關(guān)于React中阻止事件冒泡問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
React無(wú)限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn)
無(wú)限下拉加載技術(shù)是用戶(hù)在大量成塊的內(nèi)容面前一直滾動(dòng)查看,本文主要介紹了React無(wú)限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
React中Redux核心原理深入分析
這篇文章主要介紹了如何在React中Redux原理,目前redux在react中使用是最多的，所以我們需要將之前編寫(xiě)的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下
2022-11-11
React Native 資源包拆分實(shí)戰(zhàn)分析
這篇文章主要為大家介紹了React Native 資源包拆分實(shí)戰(zhàn)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
聊聊React onClick 傳遞參數(shù)的問(wèn)題
很多朋友向小編反映一個(gè)問(wèn)題關(guān)于React onClick 傳遞參數(shù)的問(wèn)題，當(dāng)點(diǎn)擊刪除按鈕需要執(zhí)行刪除操作，針對(duì)這個(gè)問(wèn)題該如何處理呢？下面小編給大家?guī)?lái)了React onClick 傳遞參數(shù)的問(wèn)題，感興趣的朋友一起看看吧
2021-10-10
詳解react應(yīng)用中的DOM DIFF算法
這篇文章主要介紹了react應(yīng)用中的DOM DIFF算法，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下
2021-04-04
關(guān)于react+antd樣式不生效問(wèn)題的解決方式
最近本人在使用Antd開(kāi)發(fā)時(shí)遇到些問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問(wèn)題的解決方式,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了React中獲取數(shù)據(jù)的3種方法及優(yōu)缺點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
手動(dòng)用webpack搭建第一個(gè)ReactApp的示例
本篇文章主要介紹了手動(dòng)用webpack搭第一個(gè) ReactApp的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04