React中useRef hook的简单用法

 更新时间:2024年01月10日 15:06:29   作者:卡卡舅舅  
useRef是react的自定义hook,它用来引用一个不需要渲染的值,这篇文章介绍useRef的简单用法,感兴趣的朋友一起看看吧

介绍

        useRef是react的自定义hook,它用来引用一个不需要渲染的值。这篇文章会介绍useRef的简单用法。

使用场景

1.实现节流

        通过useRef实现节流功能,在限制时间内多次提交,已第一次提交为准。

useThrottle.jsx

import {useEffect, useRef, useState} from "react";
import {useEffect, useRef, useState} from "react";
export const useThrottle = (state, timeout) => {
    // 计时器引用
    const timeoutRef = useRef(null);
    // 计时器执行结束
    const existTimeOut = useRef(false);
    // 节流值
    const [throttleValue, setThrottleValue] = useState(state);
    useEffect(()=>{
        // 存在定时器
        if (existTimeOut.current){
            return;
        }
        existTimeOut.current = true;
        // 设置节流值
        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('延迟执行:' + throttleState);
    }, [throttleState])
    return <>
         用戶名: <input type='text' value={state} onChange={(e)=> setState(e.target.value)}/>
    </>
}
export  default App

实现效果

2.操作dom元素

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

实现效果

到此这篇关于React之useRef hook的文章就介绍到这了,更多相关React useRef hook内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解React中传入组件的props改变时更新组件的几种实现方法

    详解React中传入组件的props改变时更新组件的几种实现方法

    这篇文章主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • react自动化构建路由的实现

    react自动化构建路由的实现

    这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 使用React制作一个贪吃蛇游戏的代码详解

    使用React制作一个贪吃蛇游戏的代码详解

    Snake Game 使用 ReactJS 项目实现功能组件并相应地管理状态,开发的游戏允许用户使用箭头键控制蛇或触摸屏幕上显示的按钮来收集食物并增长长度,本文给大家详细讲解了如何使用 React 制作一个贪吃蛇游戏,需要的朋友可以参考下
    2023-11-11
  • react项目实践之webpack-dev-serve

    react项目实践之webpack-dev-serve

    这篇文章主要介绍了react项目实践之webpack-dev-serve,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React Native中导航组件react-navigation跨tab路由处理详解

    React Native中导航组件react-navigation跨tab路由处理详解

    这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 详解React中的不可变值

    详解React中的不可变值

    这篇文章主要介绍了React中的不可变值的相关资料,帮助大家更好的理解和学习使用react.js,感兴趣的朋友可以了解下
    2021-04-04
  • JavaScript的React Web库的理念剖析及基础上手指南

    JavaScript的React Web库的理念剖析及基础上手指南

    这篇文章主要介绍了JavaScript的React Web库的理念剖析及基础上手指南,React Web的目的即是把本地的React Native应用程序项目变为Web应用程序,需要的朋友可以参考下
    2016-05-05
  • React this.setState方法使用原理分析介绍

    React this.setState方法使用原理分析介绍

    我们知道,在React中没有像Vue那种数据双向绑定的效果。而this.setState方法就是用来对数据进行更改的。而通过this.setState方法更改的数据,会让组件的render重新渲染,并且刷新数据
    2022-09-09
  • React使用xlsx和js-export-excel实现前端导出

    React使用xlsx和js-export-excel实现前端导出

    这篇文章主要为大家详细介绍了React如何分别使用xlsx和js-export-excel实现前端导出功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2024-02-02
  • React重新渲染超详细讲解

    React重新渲染超详细讲解

    什么是re-render(重新渲染)?哪些是必要的re-render?哪些是非必要的re-render?如果你对这些问题还不是很明白,那么可以在这篇文章中找到答案
    2022-11-11

最新评论