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>