React-中的-ref

当需要组件 “记住” 某些信息, 但又不想让这些信息触发新的渲染 时, 可以使用 ref.

与 state 一样, React 会在每次重新渲染之间保留 ref, 但要注意两者的区别, 更改 ref 不会出发渲染. (ref 本身是一个普通的 JavaScript 对象)

使用 ref

import { useRef } from 'react';

const ref = useRef(0);

这里的 useRef(0) 实际返回的是一个对象:

{
    current: 0
}

此时可以用 ref.current 来访问到传入 useRef 的值. 而 ref.current 是可变的.

注意只有在组件需要存储一些值, 但不影响渲染逻辑, 再考虑使用 ref. 也不要在渲染过程中读取或写入 ref.current.

ref 和 state 的另一个区别在与, ref 会同步更新, 不会先加入更新列表, 等待其他代码运行:

ref.current = 5;
console.log(ref.current); // 5

使用 ref 操作 DOM

import { useRef } from 'react';

const myRef = useRef(null);

若将 ref 传递给 DOM 节点的 ref 属性 (让 DOM 节点与一个 ref 相绑定):

<div ref={myRef}>

则 myRef.current 的值会被设置为 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>
    </>
  );
}

使用 ref 的时机

Refs 是一种脱围机制, 即只在必须 “跳出 React” 时使用它们. 常见示例包括管理焦点, 滚动位置或调用 React 未暴露的浏览器 API.