[react] useRef场景_react动态useref-优快云博客

本文链接：https://blog.youkuaiyun.com/Madman528/article/details/137603502

本文介绍了如何在React中使用`useState`和`ref`进行定时器管理，获取DOM节点，以及如何通过`forwardRef`和`useImperativeHandle`暴露子组件的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.记忆功能 -- 清定时器

先看和useState的差别

代码如下

不断地开启定时器

加上缓存就行,这样每次都是它

2.获取dom节点

当然!你可以直接在模板上面写函数!

函数变种也是可以的

你想获取整个组件也是没问题的

import React, { useRef, forwardRef } from "react";

const Son = forwardRef<HTMLDivElement>((props, ref) => {
  return (
    <div ref={ref}>
      <div>我是孩子</div>
    </div>
  );
});

function App() {
  const sonRef = useRef(null);

  return (
    <div className="App" onClick={() => {
      console.log(sonRef.current);

    }}>
      <Son ref={sonRef} />
    </div>
  );
}

export default App;

3.暴露子组件

刚刚的方法可以暴露,但是你想执行暴露的东西怎么执行

import React, { useRef, forwardRef, useImperativeHandle } from "react";

const Son = forwardRef((props, ref) => {
  // 在子组件内部创建一个内部的ref
  const innerRef = useRef(null);

  // 使用useImperativeHandle将子组件的方法暴露给父组件
  useImperativeHandle(ref, () => ({
    hi1() {},
    hi2() {}
  }));

  return (
    <div ref={innerRef}>
      <div>我是孩子</div>
    </div>
  );
});

function App() {
  const sonRef = useRef(null);

  return (
    <div className="App" onClick={() => {
      console.log(sonRef.current);
    }}>
      {/* 将ref传递给Son组件 */}
      <Son ref={sonRef} />
    </div>
  );
}

export default App;我在子组件还想暴露这行 <div>我是孩子</div>