闭包分析

什么是闭包?

1.函数内部引用了外部(非当前函数)作用域的变量

2.并且这个函数在定义域之外被执行

function outer() { 
let count = 0; 
function inner() {
console.log(count); // 👈 这里访问了外部作用域的变量 } 
return inner; 
}
const fn = outer(); fn(); 
// 输出 0 inner被定义在outer内部，所以它可以访问outer的局部变量count 即使outer执行完了，它的变量依然没有被销毁 因为inner持有这个变量的引用 这种现象就是闭包 闭包用途: 模拟私有变量 创建带状态的工厂函数 闭包危害: 内部泄漏&性能 因为闭包会让函数作用域链不被销毁，所以如果滥用闭包，会导致: 变量一直保存在内存中，无法会垃圾系统回收 性能下降，调试困难

js中: 闭包指一个函数可以访问他定义时的作用域的变量，及时这个函数被放到别的地方执行

function outer() { 
let count = 0; 
return function inner() {
console.log(count); }; 
} 
const fn = outer(); // inner 函数"闭包"了 outer 的作用域 fn(); // 输出 0

RN中会有问题

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setTimeout(() => {
      alert(count); // 👈 注意这里！
    }, 1000);
  }

  return <button onClick={handleClick}>Click Me</button>;
}
当你点击按钮后，setTimeout 延迟执行 alert(count)，但这个 count 并不会因为你点击了按钮而更新为最新值，它“闭包”住了那个执行 handleClick 时的 count 值
假设点击时 count 是 0，即使 1 秒后 count 已经变成 5，弹窗依然是 0

不是这个函数之后再 render 时会更新里面的变量
而是它当时创建时，就定格了上下文
所以你之后即使 setState 了，它也看不到新的值

ahooks

import { useLatest } from 'ahooks';
function App() {
const [count, setCount] = useState(0);
const countRef = useLatest(count); // 👈 这就是关键 
function handleClick() { 
setTimeout(() => { alert(countRef.current); // ✅ 总是最新的值！ }, 1000);
} 
return <button onClick={handleClick}>Click Me</button>; }