useRef 简单易懂解析（一）useRef 的使用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

翻译自：beta.reactjs.org/learn/refer…

当你希望组件“记住”一些信息，但是你不希望这些信息触发重新 render 的时候，你可以使用 ref，它像一个秘密的“口袋”，用于在组件中存储信息。

系列文章

• useRef 简单易懂解析（一）useRef 的使用
• useRef 简单易懂解析（二）useRef 的例子
• useRef 简单易懂解析（三）ref 和 state 的对比
• useRef 简单易懂解析（四）useRef 的原理
• useRef 简单易懂解析（五）ref 的最佳实践
• useRef 简单易懂解析（六）ref 的总结
• useRef 简单易懂解析（七）你学会了吗，来试试这些挑战 - 修复坏掉的聊天输入框
• useRef 简单易懂解析（八）你学会了吗，来试试这些挑战 - 修复无法重新渲染的组件
• useRef 简单易懂解析（九）你学会了吗，来试试这些挑战 - 修复去抖动
• useRef 简单易懂解析（十）你学会了吗，来试试这些挑战 - 读取最新状态

为你的组件添加 ref

你可以通过从 React 中 import useRef 勾子来给你的组件添加一个 ref:

import { useRef } from 'react';

在组件内部，调用 useRef 勾子，并传递初始值，作为唯一的参数。例如，这里的 ref 值是 0.

const ref = useRef(0);

useRef 返回这样一个对象

{ 
  current: 0 // 传递给 useRef 的值
}

你可以通过 ref.current 属性访问这个 ref 的当前值。这个值是有意设置为可变的。这意味着您可以对它进行读写操作。(这是为什么它是React单向数据流的“逃生舱门”的原因——详见下文)

在这里，按钮将在每次点击后增加 ref.current:

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

上面的例子中，ref 指向一个数字，但是，像 state 一样，ref 可以指向任何东西：比如字符串、对象甚至函数。与 state 不同的是，ref 是一个带有当前属性的普通 JavaScript 对象，可以读取和修改。

注意，组件不会在每次递增时都 re-render。像 state 一样，refs 在 re-render 之间被 React 保留。然而，设置状态将 re-render 组件，设置 ref 则不会。