关于react.js:react源码解析1开篇介绍和面试题

怎么学习 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对象的？

解释后果和景象

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 呈现的景象