前言
距离第一篇 React 源码解析 (一) 已经过去将近 4 个月的时间, 由于是我第一次进行源码解析相关的写作, 思路和文笔还不够成熟一百多天以来, 我基于读者反馈反思这几篇文章中的不足, 同时也在不断学习借鉴其他优秀作者的写作方法和写作思路最终总结出对于自己的源码写作来说, 需要改进的几点:
问题
1. 示例代码太多
这可能是源码解析写作的通病吧其实大多数人从 vue 和 react 这样框架的生命周期 API 就可以大致猜出内部流程是什么, 示例代码太多反而会产生枯燥感, 而且部分示例代码又长又臭, 甚至不得不加上大段的注释, 严重降低了阅读体验
2. 解析流水账
既然代码是给计算机看的流水账, 那解析就不能再是给人看的流水账对于源码解析来说, 最大的误区是去弄懂每一行甚至每一个变量的意义, 而这最终会导致事倍功半所以源码解析应以高屋建瓴的意识去写作, 而不是钻牛角尖, 或者像和尚念经一样干干巴巴, 逐字逐句地阐述
3. 缺乏提炼
我们初高中上语文课的时候, 总会被问到这篇文章的中心思想是什么同样, 写完源码解析和读完源码解析, 作者和读者收获了什么? 很多源码解析文章并没有告诉我们, 读者读完好像明白了点什么又好像没明白, 一脸茫然
针对以上三个问题, 结合已有的 React 源码解析系列, 我做出了如下改进:
改进
1. 减少示例代码, 尽可能使用语言概括和图形表达
人对图形的接受和理解度远远高于对语言的处理和理解, 这也是为什么图解 HTTP 等系列书籍畅销全世界的原因新的 React 源码解析去掉了许多无用代码和语言描述, 改为使用思维导图或流程图, 提升阅读体验, 降低理解难度当然, 对于源码中重要的段落依然需要展示
2. 美化文章排版
在进行必要的代码示例时, 如果代码较长, 那么无论使用掘金编辑器还是代码截图, 最后实际的阅读体验并不好, 尤其在手机上时这一点更为明显新的 React 源码解析将采用 carbon 展示代码
3. 思想提炼
阅读源码的最终作用并不是为了再造一个 vue/react, 而是借鉴其中的思想和方法, 应用到实际业务中去, 最终提升我们编程的能力新的 React 源码解析将在每一篇文章的结尾阐述是什么和为什么, 使读者读完有所收获, 不会似懂非懂甚至白白浪费宝贵的时间
3. 总结
新的 React 源码解析依旧分为四篇, 分别阐述 React 中重要的概念, 目录如下:
React 源码解析(一): 组件的实现与挂载
React 源码解析(二): 组件的类型与生命周期
React 源码解析(三): 详解事务与队列
React 源码解析(四): 事件系统
思维导图如下图(在 mac 下查看效果最好):
四篇文章对导图的每个部分都做了详细的说明如有欠妥之处, 欢迎读者朋友们不吝指正和讨论, 共同学习进步
来源: https://juejin.im/post/5a84682ef265da4e83266cc4