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. 你对合成事件的了解

    1. 咱们写的事件是绑定在dom上么，如果不是绑定在哪里？
    2. 为什么咱们的事件手动绑定this(不是箭头函数的状况)
    3. 为什么不能用 return false 来阻止事件的默认行为？
    4. react怎么通过dom元素，找到与之对应的 fiber对象的？

解释后果和景象

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

  1. 打印程序是什么

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

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

    class App extends React.Component {  componentDidMount() {    console.log('mount');  }}useEffect(() => {  console.log('useEffect');}, [])
  1. 如何解释demo_4、demo_8、demo_9呈现的景象