写点什么

好好学 react 源码然后惊艳所有人

作者:全栈潇晨
  • 2021 年 12 月 08 日
  • 本文字数:1956 字

    阅读完需:约 6 分钟

好好学react源码然后惊艳所有人

好好学 react 源码然后惊艳所有人

hello,这里是潇晨,今天我们来聊聊react源码,作为使用react多年的前端工程师,我们是否还在使用着各种应用层面的库、框架呢,是否在面试过程中遇到一些关于react源码方面的问题呢,如果是,那么是否尝试过去看看react底层运行逻辑呢?

为什么要学 react 源码?

  1. 成为高级或资深前端工程师的必备条件:作为前端工程师,如果不满足只停留在应用层面的开发,或者想成为高级或资深前端工程师,那熟悉远吗将是一个很必要的能力,为什么这么说呢,react作为前端经常要用到的库,响应式jsx声明、virtual-domdiff算法、fiber调度、current-mode等思想已经成为了构建前端快速响应页面的一种行之有效的思想。有些同学会说,底层源码我日常开发中用不到啊,确实,如果只是满足复制黏贴,或者构建简单的页面,用一些社区已经有的库,确实没必要,但是我们是新一代有理想有志气的年轻人呐,而且要想在职业生涯走的更远,只停留在使用层面,我们的竞争力会大打折扣,就算是为了提升技能或者提升薪资,这也是我们必须要想学习的一项能力。

  2. 面试的需要:现在 1 年以上的前端岗基本都开始要求熟悉一个经常用到的库、或者框架的源码,如果你日常开发中react用的比较多的话,那熟悉react源码对你的面试来说肯定是一个加分项,如果能将react中各个模块的运行机制、以及它们是怎样配合工作的结合起来,加上一些开发过程中遇到的问题,然后通过阅读源码有了新的认识,肯定会让面试官刮目相看。

  3. 提升日常开发技能的需要:日常开发中虽然我们不会直接接触源码,但是组件的性能优化、调试某些渲染过程中 bug,或者和react相关的升级,以及它的设计思想,这些都是需要从源码层面来理解或者解决的,就像盖房子一样,没有稳固的基础或者底层逻辑,怎么能盖好上层建筑呢。

react 源码难学吗?

​ 当然难学,react从 15 版本到现在 17 版本,很快 18 版本也快出来了,中间的迭代一直没停,虽然你可能觉得它的 api 没太多变化,但是它的内部却经历着翻天覆地的重构,从最开始的 stack reconcile 到后来的为了解决快速响应而生的current modeScheduler(调度fiber)、Lane(解决细粒度任务优先级)、以及在此基础上的batchedUpdatesSuspense,这一切的目的无不是朝着构建更快的应用而进化的,


下面这两张图就是使用异步可中断更新前后的区别,可以体会一下




如果你尝试着打开react源码,你会发现它的代码量特别多,如果你挨个阅读,会完全没有思路,如果你打开react应用的函数调用栈,顺着调用栈,一不小心你就会陷入各种函数的调用栈之中。这个是否是不是脑壳疼呢?


怎样学习 react 源码?

不要气馁,学习方法还是有的,虽然源码多,并且难懂,但是如果成体系的学习各个模块,分析为什么这么设计,它的目的是为了什么,你就会理解react开发者设计初衷和对此进行的努力


  1. 理解react的设计理念:从设计理念出发,分析react构建的应用的目的、局限性和背景,前因后果都了解清楚了,才算是了解了它的脾气,是不是有点像找女朋友,你先得了解她的喜好吧,然后了解她的过去,然后顺着react的设计理念,开始思考为什么它会这么设计,对比vue等其他构建页面的库,它的优势和局限又在哪里。

  2. 分模块学习:知识得掰碎了消化,胖子也是一口口吃出来的呢,遇到一个困难的挑战,可以对它进行分解,先了解整个框架的逻辑,然后对各个模块的功能和作用有个大致的认识,接着就是深入每个模块的细节,就像盖房子一样,有了学习的路线或者思路,才不会陷入各个模块或者函数的调用关系之中,第一次阅读源码切记纠结每个函数的实现,先熟悉它们的功能和作用,然后才是啃具体细节,学习源码不是一朝一夕的事,需要反复的去揣摩react开发者的用意。

  3. 跟着调用栈和例子调试:可以尝试写一些小demo,顺着最开始调用函数调试各个函数,结合源码的注释或者查阅我之前学的react源码解析系列文章,各个模块逐个击破,比如看到了hook相关的源码,可以尝试着写一个带有useState的组件,看mountupdate的时候,hook是怎么挂载和更新的,也可以看在不同模式下它们的状态更新的区别,比如legacycurrent模式下的区别,等熟悉了hook源码之后也可以尝试手写一个hook,加深对hook的理解。

  4. 带上问题学习:根据常见的面试题,尝试在源码中需找答案,最后可以向你的同事回答这些问题的,一方面输出才是最好的学习,另一方面也是一个沟通交流的机会,常见面试题可以参考往期文章1.开篇介绍和面试题



视频讲解(高效学习):点击学习

往期 react 源码解析文章:

1.开篇介绍和面试题


2.react的设计理念


3.react源码架构


4.源码目录结构和调试


5.jsx&核心api


6.legacy和concurrent模式入口函数


7.Fiber架构


8.render阶段


9.diff算法


10.commit阶段


11.生命周期


12.状态更新流程


13.hooks源码


14.手写hooks


15.scheduler&Lane


16.concurrent模式


17.context


18事件系统


19.手写迷你版react


20.总结&第一章的面试题解答

用户头像

全栈潇晨

关注

还未添加个人签名 2021.02.17 加入

还未添加个人简介

评论

发布
暂无评论
好好学react源码然后惊艳所有人