Reactjs 如何反应“回调”；冻结“；关闭？

我想知道React如何在使用

useCallback

钩子（以及其他钩子）时“冻结”闭包，然后在将钩子内使用的变量传递到

inputs

参数时仅更新这些变量

我知道“冻结”可能不是很清楚，所以我创建了一个REPL.it，它显示了我的意思：。打开代码后，打开web浏览器控制台并开始单击

count

按钮

---

对于同一个变量，如果它们在同一个闭包下并引用同一个对象，那么外部的值与内部的值为什么会不同？我不熟悉React代码库，因此我想我在这里遗漏了一个幕后实现细节，但我试着思考如何在几分钟内发挥作用，但无法很好地理解React是如何实现这一点的。

第一次呈现组件时，

useCallback

钩子将把传递的函数作为其参数，并将其存储在后台。当您调用回调函数时，它将调用您的函数。到目前为止，一切顺利

第二次呈现组件时，

useCallback

hook将检查传入的依赖项。如果它们没有改变，你传递的函数将被完全忽略！当您调用回调时，它将调用在第一次渲染时传入的函数，该函数仍然引用来自该时间点的相同值。这与作为依赖项传入的值无关——这只是普通的JavaScript闭包

当依赖项发生变化时，

useCallback

hook将接受您传入的函数并替换它存储的函数。当您调用回调函数时，它将调用函数的新版本

换句话说，没有“冻结”/“有条件更新”的变量——它只是存储一个函数，然后重新使用它，没有什么比这更奇妙的了：）

编辑：下面是一个示例，演示纯JavaScript中的情况：

//React有一些组件本地存储，可以在后台跟踪。
//useState和useCallback都与此挂钩。
//
//假设您的每个实例都有一个“存储”变量
//组成部分。
常量存储={}；
函数useState（init）{
if（storage.data==未定义）{
storage.data=init；
}
返回[storage.data，（value）=>storage.data=value]；
}
函数useCallback（fn）{
//真正的版本会在这里检查依赖项，但是由于我们的回调
//应该只在第一次渲染时更新，这就足够了。
if（storage.callback==未定义）{
storage.callback=fn；
}
返回存储回调；
}
函数MyComponent（）{
const[data，setData]=useState（0）；
const callback=useCallback（（）=>data）；
//我们不输出DOM，而是记录日志。
日志（“数据：”，数据）；
log（“callback:，callback（））；
返回{
增加：（）=>setData（数据+1）
}
}
让实例=MyComponent（）；//让我们“渲染”我们的组件。。。
instance.rease（）；//这将触发重新渲染，因此我们再次调用组件。。。
实例=MyComponent（）；
instance.rease（）；//再一次。。。
实例=MyComponent（）所以，我关心的正是“在那个时间点上仍然引用相同的值”。为什么useCallback与此不同@埃德蒙多罗德里格斯：啊，我明白你的意思了——在你的例子中，
a
在你调用回调函数的两次调用中都从同一个范围引用同一个变量。在原始代码中，由于整个函数已在呈现时重新运行，
count
在回调内外引用了不同的变量。等一下，我会试着编一个更具代表性的例子。@EdmundoRodrigues:我添加了一个例子，在没有任何特定于React的代码的情况下演示正在发生的事情-希望它能有所帮助！啊，糟糕透了。我的全部困惑是因为我认为React实际上是在创建组件的“实例”。但在功能组件上似乎没有这样的东西。谢谢@Edmundordrigues：组件有一个“实例”，但当您使用功能组件/挂钩时，它只是在幕后进行管理，而不是作为
this
向您公开。实际上，您只需自己编写
render
方法，并告诉React为您处理其余部分：）