@
rodrick 源码陆陆续续看了好几遍,前面几遍都是半途而废因为太难啃,最近把之前零碎的知识点串起来了。看源码的方法主要依赖于 debug 调试和配合一套文章进行验证。然后其实我个人对于源码框架的观点是:先知道某个模块是为了什么功能,然后再去看具体实现。我自己是根据下面这个脉络来阅读源码的:
1. React 是怎么表示应用的?然后去找 Fiber 的相关心智模型了解一下
2. React 是怎么表示应用的更新的?
3. React 是怎么调度应用更新的?
4. React 是怎么对比更新的?这个是属于 diff 的流程
5. React 是怎么将 DOM 渲染到屏幕上的?
这几块内容我前几遍看的时候都是因为太抓细节,总想什么都明白所以导致太庞杂看不下去,后面慢慢先理清楚流程,比如先知道 React 其实就是在不停地去 workLoop 处理渲染流程,然后在细节深入中了解具体的实现比如:不同类型的 React Component 是怎么开启一次调度的?再会看见关于优先级模型就会去了解 Scheduler 、lane 模型。如此细节下来关注自己感兴趣的内容。但是现在我也只是对部分源码有个认知,能知道为什么会表现出一些特性。
还有包括说 webpack 源码,其实我没有全部阅读完源码,我只阅读了 tapable 和 webpack 的主干流程:就是用各种 plugin 去响应 hook ,然后了解一下整个 webpack 编译流程中会有哪些 hook 分别对应什么阶段,其实我认为这些表都没必要记,debug 或者做需求的时候我能够知道在哪个 hook 中去做插件实现就可以了。
我自己的博客里面写了一些关于我阅读源码学习源码的理解:
https://www.alanderpro.com/blogs/React%E6%BA%90%E7%A0%81%E7%AC%94%E8%AE%B0%E2%80%94%E2%80%94Scheduler%E5%A6%82%E4%BD%95%E4%BB%8B%E5%85%A5React%E7%9A%84%E6%9B%B4%E6%96%B0/ps:虽然我在我的文章中都在强调我不会过多去解释和贴源码,但是看到这里的人如果在自己学习过程中还是需要去自习阅读源码并知道实现的代码的,只有知道了具体细节才能帮助自己更好地抽象。