React中的ref、forwardRef以及useImperativeHandle-JXin的博客

温馨提示

该文章距离上次更新已经过去了 769 天，文章内容可能已经过时。

useRef 和 React.createRef
- 使用 useRef 和 React.createRef 获取 DOM 对象
- useRef 和 React.createRef 的区别
forwardRef
useImperativeHandle

useRef 和 React.createRef

useRef 和 React.createRef 类似，都会返回一个可变的 ref 对象，该对象有一个 current 值，useRef 初始值为传入的参数，而 React.createRef 初始值为 null

import React, { useRef } from "react";

function App() {
  const ref1 = useRef(1);
  const ref2 = React.createRef(2);
  console.log(ref1);
  console.log(ref2);
  return <></>;
}

export default App;

1
2
3
4
5
6
7
8
9
10
11

useRef 和 React.createRef

使用 useRef 和 React.createRef 获取 DOM 对象

import React, { useRef } from "react";

function App() {
  const ref1 = useRef();
  const ref2 = React.createRef();
  console.log(ref1);
  console.log(ref2);
  const handleClick = () => {
    console.log(ref1, ref2)
    ref1.current.focus()
  }
  return <>
    <input ref={ref1}></input>
    <div ref={ref2}></div>
    <button onClick={handleClick}>获取DOM聚焦</button>
  </>;
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

useRef 和 React.createRef 获取 DOM 对象

把 ref 对象利用元素的 ref 属性绑定在 DOM 元素上，之后 ref 对象的 current 属性就可以访问到 DOM 元素

useRef 和 React.createRef 的区别

useRef 和 React.createRef 的作用类似，但是也有一点不同，React.createRef 每次都会返回一个新的引用，而 useRef 每次返回的都是相同的引用，例如：

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

function App() {
  const ref1 = useRef();
  const ref2 = React.createRef();
  const [data, setData] = useState(1);
  console.log(ref1);
  console.log(ref2);
  const handleClick = () => {
    console.log(ref1, ref2);
    setData(data + 1)
  };
  return (
    <>
      <input ref={ref1}></input>
      <div ref={ref2}></div>
      <button onClick={handleClick}>获取DOM聚焦</button>
    </>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

useRef 和 React.createRef 的区别

通过 useState 来改变状态，改变状态之后组件重新刷新，可以看到每次更新之后 React.createRef 的值都被重置，而 useRef 则被保存了下来，返回的是同一个 ref 对象，所以 useRef 可以很方便的保存可变值

forwardRef

React.forwardRef 叫做 Refs转发，它可以将 Ref 从父组件自动的传递给子组件，在一般的组件中都是不需要的，只有在一些复杂的组件才会使用到，例如：

import { useRef, forwardRef } from "react";

const Child = forwardRef((props, ref) => {
  return <div ref={ref}>子组件</div>;
});

function App() {
  const childRef = useRef();
  return (
    <>
      <Child ref={childRef} />
      <button
        onClick={() => {
          console.log(childRef.current);
        }}
      >
        按钮
      </button>
    </>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

forwardRef

子组件 Child 把父组件的 ref 通过 forwardRef 传递给了 div

useImperativeHandle

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值，useImperativeHandle 应当与 forwardRef 一起使用，例如：

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

const Child = forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return <input ref={inputRef} />;
});

function App() {
  const childRef = useRef();
  return (
    <>
      <Child ref={childRef} />
      <button
        onClick={() => {
          console.log(childRef.current);
        }}
      >
        按钮
      </button>
    </>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

useImperativeHandle

可以看到现在 childRef.current 就只打印出了 focus 方法