为什么需要 useRef 而不是可变变量？

我读过了useEffect 完整指南 - 逆流而上反应过度。

该示例表明，如果我们想获取最新的count， 我们可以用useRef保存可变变量，并在异步函数中获取它：

function Example() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);

  useEffect(() => {
    // Set the mutable latest value
    latestCount.current = count;
    setTimeout(() => {
      // Read the mutable latest value
      console.log(`You clicked ${latestCount.current} times`);
    }, 3000);
  });
  // ...
}

但是，我可以通过在组件函数外部创建变量来完成相同的操作，例如：

import React, { useState, useEffect, useRef } from 'react';

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

function Counter() {
  const [count, setCount] = useState(0);
  countCache = count;       // set default value

  useEffect(() => {
    setTimeout(() => {
      // We can get the latest count here
      console.log(`You clicked ${countCache} times (countCache)`);
    }, 3000);
  });
  // ...
}

export default Counter;

这两种方法都实用吗？或者如果我在函数组件之外定义变量会有什么不好吗？

useRef将分配一个参考each组件，而在函数组件范围之外定义的变量只会分配一次.

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 会触发渲染）。

因此反射值就是它的closure value.

let countCache = 0;

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

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

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

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

例如，如果您想计算组件在整个应用程序生命周期内安装的次数，请增加内部变量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.