本文正在参加「 . 」
杭州已经不看健康码了，某种程度上来说YQ已经结束了，但某种程度上YQ又刚刚开始。无论是谁在这个冬天都要保护好自己，明年春暖花开的时候，肯定就是真正的春天到了
闲言少叙，开始正文
前言
上篇文章《都React V18了，还不会正确使用React Hooks吗，万字长文解析Hooks的常见问题》说到了React Hooks的一些常见问题，本文让我们继续深入react hooks，结合几个常见的面试题，从源码角度分析一下react hooks，从源码的角度回答一下这些问题。
本文的React源码基于最新的版本 V18.2.0
带着问题看源码
从React V16.8 发布以来 Hooks API 以来，社区出现了很多针对Hooks源码分析的文章。但是源码阅读本就是一个比较枯燥的事情，而且React源码也相对复杂，涉及了诸如Fiber、双缓冲之类相对不好整体理解的新概念，源码阅读起来没有那么顺畅。React Hooks又是面试会经常被问到的一个点，本文笔者不会长篇铺上代码，会结合几个面试中常见的问题，对 React Hooks 的源码进行分析，带着问题去分析源码，尽可能的使用更规范的答案，来回答这些面试题，同时对React Hooks源码有更深入的理解。
常见的React Hooks面试题
为什么可以在Function Component中使用使用私有状态
Function Component 和 Class Component 不同，Function Component 不能实例化，所有就不可以将私有状态挂在到实例上，组件每次重新渲染都会把Function重新执行一遍，函数内的变量就会重新初始化，这些状态在React内是怎么维护的呢
// 组件re-render的时候name，setName保存在哪里
const Comp = () => {
const [name, setName] = uesState('');
return <>{name}</>
}
问题分析
这个问题应该是所有人在使用hooks api的第一个疑惑，为什么React Function Component 每次渲染之后都能返回的之前的值，毋庸置疑的是React 肯定通过某种机制记录下来了更新操作，并将其结果记录并返回给下一次渲染了。但是这些状态记录在哪里了呢？这里先卖个关子，先看看下一个React Hooks的问题
为什么不要在循环，条件或嵌套函数中调用hooks
React官方文档中明确说明了这条Hooks调用顺序的限制
不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用Hooks
假如我们这样使用了就会遇到eslint的提醒，比如下面的