React 中的 createRef和useRef

React 中的 createRef

在 React 中，createRef是一种用于访问在 render 方法中创建的 DOM 节点或 React 元素的方法。Refs 提供了一种与底层 DOM 元素交互的方式，它们在各种场景中都很有用，例如管理焦点、触发动画或集成第三方库。

createRef以下是有关如何在 React 中使用的分步指南：

初始化：
使用创建一个 ref 实例createRef并将其分配给类属性。

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

附加到元素：
使用 prop 将 ref 实例附加到 React 元素ref。

render() {
    return <div ref={this.myRef}>Hello, World!</div>;
}

访问 Ref：
将 ref 附加到元素后，您可以直接通过访问该元素this.myRef.current。

componentDidMount() {
    console.log(this.myRef.current);  // This will log the <div> element to the console
}

使用场景：
Refs 在各种场景下都很有用：

管理焦点：安装组件时将焦点集中在输入元素上。
触发动画：通过访问DOM元素，您可以使用GSAP等库来触发动画。
集成第三方库：有时，您需要集成需要直接访问 DOM 的第三方库。参考文献可以在这里提供帮助。

5.要点：

避免使用 ref 来完成可以声明式完成的事情。例如，不要使用 refs 来“设置”子组件的属性，而是使用 props。
当引用的内容发生变化时，不会触发重新渲染。它们只是访问 DOM 或 React 元素的一种方式。
虽然您可以将 ref 分配给功能组件，但它需要用于forwardRef将 ref 传递给 DOM 元素。

请记住，虽然createRef很强大，但应谨慎使用。在许多情况下，您可以使用 React 的常用数据流机制以更具声明性的方式实现所需的行为。

React 中的 useRef（简单语言）

当然！useRef是 React 中的一个钩子函数，允许您访问 DOM 元素并与之交互，或者保留对值更改时不会触发重新渲染的可变引用。

简单说明：
假设您有一个实体笔记本，您可以在其中记下笔记。每次您进行更改时，此笔记本不会对您大喊大叫，但您可以在需要查看所写内容时随时回顾它。同样的，useRef就像这个笔记本一样。您可以跟踪某些事情，而无需整个房间（您的组件）在每次做笔记时都做出反应。

常见用例：

专注于输入字段。
计算元素的大小。
跟踪变量的先前状态/值，而不会导致重新渲染。

高级解释：

可变参考对象：
- useRef返回一个可变引用对象 ( { current: ... })。
- 该current属性被初始化为传递的参数（initialValue），它可以是任何东西。它在组件的整个生命周期内保持不变。
- 与使用状态变量不同useState，更改ref.current不会触发重新渲染。
DOM 访问：
- ref当与元素上的属性结合使用时，它提供对 DOM 元素的直接访问。当与第三方库集成或执行诸如设置焦点或测量元素之类的任务时，这特别有用。
以前的值：
- 它可用于存储变量的先前值/状态。因为它不会导致更改时重新渲染，所以可以方便地检查以前的值与当前的值，而无需昂贵的重新渲染。
计时器和间隔：
- 使用useRef是保存对间隔或超时的引用的常见模式。这样，您可以稍后清除它们（就像useEffect清理一样）。
命令句柄：
- forwardRef与和结合使用useImperativeHandle，它允许父组件访问子组件的函数和值。对于父母需要直接调用子函数的罕见用例，这是一种更高级的模式。

访问 DOM 元素的示例：

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

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

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus the input</button>
    </>
  );
}