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])
相关推荐
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说6 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef069 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder11 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句11 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom11 小时前
JavaScript reduce()函数详解
javascript
小飞悟11 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子11 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手12 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript