React 中如何创建Refs

useRef

js 复制代码
import React, { useRef, useEffect } from "react";

function MyComponent() {
  const myRef = useRef(null); // 创建 Ref

  useEffect(() => {
    // 访问 DOM 元素
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
}

export default MyComponent;

回调ref

你也可以在函数组件中使用回调 Refs。这种方式下,你会提供 一个函数,该函数会在组件挂载和卸载时分别被调用,并将 DOM 节点或 组件实例作为参数。

js 复制代码
import React, { useState, useEffect } from "react";


function MyComponent() {
  const [ref, setRef] = useState(null)

  useEffect(() => {
    if(ref){
        // 你现在可以访问 dom 节点或组件实例
    }
  }, [ref]);

  return <input type="text" ref={node => setRef(node)} />;
}

export default MyComponent;

这两种创建 Ref 的方式主要区别在于:

  • React.useRef() 创建的 Ref 更简洁,API 更一致,而且 Ref 的值在组件的整个生命周期中保持不变。
  • 回调 Refs 更灵活,它允许你在组件挂载和卸载时执行一些额外的逻辑。但 是,如果回调函数是在 render 方法中定义的,那么每次 render 时都 会创建一个新的函数实例,可能会导致一些性能问题。
  • 除非你有特殊需求,否则建议使用 React.useRef() 来创建 Ref。
相关推荐
布列瑟农的星空3 分钟前
大话设计模式——关注点分离原则下的事件处理
前端·后端·架构
yvvvy22 分钟前
前端必懂的 Cache 缓存机制详解
前端
北海几经夏37 分钟前
React自定义Hook
前端·react.js
龙在天42 分钟前
从代码到屏幕,浏览器渲染网页做了什么❓
前端
TimelessHaze43 分钟前
【performance面试考点】让面试官眼前一亮的performance性能优化
前端·性能优化·trae
yes or ok1 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手1 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
Noxi_lumors1 小时前
VITE BALABALA require balabla not supported
前端·vite
周胜21 小时前
node-sass
前端
aloha_2 小时前
Windows 系统中,杀死占用某个端口(如 8080)的进程
前端