useRef() 与 createRef()

在 React 中，我们经常需要在组件中引用 DOM 元素或从一个地方传递数据到另一个地方。 useRef() 和 createRef() 是用于处理这些情况的两个用途不同的 React Hook。

useRef()

useRef() 是 React 提供的一个 Hook，它返回一个可变的 ref 对象。 useRef() 可以在组件的多次渲染之间保持值的持久性。

import React, { useRef } from "react";

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>聚焦输入框</button>
    </div>
  );
}

在上面的代码中，我们使用 useRef() 创建了一个 ref 对象，并将其分配给 input 元素的 ref 属性。然后，当按钮被点击时，我们可以通过访问 ref.current 来操作输入元素，例如使用 focus() 聚焦输入框。

useRef() 还可以在其他情况下使用，例如保存和访问上一次渲染的值，或者在不触发重新渲染的情况下保存组件内部变量的可变状态。 useRef() 返回的 ref 对象可以在每次渲染时保持不变，因此它是用于保存和访问组件内部数据而不触发重新渲染的理想方式。

createRef()

createRef() 是 React 提供的一个 API，用于创建一个 ref 并将其分配给某个元素或组件的 ref 属性。

import React from "react";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.handleClick}>聚焦输入框</button>
      </div>
    );
  }
}

在上面的代码中，我们在类组件的构造函数中使用 createRef() 方法创建了一个 ref，并将其分配给 input 元素的 ref 属性。然后，当按钮被点击时，我们可以通过访问 this.inputRef.current 来操作输入元素，例如使用 focus() 聚焦输入框。

createRef() 主要用于类组件，而 useRef() 是 React 的 Hook，在函数组件中更常用。它们的作用相似，但具体用法略有差异。

总结

• useRef() 是 React 提供的一个 Hook，用于在函数组件中创建一个可变的 ref 对象，它在多次渲染之间保持值的持久性；
• createRef() 是 React 提供的一个 API，用于在类组件中创建一个 ref，并将其分配给某个元素或组件的 ref 属性。

使用 useRef() 和 createRef() 可以轻松地在 React 应用程序中引用 DOM 元素或保存和访问组件内部数据，它们是处理这些情况的有用工具。