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

我读过一些反应过度的文章

该示例显示，如果要获取最新的

计数

，可以使用

useRef

保存可变变量，并在异步函数laster中获取它：

函数示例（）{
const[count，setCount]=useState（0）；
const latestCount=useRef（count）；
useffect（（）=>{
//设置可变的最新值
latestCount.current=计数；
设置超时（（）=>{
//读取可变的最新值
log（`youclicked${latestCount.current}次`）；
}, 3000);
});
// ...
}

但是，我可以通过在组件函数之外创建一个变量来做同样的事情，例如：

import React，{useState，useffect，useRef}来自'React'；
//在函数组件外部定义了一个变量
设countCache=0；
函数计数器（）{
const[count，setCount]=useState（0）；
countCache=count；//设置默认值
useffect（（）=>{
设置超时（（）=>{
//我们可以在这里得到最新的计数
log（`youclicked${countCache}次（countCache）`）；
}, 3000);
});
// ...
}
导出默认计数器；

---

这两种方法都是可行的，或者如果我在功能组件外部定义变量，有什么不好的吗？

useRef

将为每个组件分配一个引用，而在功能组件范围之外定义的变量将只分配一次

useRef

reference life span是组件的寿命（当组件卸载时它“死亡”，而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会触发）

因此，反射值就是它的值

为了反映外部变量和

useRef

引用之间的差异，在下一个示例中，单击按钮时，您可能会注意到

变量对于这两个组件都是全局的，而
引用始终更新为当前状态值

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 />
    </>
  );
}

import React，{useffect，useRef，useReducer}来自“React”；
从“react dom”导入react dom；
//在函数组件外部定义了一个变量
设countCache=0；
函数计数器（）{
const[num，count]=useReducer（（num）=>num+1，0）；
const countRef=useRef（计数）；
useffect（（）=>{
//设置计数更改时的计数值
countCache=num；
countRef.current=num；
}，[num]）；
返回(
计数
状态{num}
变量{countCache}
引用{countRef.current}
);
}
导出默认函数App（）{
返回(

查看单击另一个计数器时发生的情况

);
}


请参见a，在使用
useffect
中的
useRef
引用时，存在许多常见错误

我输入了错误的代码。现在我替换
countCache=0带有
countCache=count。结果显示与
useRef
相同，也可以在渲染中使用
{countCache}
。答案仍然相同，请尝试使多个计数器看看会发生什么。我在组件中添加了另一个计数器，即
counterOne
，
counterTwo
，并在函数外创建了两个变量，即。，
cacheCounterOne
，cacheCounterTwo`。然而，我没有发现任何奇怪的事情。看起来很好。。。你能给我更多的提示吗？我加了一个例子看看谢谢！这个沙箱真的很有用。我想我已经明白了。非常感谢。
let howMuchMounted = 0;

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

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 />
    </>
  );
}