人人都能读懂的 react 源码解析(大厂高薪必备)

1.开篇(听说你还在艰难的啃 react 源码)

​ 本教程目标是打造一门严谨(严格遵循 react17 核心思想)、通俗易懂(提供大量流程图解，结合 demo、视频教程)的 react 源码解析课程，争取做到最容易理解，学起来效率最高的教程。在视频教程中，会带着大家一步一步断点调试。学完本课程后，你对 react 的理解会上升一个档次，如果能把课程所有知识点都掌握，相信你对 react 源码的认知已经超过大多数的面试官了。

视频课程 &调试 demos

​ 视频课程的目的是为了快速掌握 react 源码运行的过程和 react 中的 scheduler、reconciler、renderer、fiber 等，并且详细 debug 源码和分析，过程更清晰。

​ 视频课程：进入课程

​ demos：demo

课程结构:

1. 开篇(听说你还在艰难的啃react源码)
   

2. react心智模型(来来来,让大脑有react思维吧)
   

3. Fiber(我是在内存中的dom)
   

4. 从legacy或concurrent开始(从入口开始,然后让我们奔向未来)
   

5. state更新流程(setState里到底发生了什么)
   

6. render阶段(厉害了,我有创建Fiber的技能)
   

7. commit阶段(听说renderer帮我们打好标记了,映射真实节点吧)
   

8. diff算法(妈妈再也不担心我的diff面试了)
   

9. hooks源码(想知道Function Component是怎样保存状态的嘛)
   

10. scheduler&lane模型(来看看任务是暂停、继续和插队的)
    

11. concurrent mode(并发模式是什么样的)
    

12. 手写迷你react(短小精悍就是我)
    

react 源码难学吗

​ 在一个寂静的夜晚，我思考了一下最近几年的成长，发现除了 ctrl+c、ctrl+v 用的熟练一点，其他好像也不是很懂啊，不行我得 深入学习一下 react 源码，毕竟这是日常开发中用的最多的框架嘛。

​ 很好，先下载一下 react 源码，嗯，主要代码是在 packages 下嘛，顺着线索找到 入口 react 文件夹下的 React.js，小样，代码也不是很多嘛。随着慢慢的 进入 不对劲，怎么越来越懵逼了，这个引用关系是怎样的？这个文件有什么用？这个函数为什么是这样的？截个图，感受一下其中一个部分。

​ 既然不知道他们的调用顺序，那我可以打断点顺着调用栈找啊，于是打开浏览器的 performance 看到的是这个亚子的，这么多函数我该怎么理清楚啊。

​ 相信很多 react 开发者学习源码时都会遇到这些问题，没关系，顺着此课程提供的线索，相信你会对 react 源码结构和不同的部分功能会有一个完整和清晰的认识，自然 react 源码也就不那么难学了。

怎样学好 react 源码

​ 学好 react 源码最忌讳纠结每个函数的实现，然后钻牛角尖，陷入无限函数的调用和递归中，就像盗梦空间的多重梦境中一样。

​ 在学习的过程中我们注重整体学习法，因为 react 每个部分并不是孤立的，举个栗子，在函数调用的过程中可能涉及异步调度的逻辑，所以会涉及 schduler。我们需要从入口开始，对 react 源码整体的工作流程和每个部分的实现有整体的认识，然后正式学习每个部分的时候再开始了解这部分函数具体实现。

课程特色

​ 不同于市面上几十行实现一个简易版的 react，所有思想和模型完全遵循最新 react17 版本，让你体会原汁原味的 react 源码，而不是自己模拟实现一下 react 源码的功能，并且随着 react 版本更新，课程内容也会不断更新。

​ 大量图解配合 demo 和视频教程，学起来不费劲，学完之后面试又可以装 X 了，开心～（开个玩笑）

​ 从 react 入口 开始为你展现 react 源码的全貌，对 react 源码执行流程和各个部分的功能和原理有个清晰的认识

​ 视频教程带着大家一步步调试，高效理解各个函数的功能和作用

课程收获

​ 为什么要学习 react 源码呢？作为一个使用多年 react 的前端工程师，你是停留在使用框架的层面还是去了解过框架底层的逻辑和运行方式，你是一个知识用了几年还是在不断的在不同的方向寻找突破呢。

• 面试加分：在内卷的时代，大厂前端岗都要求熟悉框架底层原理，也是面试必问环节，熟悉 react 源码会为你的面试加分，也会为你的谈薪流程增加不少筹码。

• 巩固基础知识：在源码的 scheduler 中使用了***小顶堆*** 这种数据结构，调度的实现则使用了***messageChannel***，在 render 阶段的 reconciler 中则使用了***fiber、update、链表*** 这些结构，diff 算法的过程则使用了***dfs***，lane 模型使用了二进制掩码。学习本课程也顺便巩固了数据结构和算法、事件循环。

• 日常开发提升效率：熟悉 react 源码之后，你对 react 的运行流程有了新的认识，在日常的开发中，相信你对组件的性能优化、react 使用技巧和解决 bug 会更加等心应手。

带上问题开始吧(少年,写了这么多年 react 这些问题真的清楚了吗)

​ 这些问题有些可能你已经知道答案了，但是你真的能从源码的角度回答出原因吗。学完视频课程后，相信你已经有自己的答案了

1.为什么 hooks 不能写在条件判断中

2.jsx 和 Fiber 有什么关系

3.jsx 文件为什么要声明 import React from ‘react’;

4.setState 是同步的还是异步的

5.componentWillMount、componentWillMount、componentWillUpdate 为什么标记 UNSAFE

6.点击 Father 组件的 div，Child 会打印 Child 吗

function Child() {  console.log('Child');  return <div>Child</div>;}

function Father(props) {  const [num, setNum] = React.useState(0);  return (    <div onClick={() => {setNum(num + 1)}}>      {num}      {props.children}    </div>  );}

function App() {  return (    <Father>      <Child/>    </Father>  );}
const rootEl = document.querySelector("#root");ReactDOM.render(<App/>, rootEl);

7.打印顺序是什么

function Child() {  useEffect(() => {    console.log('Child');  }, [])  return <h1>child</h1>;}
function Father() {  useEffect(() => {    console.log('Father');  }, [])    return <Child/>;}
function App() {  useEffect(() => {    console.log('App');  }, [])
  return <Father/>;}

8.componentDidMount 和 useEffect 的区别是什么

class App extends React.Component {  componentDidMount() {    console.log('mount');  }}
useEffect(() => {  console.log('useEffect');}, [])

9.为什么string类型的ref prop将会被废弃？

10.简述 diff 算法

11.react16.4+的生命周期

12.Fiber 是什么，它为什么能提高性能

13.react 元素 $$typeof 属性什么

14.react 怎么区分 Class 组件和 Function 组件

15.react 有哪些优化手段

16.suspense 组件是什么

17.如何解释 demo_4 demo_7 demo_8 出现的现象

视频课程安排