React之useRef使用总结

在React中，useRef是一个内置的Hook，可以用来存储可变值。它通常用于在组件之间传递数据或在组件中存储状态。useRef是一个很强大的工具，但它也可能有点难以理解。本文将总结一些useRef的常见场景和原理，帮助你更好地理解和使用useRef。

useRef的用法场景

• 在组件之间传递数据

useRef可以用来在组件之间传递数据。这可以通过在父组件中使用useRef创建一个ref对象，然后将该ref对象传递给子组件。子组件可以使用该ref对象来访问父组件中存储的数据。

• 在组件中存储状态

useRef还可以用来在组件中存储状态。这可以通过在组件中使用useRef创建一个ref对象，然后将该ref对象的值设置为要存储的状态。组件可以随后使用该ref对象来访问和修改存储的状态。

• 创建DOM节点引用

useRef可以用来创建DOM节点引用。这可以通过在组件中使用useRef创建一个ref对象，然后将该ref对象附加到要引用的DOM节点上。组件可以随后使用该ref对象来访问和修改引用的DOM节点。

useRef的原理

useRef是一个函数，它返回一个ref对象。ref对象是一个普通的JavaScript对象，它包含一个current属性。current属性的值可以是任何类型的数据，但它通常用于存储DOM节点引用或可变值。

useRef函数会在组件的每次渲染时返回同一个ref对象。这意味着ref对象在组件的整个生命周期内保持不变。这与自建对象不同，自建对象每次渲染时都会创建一个新的对象。

useRef的代码示例

以下是一个使用useRef在组件之间传递数据的代码示例：

const ParentComponent = () => {
  const ref = useRef(null);

  return (
    <div>
      <ChildComponent ref={ref} />
    </div>
  );
};

const ChildComponent = (props) => {
  const data = props.ref.current;

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
};

在这个示例中，ParentComponent使用useRef创建了一个ref对象，然后将该ref对象传递给ChildComponent。ChildComponent可以使用该ref对象来访问ParentComponent中存储的数据。

以下是一个使用useRef在组件中存储状态的代码示例：

const Component = () => {
  const ref = useRef(0);

  const increment = () => {
    ref.current += 1;
  };

  return (
    <div>
      <h1>{ref.current}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

在这个示例中，Component使用useRef创建了一个ref对象，然后将该ref对象的值设置为0。Component还定义了一个increment函数，该函数将ref.current的值增加1。当用户点击按钮时，increment函数会被调用，ref.current的值就会增加1。

以下是一个使用useRef创建DOM节点引用的代码示例：

const Component = () => {
  const ref = useRef(null);

  useEffect(() => {
    const node = ref.current;

    // Do something with the node
  }, []);

  return (
    <div ref={ref}>
      <h1>Hello World!</h1>
    </div>
  );
};

在这个示例中，Component使用useRef创建了一个ref对象，然后将该ref对象附加到