react中使用ref

何时使用ref

当你希望组件“记住”某些信息，但又不想让这些信息 触发新的渲染 时，你可以使用 ref 。

• 存储 timeout ID
• 存储和操作 DOM 元素，我们将在 下一页 中介绍
• 存储不需要被用来计算 JSX 的其他对象。
• 如果你的组件需要存储一些值，但不影响渲染逻辑，请选择 ref。

如何使用ref

import { useRef } from 'react';
const ref = useRef(0);
// `useRef` 返回一个这样的对象:
// 你向 useRef 传入的值
// 设置 state 会重新渲染组件，更改 ref 不会！
// 当一条信息用于渲染时，将它保存在 state 中。当一条信息仅被事件处理器需要，并且更改它不需要重新渲染时，使用 ref 可能会更高效。
{current: 0}

使用ref操作dom

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

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

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

访问另一个组件的 DOM 节点

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

export default function Form() {
  const inputRef = useRef(null);

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

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={handleClick}>
        聚焦输入框
      </button>
    </>
  );
}