我们走进this.updater.enqueueSetState 这个调用，就来到了 ReactFiberClassComponent 这个函数中的 enqueueSetState，这里调用了 enqueueUpdate 和 scheduleWork 两个函数，如果要深入 setState 之后的流程，我们只需要再点击 走进这两个函数里看具体的代码就可以了 。
如果想看 setState 之前发生了什么，我们只需要看 Devtool 右边的调用栈：
点击每一个 frame 就可以跳到对应的函数中，并且恢复当时的上下文 。
结合一步一步的代码调试，我们可以看到框架的函数调用栈 。对于每个重要的函数，我们可以在仓库里搜索到源码，进一步研究 。
Node 工具的调试方法也是相似的，我们可以在运行 node 命令时加上 –inspect 参数 。
其实大家都知道单步调试这种办法，但在哪里打断点才是最关键的 。我们在熟悉框架的原理之后，就可以在框架的关键链路上打断点，比如前端 View 层框架的声明周期钩子和 render 方法，Node 工具的插件函数，这些代码都是框架运行的必经之地，是不错的切入点 。
如果是为了了解一个特定的问题，大家可以直接在自己觉得有问题的地方打断点 。然后把源码运行起来，想办法让代码运行到那个地方 。我们在断点可以看到局部变量等等信息，有助于定位问题 。
来自开发团队的资源
其实开源项目的开发团队也都致力于让更多的人参与到项目中来，降低项目的门槛 。所以我们在线上其实可以找到很多来自开发团队的资源 。这些资源可以帮助我们去理解项目的原理 。
关注核心开发者
每个项目都有一些核心开发者，比如 React 的 Dan Abramov, Andrew Clark 和 Sebastian Markb?ge 。Webpack 的 Tobias Koppers 和 Sean Larkin 。Vue 的 Evan You 。我们可以在 Twitter 上关注他们，了解项目的动态 。
关注官方博客和演讲视频
如果我们关注了上面的核心开发者，就会发现他们时常会发布一些和源码/项目原理有关的博客或者视频 。
React 的官方博客最近就有很多和项目开发有关的博客 。
Behind the Scenes: Improving the Repository Infrastructure 这篇介绍的是 React 项目仓库的基础设施 。Sneak Peek: Beyond React 16Andrew Clark 一开始就写了一篇介绍 fiber 架构的文档 。Dan Abramov 最近在 JSConf 上对 React 未来的一些新特性的介绍 – Beyond React 16 。React 博客中的 Sneak Peek: Beyond React 16 也是对这次 Talk 的介绍 。
Evan You 介绍前端框架数据变化侦测原理的 Talk 。Vue 文档中也有 Reactivity in Depth 这样的介绍原理的章节 。
Sean Larkin 的 Everything is a plugin! Mastering webpack from the inside out 介绍了 Webpack 的核心组件 Tapable 。
James Kyle 的 How to Build a Compiler 可以让我们了解 Babel 转译代码的基本流程 。
写在最后
本文最核心的观点就是，看源码的目的是为了解决问题 。我们鼓励大家在本地把大型项目的源码跑起来，自己随意把玩，研究 。因为源码也是普通的代码，并没有太多门槛 。唯一的门槛可能就来源于开源项目作者和普通开发者之间的信息不对称，普通开发者对项目的原理和目录结构不够了解 。
我们可以从开发者那里获取资源，同时也可以多阅读社区里的源码分析文章，这些都有助于我们理解项目的原理，为后续的源码分析打下基础 。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

• 苹果手机备份短信的软件 ipone短信怎么多选删除
• 条形码扫描器在线使用 二维码扫描在线识别
• 舍我其谁全集免费观看,舍我其谁在线观看平台链接分享
• 教你用mac命令行查看内存 mac查看内存使用情况
• 1-16集 《云南虫谷》无删减电视剧免费在线播放 高清
• htc手机所有型号图片 htc那一款好用
• 家用摄像头监控价格表 「连手机的监控摄像头价格」
• iPhone13发布在即，旧款苹果手机重回低价 苹果13手机价格和图片
• 苹果手机价格跳水！深圳华强北iPhone 12直降超千元 苹果13手机价格和图片
• 关于发布日期、价格、规格等的激动人心的传闻 苹果13手机价格和图片