useRef将为每个组件分配一个引用，而在函数组件范围之外定义的变量只会分配一次。

useRef 引用生命周期是组件的生命周期（当组件卸载时它“死亡”，而 JS 变量是作用域阻塞的）。

因此，定义组件范围之外的常量用途变量：

// This statement will only called once
const DEFAULT_VALUE = 5;

function Component() {
  // use DEFAULT_VALUE.
}

在组件的作用域内定义相同的语句，将在每次渲染时重新定义它：

// We can do better
function Component() {
  // Redefined on every render
  const DEFAULT_VALUE = 5;
}

现在的问题：

首先，我们实际上无法反映使用外部作用域变量更改的 UI，因为更改它们不会触发渲染（只有 React API 可以）。

因此反射值就是它的闭合值。

let countCache = 0;

function Counter() {
  ...
  countCache = 0;

  useEffect(() => {
    countCache = count;
  });
  ...

  // closure value of countCache
  return <div>{countCache}</div>
}

现在，外部作用域变量的特殊之处在于它们对于module本身是全局的，因此使用它的值对于引用它的所有组件（在module中）是全局的。

例如，如果您想计算组件在整个应用程序生命周期中安装的次数，请在安装时增加内部变量useEffect（找不到任何其他可能的用例）。

let howMuchMounted = 0;

function Component() {
  useEffect(() => { howMuchMounted += 1, [] };
}

为了反映外部变量和useRef引用的差异，在下一个示例中，在单击按钮时，您可能会注意到variable两个组件的都是全局的，而reference始终更新为当前状态值。

import React, { useEffect, useRef, useReducer } from "react";
import ReactDOM from "react-dom";

// defined a variable outside function component
let countCache = 0;

function Counter() {
  const [num, count] = useReducer((num) => num + 1, 0);

  const countRef = useRef(count);

  useEffect(() => {
    // set count value on count change
    countCache = num;
    countRef.current = num;
  }, [num]);

  return (
    <>
      <button onClick={count}>Count</button>
      <h3>state {num}</h3>
      <h3>variable {countCache}</h3>
      <h3>reference {countRef.current}</h3>
    </>
  );
}

export default function App() {
  return (
    <>
      <Counter />
      <hr />
      See what happens when you click on the other counter
      <hr />
      <Counter />
    </>
  );
}

请参阅有关useEffect用例的后续问题，在使用useRef内部引用时有许多常见错误useEffect。