搞定 react 源码 惊艳面试官

react 源码解析 1.开篇介绍和面试题

视频讲解（高效学习）：进入学习

往期文章：

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.总结&第一章的面试题解答

21.demo

怎样学习 react 源码

作为前端最常用的 js 库之一，熟悉 react 源码成了高级或资深前端工程师必备的能力，如果你不想停留在 api 的使用层面或者想在前端技能的深度上有所突破，那熟悉 react 源码将是你进步的很好的方式。

react 的纯粹体现在它的 api 上，一切都是围绕 setState 状态更新进行的，但是内部的逻辑却经历了很大的重构和变化，而且代码量也不小，如果只是从源码文件和函数来阅读，那会很难以理解 react 的渲染流程。优秀工程师几年时间打造的库，必定有借鉴之处，那么我们应该怎样学习 react 源码呢。

首先，我们可以从函数调用栈入手，理清 react 的各个模块的功能和它们调用的顺序，盖房子一样，先搭好架子，对源码有个整体的认识，然后再看每个模块的细节，第一遍的时候切忌纠结每个函数实现的细节，陷入各个函数的深度调用中。其次可以结合一些 demo 和自己画图理解，react 源码中设计大量的链表操作，画图是一个很好的理解指针操作的方式。源码里也有一些英文注释，可以根据注释或者根据此 react 源码解析文章进行理解。

熟悉 react 源码并不是一朝一夕的事，想精进自己的技术，必须花时间才行。

课程特色

本课程遵循 react v17.0.1 源码的核心思想，目的是打造一门通俗易懂的 react 源码解析系列文章。课程从源码的各个模块开始，结合大量 demo、示例图解和视频教程，带着大家一步一步调试 react 源码，课程也会完全遵循 react17 手写 hook 和精简版的 react 方便大家的理解，随着 react 大版本的更新，此课程也会一直更新。

课程结构

课程收获

为什么要学习 react 源码呢，你是使用了 api 很久，停留在框架使用层面还是会主动去了解框架的逻辑和运行方式呢。跟着课程走，理解起来不费力，你将收获：

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

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

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

相信学完课程之后，你对 react 的理解一定会上升一个档次，甚至会超过大多数面试官了

常见面试题（带上问题学习吧）

以下这些问题可能你已经有答案了，但是你能从源码角度回答出来吗。

1. jsx 和 Fiber 有什么关系

2. react17 之前 jsx 文件为什么要声明 import React from 'react'，之后为什么不需要了

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

hooks

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

状态/生命周期

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

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

组件

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

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

3. 函数组件和类组件的相同点和不同点

开放性问题

1. 说说你对 react 的理解/请说一下 react 的渲染过程

2. 聊聊 react 生命周期

3. 简述 diff 算法

4. react 有哪些优化手段

5. react 为什么引入 jsx

6. 说说 virtual Dom 的理解

7. 你对合成事件的理解

8. 我们写的事件是绑定在dom上么，如果不是绑定在哪里？

9. 为什么我们的事件手动绑定this(不是箭头函数的情况)

10. 为什么不能用 return false 来阻止事件的默认行为？

11. react怎么通过dom元素，找到与之对应的 fiber对象的？

解释结果和现象

23. 点击 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);

24. 打印顺序是什么

    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/>;    }

25. useLayoutEffect/componentDidMount 和 useEffect 的区别是什么

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

26. 如何解释 demo_4、demo_8、demo_9 出现的现象