精读《useRef 与 createRef 的区别》揭秘二者的微妙差异

2023-10-04 07:34:15

React.useRef 和 React.createRef 的区别

React.useRef 和 React.createRef 是两个不同的 API，它们都有自己独特的用法和特点。

React.useRef

React.useRef 用于在函数组件中创建和获取 DOM 元素的引用。它返回一个可变的 ref 对象，该对象具有一个指向 DOM 元素的 current 属性。

const ref = useRef();

// 在组件中使用 ref
function MyComponent() {
  const inputRef = useRef();

  useEffect(() => {
    // 在 DOM 元素挂载后，current 属性指向该元素
    console.log(inputRef.current);
  }, []);

  return <input ref={inputRef} />;
}

在上面的示例中，useRef 用于在 MyComponent 组件中创建 inputRef 引用。当组件挂载后，inputRef.current 将指向该输入元素，我们就可以通过它来获取该元素的属性、调用它的方法等。

React.createRef

React.createRef 也用于在函数组件中创建和获取 DOM 元素的引用。它返回一个不变的 ref 对象，该对象具有一个指向 DOM 元素的 current 属性。

const ref = createRef();

// 在组件中使用 ref
function MyComponent() {
  const inputRef = createRef();

  useEffect(() => {
    // 在 DOM 元素挂载后，current 属性指向该元素
    console.log(inputRef.current);
  }, []);

  return <input ref={inputRef} />;
}

在上面的示例中，createRef 用于在 MyComponent 组件中创建 inputRef 引用。当组件挂载后，inputRef.current 也将指向该输入元素，我们就可以通过它来获取该元素的属性、调用它的方法等。

何时使用 React.useRef 和 React.createRef

那么，我们应该什么时候使用 React.useRef，什么时候使用 React.createRef 呢？

使用 React.useRef ：
- 当我们需要获取 DOM 元素的引用，并在组件的生命周期中对其进行操作时，可以使用 React.useRef。
- 当我们需要在组件中使用 ref 的值时，可以使用 React.useRef。
使用 React.createRef ：
- 当我们需要获取 DOM 元素的引用，但不需要在组件的生命周期中对其进行操作时，可以使用 React.createRef。
- 当我们需要将 ref 的值传递给父组件时，可以使用 React.createRef。