共计 2179 个字符，预计需要花费 6 分钟才能阅读完成。
好好学 react 源码而后惊艳所有人
hello，这里是潇晨，明天咱们来聊聊 react 源码，作为应用 react 多年的前端工程师，咱们是否还在应用着各种利用层面的库、框架呢，是否在面试过程中遇到一些对于 react 源码方面的问题呢，如果是，那么是否尝试过来看看 react 底层运行逻辑呢？
为什么要学 react 源码？
- 成为高级或资深前端工程师的必备条件：作为前端工程师，如果不满足只停留在利用层面的开发，或者想成为高级或资深前端工程师，那相熟远吗将是一个很必要的能力，为什么这么说呢，
react作为前端常常要用到的库，响应式jsx申明、virtual-dom、diff算法、fiber调度、current-mode等思维曾经成为了构建前端疾速响应页面的一种卓有成效的思维。有些同学会说，底层源码我日常开发中用不到啊，的确，如果只是满足复制黏贴，或者构建简略的页面，用一些社区曾经有的库，的确没必要，然而咱们是新一代有现实有志气的年轻人呐，而且要想在职业生涯走的更远，只停留在应用层面，咱们的竞争力会大打折扣，就算是为了晋升技能或者晋升薪资，这也是咱们必须要想学习的一项能力。 - 面试的须要：当初 1 年以上的前端岗根本都开始要求相熟一个常常用到的库、或者框架的源码，如果你日常开发中
react用的比拟多的话，那相熟react源码对你的面试来说必定是一个加分项，如果能将react中各个模块的运行机制、以及它们是怎么配合工作的联合起来，加上一些开发过程中遇到的问题，而后通过浏览源码有了新的意识，必定会让面试官另眼相看。 - 晋升日常开发技能的须要：日常开发中尽管咱们不会间接接触源码，然而组件的性能优化、调试某些渲染过程中 bug，或者和
react相干的降级，以及它的设计思维，这些都是须要从源码层面来了解或者解决的，就像盖房子一样，没有巩固的根底或者底层逻辑，怎么能盖好上层建筑呢。
react 源码难学吗？
当然难学，react从 15 版本到当初 17 版本，很快 18 版本也快进去了，两头的迭代始终没停，尽管你可能感觉它的 api 没太多变动，然而它的外部却经验着天翻地覆的重构，从最开始的 stack reconcile 到起初的为了解决疾速响应而生的 current mode、Scheduler(调度fiber)、Lane(解决细粒度工作优先级)、以及在此基础上的batchedUpdates 和Suspense，这所有的目标无不是朝着构建更快的利用而进化的，
上面这两张图就是应用异步可中断更新前后的区别，能够领会一下
如果你尝试着关上 react 源码，你会发现它的代码量特地多，如果你挨个浏览，会齐全没有思路，如果你关上 react 利用的函数调用栈，顺着调用栈，一不小心你就会陷入各种函数的调用栈之中。这个是否是不是脑壳疼呢？
怎么学习 react 源码？
不要泄气，学习办法还是有的，尽管源码多，并且难懂，然而如果成体系的学习各个模块，剖析为什么这么设计，它的目标是为了什么，你就会了解 react 开发者设计初衷和对此进行的致力
- 了解
react的设计理念：从设计理念登程，剖析react构建的利用的目标、局限性和背景，前因后果都理解分明了，才算是理解了它的脾气，是不是有点像找女朋友，你先得理解她的爱好吧，而后理解她的过来，而后顺着react的设计理念，开始思考为什么它会这么设计，比照vue等其余构建页面的库，它的劣势和局限又在哪里。 - 分模块学习：常识得掰碎了消化，瘦子也是一口口吃进去的呢，遇到一个艰难的挑战，能够对它进行合成，先理解整个框架的逻辑，而后对各个模块的性能和作用有个大抵的意识，接着就是深刻每个模块的细节，就像盖房子一样，有了学习的路线或者思路，才不会陷入各个模块或者函数的调用关系之中，第一次浏览源码切记纠结每个函数的实现，先相熟它们的性能和作用，而后才是啃具体细节，学习源码不是久而久之的事，须要重复的去琢磨
react开发者的用意。 - 跟着调用栈和例子调试：能够尝试写一些小
demo，顺着最开始调用函数调试各个函数，联合源码的正文或者查阅我之前学的react源码解析系列文章，各个模块一一击破，比方看到了hook相干的源码，能够尝试着写一个带有useState的组件，看mount和update的时候，hook是怎么挂载和更新的，也能够看在不同模式下它们的状态更新的区别，比方legacy和current模式下的区别，等相熟了hook源码之后也能够尝试手写一个hook，加深对hook的了解。 - 带上问题学习：依据常见的面试题，尝试在源码中需找答案，最初能够向你的共事答复这些问题的，一方面输入才是最好的学习，另一方面也是一个沟通交流的机会，常见面试题能够参考往期文章 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. 总结 & 第一章的面试题解答
