闭包是框架底层自然依赖的语言机制,react hooks靠它捕获每次渲染的状态快照,vue响应式通过getter/setter闭包封装dep实现依赖追踪,redux toolkit用闭包锁定initialstate与reducers,node模块系统亦以闭包隔离作用域。

闭包在主流 JavaScript 框架源码中不是“被刻意使用”的技巧,而是语言机制自然浮现的结果——框架开发者依赖它实现状态隔离、作用域封装和上下文保持。它藏在底层设计里,不显山露水,但缺之不可。
React 中的 Hook 闭包捕获
React 的 useState 和 useEffect 本质依赖闭包维持组件每次渲染的独立状态快照。
- 每次函数组件执行,都会重新声明局部变量(如
count);setState返回的更新函数通过闭包“记住”该次渲染时的变量引用 -
useEffect的回调函数会捕获其定义时的 props/state,形成闭包。这就是为什么不加依赖数组时,回调里读到的往往是初始值——它闭包的是首次渲染的作用域 - 源码中(如
ReactFiberHooks.js),每个 hook 节点都持有对当前渲染上下文的闭包引用,确保调度器触发更新时能正确还原环境
Vue 响应式系统中的 getter/setter 闭包
Vue 2 的 Object.defineProperty 和 Vue 3 的 Proxy handler 都大量利用闭包封装依赖收集逻辑。
- 在
defineReactive(Vue 2)或createGetter(Vue 3)中,每个响应式属性的 getter 内部闭包了dep(依赖对象)和key等元信息 - 这样,当模板中访问
vm.message时,getter 执行就能自动将当前Watcher或effect添加进该dep,而无需全局查找或传参 - 闭包让每个响应式字段自带“上下文记忆”,是实现细粒度依赖追踪的关键基础设施
Redux Toolkit 的 createSlice 与 immer 闭包封装
createSlice 生成 reducer 时,内部用闭包把 initialState 和 reducers 映射表“锁住”,保证每个 slice 独立。
- 返回的 reducer 函数本身就是一个闭包:它不直接接收 initialState 参数,而是从外层作用域捕获已冻结的初始状态
- 配合 Immer 的
produce,内部的 draft 操作也依赖闭包保存临时代理状态,避免污染原始 state - 这种结构让 slice 可复用、可测试,且天然支持模块化——闭包就是它的私有命名空间
Node.js 模块系统(CommonJS)的 module.exports 闭包
虽然不属于前端框架,但 Node.js 是几乎所有现代 JS 框架的运行基础。它的模块加载机制本质是闭包驱动的。
- 每个
.js文件被包裹在函数中:(function(exports, require, module, __filename, __dirname) { ... }) - 这个包装函数创建了独立作用域,所有
var/let声明都成为闭包变量,对外仅暴露module.exports - 框架(如 Express、NestJS)的中间件链、装饰器、注入容器等高级能力,都建立在这个闭包隔离的模块沙箱之上
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











