hello 大家好，我是 superZidan，这篇文章想跟大家聊聊 React 中的闭包 这个话题，如果大家遇到任何问题，欢送 分割我
JavaScript 中的闭包肯定是最可怕的个性之一。 即便是无所不知的 ChatGPT 也会通知你这一点。 它也可能是最隐秘的语言概念之一。 每次编写任何 React 代码时，咱们都会用到它，大多数时候咱们甚至没有意识到。 但最终还是无奈解脱它们：如果咱们想编写简单且高性能的 React 应用程序，咱们就必须理解闭包。
因而，让咱们深入研究它，并在此过程中学习以下内容：
- 什么是闭包，它们是怎么呈现的，为什么咱们须要它们
- 什么是过期闭包，为什么它们会呈现
- React 中哪些常见的场景会导致过期闭包，以及如何应答它们
正告：如果你从未解决过 React 中的闭包，这篇文章可能会让你的大脑爆炸。 当你浏览本文时，请确保随身携带足够的巧克力来刺激脑细胞。
问题呈现
设想一下你正在实现一个带有几个输入框的表单。 其中一个字段是来自某些内部库的十分重的组件。 你没有方法理解其内部结构，因而无奈修复其性能问题。 但你的表单中的确须要它，因而你决定将其包装在 React.memo 中，以在表单中的状态发生变化时最大水平地缩小从新渲染的频率。 像这样：
const HeavyComponentMemo = React.memo(HeavyComponent); const Form = () => { const [value, setValue] = useState(); return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo /> </> ); };到目前为止，所有都很好。 这个「十分重」的组件只接管一个字符串属性（比方 title）和一个 onClick 回调函数。 当单击这个组件内的 “实现” 按钮时会触发此回调函数。 并且心愿在产生此单击时提交表单数据。 也很简略：只需将题目和 onClick 属性传递给它即可。
const HeavyComponentMemo = React.memo(HeavyComponent); const Form = () => { const [value, setValue] = useState(); const onClick = () => { // 在这里提交表单数据 console.log(value); }; return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo title="Welcome to the form" onClick={onClick} /> </> ); };当初你将面临两难地步。 家喻户晓，React.memo 中包装的组件上的每个 prop 都须要是原始值或在从新渲染之间放弃不变。 否则，记忆缓存将不起作用。 因而从技术上讲，咱们须要将 onClick 包装在 useCallback 中：
const onClick = useCallback(() => { // 在这里提交表单数据 }, []);而且，咱们晓得 useCallback 这个 hook 应该在其依赖项数组中申明所有依赖项。 因而，如果咱们想在外部提交表单数据，咱们必须将该数据申明为依赖项：
const onClick = useCallback(() => { // 在这里提交表单数据 console.log(value); // 增加数据作为依赖项 }, [value]);这就是一个窘境：只管咱们的 onClick 被记忆缓存了，但每次有人在输入框中输出时它依然会发生变化。 所以咱们的性能优化是没有用的。
好吧，让咱们寻找其余解决方案。 React.memo 有一个叫做 comparison function 的货色。它容许咱们更精密地管制 React.memo 中的 props 比拟。通常，React 会自行将所有 “上一次更新”的 props 与所有 “下一次更新” props 进行比拟。 如果咱们应用了这个函数，它将依赖于它的返回后果。 如果它返回 true，那么 React 就会晓得 props 是雷同的，并且组件不应该被从新渲染。 这听起来正是咱们所须要的
咱们只关怀更新一个 props，即咱们的 title，所以它不会那么简单：
const HeavyComponentMemo = React.memo( HeavyComponent, (before, after) => { return before.title === after.title; }, );整个表单的代码将如下所示
const HeavyComponentMemo = React.memo( HeavyComponent, (before, after) => { return before.title === after.title; }, ); const Form = () => { const [value, setValue] = useState(); const onClick = () => { // 在这里提交表单数据 console.log(value); }; return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo title="Welcome to the form" onClick={onClick} /> </> ); };胜利了！ 咱们在输出了一些内容，这个「十分重」的组件不会从新渲染，并且性能不会受到影响。
然而有一个小问题：它实际上并没有胜利。 如果你在输出某些内容，而后按下该按钮，则咱们在 onClick 中打印的 value 是 undefined 。 但它不能是undefined 的，然而如果我在 onClick 之外增加 console.log ，它会正确打印它。 在 onClick 外部则不正确。
这是怎么回事呢？
这就是所谓的“过期闭包”问题。 为了解决这个问题，咱们首先须要深入研究 JavaScript 中最令人恐怖的主题：闭包及其工作原理。
JavaScipt，作用域，闭包
让咱们从函数和变量开始。 当咱们在 JavaScript 中通过一般申明或箭头函数申明函数时会产生什么
function something() { // } const something = () => {};通过这样做，咱们创立了一个部分作用域：代码中的一个作用域，其中申明的变量在内部是不可见的。
const something = () => { const value = 'text'; }; console.log(value); // 不起作用，value 是 something 函数的外部变量每次咱们创立函数时都会产生这种状况。 在另一个函数外部创立的函数将具备本人的部分作用域，对于内部函数不可见
const something = () => { const inside = () => { const value = 'text'; }; console.log(value); // 不起作用，value 是 inside 函数的外部变量 };然而如果反过来，这是一条可行的路线。 最外面的函数将能「看到」内部申明的所有变量
const something = () => { const value = 'text'; const inside = () => { // 十分好，value 能够在这里拜访到 console.log(value); }; };这是通过创立所谓的「闭包」来实现的。 外部函数「敞开」来自内部的所有数据。 它实质上是所有「内部」数据的快照，这些数据会被及时解冻并独自存储在内存中。
如果我不是在 something 函数内创立 value，而是将其作为参数传递并返回inside 函数：
const something = (value) => { const inside = () => { // 十分好，value 能够在这里拜访到 console.log(value); }; return inside; };咱们会失去这样的行为：
const first = something('first'); const second = something('second'); first(); // 打印 "first" second(); // 打印 "second"咱们用字符串 “first” 作为参数调用 something 函数，并将后果赋值给了一个变量。 该变量则是对外部申明的函数的援用。 造成闭合。 从当初开始，只有保留该援用的 first 变量存在，咱们传递给它的字符串“first”就会被解冻，并且外部函数将能够拜访它
第二次调用也是同样的状况：咱们传递一个不同的值，造成一个闭包，并且返回的函数将永远能够拜访该变量。
对于在 something 函数内本地申明的任何变量都是如此：
const something = (value) => { const r = Math.random(); const inside = () => { // ... console.log(r) }; return inside; }; const first = something('first'); const second = something('second'); first(); // 打印一个随机数 second(); // 打印另外一个随机数这就像拍摄一些动静场景的照片：只有按下按钮，整个场景就会永远“解冻”在照片中。 下次按下该按钮不会扭转之前拍摄的照片中的任何内容。
在 React 中，咱们始终在创立闭包，甚至没有意识到。 组件内申明的每个回调函数都是一个闭包：
const Component = () => { const onClick = () => { // 闭包！ }; return <button onClick={onClick} />; };所有在 useEffect 或者 useCallback 中的都是闭包
const Component = () => { const onClick = useCallback(() => { // 闭包！ }); useEffect(() => { // 闭包！ }); };所有闭包都能够拜访组件中申明的 state、props 和局部变量：
const Component = () => { const [state, setState] = useState(); const onClick = useCallback(() => { // 没问题 console.log(state); }); useEffect(() => { // 没问题 console.log(state); });组件内的每个函数都是一个闭包，因为组件自身只是一个函数。
过期闭包问题
以上所有内容，即便你之前没有接触过太多闭包的概念，依然绝对简略。 你创立几个函数几次，它就会变得很天然。 很多年来，应用 React 编写应用程序甚至都不须要了解“闭包”的概念。
那么问题出在哪里呢？ 为什么闭包是 JavaScript 中最可怕的事件之一，也是许多开发人员的苦楚之源？
这是因为只有闭包函数的援用存在，闭包就存在。 对函数的援用只是一个能够赋值给任何货色的值。 让咱们略微动动脑子。 这是下面咱们的函数，它返回一个闭包：
const something = (value) => { const inside = () => { console.log(value); }; return inside; };然而 inside 函数会随着每次 something 调用而从新创立。 如果我决定重构它并缓存它，会产生什么？ 像这样：
const cache = {}; const something = (value) => { if (!cache.current) { cache.current = () => { console.log(value); }; } return cache.current; };外表上看，这个代码仿佛没什么问题。 咱们刚刚创立了一个名为 cache 的内部变量，并将外部函数赋值给 cache.current 属性。 当初，咱们只需返回已保留的值，而不是每次都从新创立该函数。
然而，如果咱们尝试调用它几次，咱们会看到一个奇怪的事件：
const first = something('first'); const second = something('second'); const third = something('third'); first(); // 打印 "first" second(); // 打印 "first" third(); // 打印 "first"无论咱们应用不同的参数调用 something 函数多少次，打印的值始终是第一个！
为了修复此行为，咱们心愿在每次入参发生变化时从新创立该函数及其闭包。 像这样：
const cache = {}; let prevValue; const something = (value) => { // 查看值是否扭转 if (!cache.current || value !== prevValue) { cache.current = () => { console.log(value); }; } // 更新它 prevValue = value; return cache.current; };将值保留在变量中，以便咱们能够将下一个入参加前一个入参进行比拟。 如果变量产生了变动，则更新 cache.current 闭包
当初它将正确打印变量，如果咱们比拟具备雷同入参的函数，则将返回 true：
const first = something('first'); const anotherFirst = something('first'); const second = something('second'); first(); // 打印 "first" second(); // 打印 "second" console.log(first === anotherFirst); // 返回 trueuseCallback中的过期闭包
咱们刚刚实现了简直齐全一样的 useCallback hook 为咱们所做的事件！ 每次咱们应用 useCallback 时，咱们都会创立一个闭包，并且咱们传递给它的函数会被缓存：
// 该内联函数的缓存与之前的局部完全相同const onClick = useCallback(() => {}, []);如果咱们须要拜访此函数内的 state 或 props，咱们须要将它们增加到依赖项数组中：
const Component = () => { const [state, setState] = useState(); const onClick = useCallback(() => { // 拜访外部 state console.log(state); // 须要增加到依赖数组外面 }, [state]); };这个依赖数组使得 React 刷新缓存的闭包，就像咱们比拟 value !== prevValue 时所做的那样。 如果我遗记填这个数组，咱们的闭包就会变得过期：
const Component = () => { const [state, setState] = useState(); const onClick = useCallback(() => { // state 将永远都是初始值 // 闭包永远不会刷新 console.log(state); // 遗记写依赖数组 }, []); };每次触发这个回调函数，都会打印 undefined
Refs 中的过期闭包
在 useCallback 和 useMemo hook 之后，引入过期闭包问题的第二个最常见的办法是 Refs
如果我尝试对 onClick 回调函数应用 Ref 而不是 useCallback hook，会产生什么状况？ 有时，网上的文章倡议这样做来缓存组件上的 props。 从外表上看，它的确看起来更简略：只需将一个函数传递给 useRef 并通过 ref.current 拜访它。 没有依赖，也不必放心。
const Component = () => { const ref = useRef(() => { // 点击回调 }); // ref.current 存储了函数 return <HeavyComponent onClick={ref.current} />; };然而。 组件内的每个函数都会造成一个闭包，包含咱们传递给 useRef 的函数。 咱们的 ref 在创立时只会初始化一次，并且不会自行更新。 这基本上就是咱们一开始创立的逻辑。 只是咱们传递的不是 value，而是咱们想要保留的函数。 像这样：
const ref = {}; const useRef = (callback) => { if (!ref.current) { ref.current = callback; } return ref.current; };因而，在这种状况下，在刚载入组件时一开始造成的闭包将被保留并且永远不会刷新。 当咱们尝试拜访存储在 Ref 中的函数内的 state 或 props 时，咱们只会取得它们的初始值：
const Component = ({ someProp }) => { const [state, setState] = useState(); const ref = useRef(() => { // 所有都会被缓存并且永远不会扭转 console.log(someProp); console.log(state); }); };为了解决这个问题，咱们须要确保每次尝试拜访外部内容发生变化时都会更新该援用值。 实质上，咱们须要实现 useCallback hook 中依赖数组所做的事件
const Component = ({ someProp }) => { // 初始化 ref - 创立闭包 const ref = useRef(() => { // 所有都会被缓存并且永远不会扭转 console.log(someProp); console.log(state); }); useEffect(() => { // 当 state 或者 props 更新时，及时更新闭包 ref.current = () => { console.log(someProp); console.log(state); }; }, [state, someProp]); };React.memo 中的过期闭包
最初，咱们回到文章的结尾以及引发这所有的谜团。 咱们再看一下有问题的代码：
const HeavyComponentMemo = React.memo( HeavyComponent, (before, after) => { return before.title === after.title; }, ); const Form = () => { const [value, setValue] = useState(); const onClick = () => { // submit our form data here console.log(value); }; return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo title="Welcome to the form" onClick={onClick} /> </> ); };每次咱们单击按钮时，咱们都会记录 “undefined”。 onClick 中咱们的 value 永远不会更新。 当初你能说出起因吗
当然，这又是一个过期的闭包。 当咱们创立 onClick 时，首先应用默认 state 值（即“ undefined ”）造成闭包。 咱们将该闭包与 title 属性一起传递给咱们的记忆组件。 在比拟函数中，咱们仅比拟题目。 它永远不会扭转，它只是一个字符串。 比拟函数始终返回 true，HeavyComponent 永远不会更新，因而它保留对第一个 onClick 闭包的援用，并具备解冻的 “undefined” 值。
既然咱们晓得了问题所在，那么咱们该如何解决呢？ 这里说起来容易做起来难……
现实状况下，咱们应该在比拟函数中比拟每个 prop，因而咱们须要在其中蕴含 onClick：
(before, after) => { return ( before.title === after.title && before.onClick === after.onClick ); };然而，在这种状况下，这意味着咱们只是从新实现 React 默认行为，并齐全执行没有比拟函数的 React.memo 的操作。 所以咱们能够放弃它，只将其保留为 React.memo(HeavyComponent)。
但这样做意味着咱们须要将 onClick 包装在 useCallback 中。 但这取决于 state，因而它会随着每次击键而扭转。 咱们回到了第一点：咱们的「重组件」将在每次状态变动时从新渲染，这正是咱们试图防止的。
咱们能够尝试组合并尝试提取和隔离 state 或者是 HeavyComponent。 但这并不容易：输出和 HeavyComponent 都依赖于该 state。
咱们能够尝试很多其余的事件。 但咱们不须要进行任何大量的重构来解脱闭包陷阱。 有一个很酷的技巧能够在这里帮忙咱们。
应用 Refs 逃离闭包陷阱
这个技巧相对令人兴奋：它非常简单，但它能够永远扭转你在 React 中记忆函数的形式。 或者兴许没有……无论如何，它可能有用，所以让咱们深入研究它。
当初让咱们去掉 React.memo 和 onClick 中的比拟函数。 只是一个带有 state 和记忆的 HeavyComponent 的纯组件：
const HeavyComponentMemo = React.memo(HeavyComponent); const Form = () => { const [value, setValue] = useState(); return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo title="Welcome to the form" onClick={...} /> </> ); }当初咱们须要增加一个 onClick 函数，该函数在从新渲染之间保持稳定，但也能够拜访最新状态而无需从新创立本身。
咱们将把它存储在 Ref 中，所以让咱们增加它。 临时为空：
const Form = () => { const [value, setValue] = useState(); // 增加一个空的 ref const ref = useRef(); };为了使函数可能拜访最新状态，须要在每次从新渲染时从新创立它。 这是无奈回避的，这是闭包的实质，与 React 无关。 咱们应该在 useEffect 中批改 Refs，而不是间接在渲染中批改，所以让咱们这样做
const Form = () => { const [value, setValue] = useState(); // 增加一个空的 ref const ref = useRef(); useEffect(() => { // 咱们须要去触发的回调函数 // 带上 state ref.current = () => { console.log(value); }; // 没有依赖数组 }); };不带依赖数组的 useEffect 将在每次从新渲染时触发。 这正是咱们想要的。 所以当初咱们的 ref.current 中，咱们有一个每次从新渲染都会从新创立的闭包，因而记录的状态始终是最新的。
但咱们不能只是将 ref.current 传递给记忆组件。 每次从新渲染时该值都会有所不同，因而缓存记忆是行不通的。
const Form = () => { const ref = useRef(); useEffect(() => { ref.current = () => { console.log(value); }; }); return ( <> {/* 不能这么做, 将会击穿缓存，让记忆生效 */} <HeavyComponentMemo onClick={ref.current} /> </> ); };因而，咱们创立一个封装在 useCallback 中的小的空函数，并且不依赖它。
const Form = () => { const ref = useRef(); useEffect(() => { ref.current = () => { console.log(value); }; }); const onClick = useCallback(() => { // 依赖是空的，所以函数永远不会扭转 }, []); return ( <> {/* 当初缓存失效了, onClick 永远不会扭转 */} <HeavyComponentMemo onClick={onClick} /> </> ); };当初，缓存记忆性能完满地起作用了—— onClick 永远不会扭转。 但有一个问题：它什么也不做。
这是一个魔术：让它工作所需的只是在该记忆回调函数中调用 ref.current ：
useEffect(() => { ref.current = () => { console.log(value); }; }); const onClick = useCallback(() => { // 在这里调用 ref ref.current(); // 仍然是空的依赖数组! }, []);请留神 ref 为何不在 useCallback 的依赖项中？ 没必要这样。 ref 自身永远不会扭转。 它仅仅是 useRef hook 返回的可变对象的援用。
然而，当闭包解冻其四周的所有内容时，它不会使对象变得不可变或解冻。 对象存储在内存的不同局部，多个变量能够蕴含对完全相同对象的援用。
const a = { value: 'one' }; // b 是不同的变量，指向雷同的对象 const b = a;如果我通过其中一个援用扭转对象，而后通过另一个援用拜访它，则更改将能够失效：
a.value = 'two'; console.log(b.value); // 失效了，打印 "two"例子中，咱们在 useCallback 和 useEffect 中有完全相同的援用。 因而，当咱们扭转 useEffect 中ref 对象的以后属性时，咱们能够在 useCallback 中拜访该确切属性。 这个属性恰好是一个捕捉最新状态数据的闭包。
残缺的代码如下所示：
const Form = () => { const [value, setValue] = useState(); const ref = useRef(); useEffect(() => { ref.current = () => { // 最新的值 console.log(value); }; }); const onClick = useCallback(() => { // 最新的值 ref.current?.(); }, []); return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo title="Welcome closures" onClick={onClick} /> </> ); };当初，咱们领有了两败俱伤的长处：重组件已被正确记忆缓存，并且不会随着每次状态更改而从新渲染。 它的 onClick 回调能够拜访组件中的最新数据，而不会击穿缓存。 当初能够平安地将咱们须要的所有发送到后端了！
总结
心愿所有这些都是有意义的，并且当初闭包对你来说很容易。 在你开始编码之前，请记住有敞开包的注意事项：
- 每次在一个函数内创立另一个函数时都会造成闭包
- 因为 React 组件只是函数，因而外部创立的每个函数都会造成一个闭包，包含
useCallback和useRef等 hook - 当调用造成闭包的函数时，它四周的所有数据都被“解冻”，就像快照一样。
- 要更新该数据，咱们须要从新创立“敞开”函数。 这就是
useCallback等 hook 的依赖项容许咱们做的事件 - 如果咱们错过了依赖项，或者不刷新调配给
ref.current的敞开函数，则闭包将变得“过期”。 - 咱们能够利用 Ref 是一个可变对象这一状况来逃离 React 中的“过期闭包”陷阱。 咱们能够在过期闭包之外扭转
ref.current，而后在外部拜访它。 将会是最新的数据。
感谢您的观看，如果您对本篇文章有任何的意见或倡议，欢送关注我或者给我留言
本文为翻译文，原文地址：https://medium.com/@adevnadia/fantastic-closures-and-how-to-f...