超性感的React Hooks（二）再谈闭包

如果你一天没有真正理解它，你就应该继续学习它。

曾经我去找工作面试的时候，我最讨厌别人问我闭包，因为我说不清楚。现在我面试别人了，却又最爱问闭包，因为闭包真的能直接的检验你对JS的理解深度。可能够回答上来的人真的很少。

两年以来我面试过估计200多人，其中技术能力最强的是阿里P6的一个胖胖的哥们儿，这里简称PP。PP的JS基础很扎实，对React的理解比较深刻，其他问题上我们聊得很开心。可即使是这样的高手，在闭包的问题上也有些犯难，没有第一时间回答出来我想要的答案。

因此，如果有这么一篇两篇文章，能够帮助大家将闭包吃透，我觉得是一件非常了不起的事。在JS基础进阶系列中，我已经将闭包的基础，定义，特点，以及如何在chrome浏览器中观察闭包都一一跟大家分享了，这一篇就着眼于实践继续学习。

就以我和PP同学在面试过程中的对话为引子，对话内容大概如下：

我：能聊聊你对闭包的理解吗
PP：函数执行时访问上层作用域的变量，就能形成闭包，闭包可以持久化保持变量。

我：还有其他的吗？
PP：没了

我：我如果说闭包在我们的实践中几乎无处不在，你认同这样的说法吗？
PP（有点犹豫）：认同

我：那哪些场景有涉及到呢？
PP：一时想不起来。

我（不太甘心，继续引导）：模块化你应该知道吧，你认为模块和闭包有没有可能存在什么联系？
PP：没有

我：确定吗？
PP：确定没有！

OK，到这里，如果你是面试官，你觉得PP同学的回答怎么样？达到你的要求了吗？

当然，买过我书并且认真看过的同学应该知道，回答得并不让人满意。这里，我们结合React Hooks的实际情况，接着聊聊这个话题。

也许有的同学会比较奇怪，这系列文章明明就是介绍React Hooks，跟闭包有半毛钱的关系？

事实却相反，闭包，是React Hooks的核心。不理解闭包，React Hooks的使用就无法达到炉火纯青的地步。如果只是基于表面的去使用，看官方文档就可以了，这也不是我们这系列文章的目的。

在接着聊闭包与模块之间的联系之前，我们先来回顾几个的概念。

闭包是一个特殊的对象
它由两部分组成，执行上下文A以及在A中创建的函数B。

当B执行时，如果访问了A中的变量对象，那么闭包就会产生。

在大多数理解中，包括许多著名的书籍、文章里都以函数B的名字代指这里生成的闭包。而在chrome中，则以执行上下文A的函数名代指闭包。

许多地方喜欢用词法环境，或者词法作用域来定义闭包的概念，但是闭包是代码执行过程中才会产生的特殊对象，因此我认为使用执行上下文更为准确。当然，这并不影响闭包的理解与使用。

还有另外一个重要的知识点：

本质上，JavaScript中并没有自己的模块概念，我们只能使用函数/自执行函数来模拟模块。

现在的前端工程中（ES6的模块语法规范），使用的模块，本质上都是函数或者自执行函数。

webpack等打包工具会帮助我们将其打包成为函数

思考一下，定义一个React组件，并且在其他模块中使用，这和闭包有关系吗？来个简单的例子分析试试看。

在模块Counter.jsx中定义一个Counter组件

// Counter.jsx
export default function Counter() {
   }

然后在App模块中使用Counter组件

// App.jsx
import Counter from './Counter';
export default function App() {
   
 // todo
   return (
    <Counter />
  )
}

结合上面的几个知识点，基础扎实的同学到这里应该能够知道答案了，如果还没想明白，没关系，更详细一步。

上面的代码我们可以手动转换成伪代码

const CounterModule = (function() {
   
  return function Counter() {
   }
})()

const AppModule = (function() {
   
  const Counter = CounterModule;
  return function App() {