React源码解析
前言
距离第一篇《React源码解析(一)》已经过去将近4个月的时间,由于是我第一次进行源码解析相关的写作,思路和文笔还不够成熟。一百多天以来,我基于读者反馈反思这几篇文章中的不足,同时也在不断学习借鉴其他优秀作者的写作方法和写作思路。最终总结出对于自己的源码写作来说,需要改进的几点:
问题
1.示例代码太多
这可能是源码解析写作的通病吧。其实大多数人从vue和react这样框架的生命周期API就可以大致猜出内部流程是什么,示例代码太多反而会产生枯燥感,而且部分示例代码又长又臭,甚至不得不加上大段的注释,严重降低了阅读体验。
2.解析流水账
既然代码是给计算机看的流水账,那解析就不能再是给人看的流水账。对于源码解析来说,最大的误区是去弄懂每一行甚至每一个变量的意义,而这最终会导致事倍功半。所以源码解析应以高屋建瓴的意识去写作,而不是钻牛角尖,或者像和尚念经一样干干巴巴,逐字逐句地阐述。
3.缺乏提炼
我们初高中上语文课的时候,总会被问到这篇文章的中心思想是什么。同样,写完源码解析和读完源码解析,作者和读者收获了什么?很多源码解析文章并没有告诉我们,读者读完好像明白了点什么又好像没明白,一脸茫然。
针对以上三个问题,结合已有的《React源码解析》系列,我做出了如下改进:
改进
1.减少示例代码,尽可能使用语言概括和图形表达
人对图形的接受和理解度远远高于对语言的处理和理解,这也是为什么《图解HTTP》等系列书籍畅销全世界的原因。新的《React源码解析》去掉了许多无用代码和语言描述,改为使用思维导图或流程图,提升阅读体验,降低理解难度。当然,对于源码中重要的段落依然需要展示。
2.美化文章排版
在进行必要的代码示例时,如果代码较长,那么无论使用掘金编辑器还是代码截图,最后实际的阅读体验并不好,尤其在手机上时这一点更为明显。新的《React源码解析》将采用carbon展示代码。
3.思想提炼
阅读源码的最终作用并不是为了再造一个vue/react,而是借鉴其中的思想和方法,应用到实际业务中去,最终提升我们编程的能力。新的《React源码解析》将在每一篇文章的结尾阐述是什么和为什么,使读者读完有所收获,不会似懂非懂甚至白白浪费宝贵的时间。
3.总结
新的《React源码解析》依旧分为四篇,分别阐述React中重要的概念,目录如下:
思维导图如下图(在mac下查看效果最好):
四篇文章对导图的每个部分都做了详细的说明。如有欠妥之处,欢迎读者朋友们不吝指正和讨论,共同学习进步。
作者:ssssyoki
链接:https://juejin.im/post/5a84682ef265da4e83266cc4
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- 基于协同过滤的旅游推荐系统设计与实现(论文+源码)_kaic
- 基于web特产店销售管理系统的设计与实现(论文+源码)_kaic
- ReentrantLock源码(二)
- Mybaits 源码解析 (二)----- 根据配置文件创建SqlSessionFactory(Configuration的创建过程)
- 详解SpringBoot集成jsp(附源码)+遇到的坑
- 3-4-迷宫寻路-栈和队列-第3章-《数据结构》课本源码-严蔚敏吴伟民版
- 统计php源码行
- 《Spark商业案例与性能调优实战100课》第34课:彻底解密Spark 2.1.X中Shuffle 中SortShuffleWriter排序源码内幕解密
- 从源码层面深度剖析Spring循环依赖
- canal 源码解析系列-sink模块解析
- 使用 TypeScript + React + Redux 进行项目开发(入门篇,附源码)
- 【React源码解读】- 组件的实现
- React 源码分析
- React源码分析(一)-调用ReactDOM.render后发生了什么
- React Redux: 从文档看源码 - Utils篇
- 从路由原理出发,深入阅读理解react-router 4.0的源码