React-useRef

  • useRef
    useRef 是 React 的一个 Hook,用来创建一个 可变的引用对象,这个引用对象在组件的整个生命周期内保持不变。
    翻译成人话就是,用useRef创建一个相对共享的对象管理器,它里面装的内容的读写是不会引起界面渲染的。
    典型的应用就是将某个界面控件放到里面,然后在适当的时候调出操作,比如获取 DOM 元素的引用,可以像原生 JavaScript 的 document.getElementById 一样,获取 DOM 元素。
javascript 复制代码
import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();  // 获取 input 元素并聚焦
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>点击聚焦</button>
    </div>
  );
}

如果要手动存放,则直接 const handlerRef = useRef(null); handlerRef.current = 'abcd'/1234/handlerRef.current = handler; current可以装任何类型

比如如果在页面初始化时需要调用后端api,我一般将操作放在useLayoutEffect里面,但是useLayoutEffect会被至少执行两次! 下面用useRef防止重复调用:

javascript 复制代码
// 使用 ref 确保 updateCounter 只执行一次
  const counterUpdatedRef = useRef(false);
  // 使用 useLayoutEffect 确保在渲染完成后再设置返回处理函数
  useLayoutEffect(() => {
    const doit = async () => {
      // 确保 updateCounter 只执行一次
      if (!counterUpdatedRef.current && curTask?.id) {
        await updateCounter();
        counterUpdatedRef.current = true;
      }
      ...
    };

    doit();
  }, [curTask, setBackHandler])
相关推荐
2401_881244409 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆10 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子13 分钟前
Web开发中的文件下载
前端·javascript·面试
KaneLogger33 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志1 小时前
JavaScript中如何遍历对象?
javascript
像风一样自由20209 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说9 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊10 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef0611 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder13 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github