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…