专栏首页react源码解析react源码解析1.开篇介绍和面试题
原创

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

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源码1.3

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

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

react源码1.2
react源码3.2

课程特色

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

课程结构

react源码1.1

课程收获

为什么要学习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出现的现象

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react源码解析4.源码目录结构和调试

    方法一:可以用现成的包含本课程所有demo的项目来调试,建议使用已经构建好的项目,地址:https://github.com/xiaochen1024/reac...

    全栈潇晨
  • 如何阅读大型前端开源项目的源码,授人以鱼不如授人以渔

    目前网上有很多「XX源码分析」这样的文章,不过这些文章分析源码的范围有限,有时候讲的内容不是读者最关心的。同时我也注意到,源码是在不断更新的,文章里写的源码往往...

    一墨编程学习
  • react源码解析20.总结&第一章的面试题解答

    至此我们介绍了react的理念,如果解决cpu和io的瓶颈,关键是实现异步可中断的更新

    全栈潇晨
  • 前端每周清单第 40 期: JS 的 Core 与 Cost,Node 内存溢出调试,Software 2.0

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • react源码解析14.手写hooks

    最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算,详细见视频讲解

    全栈潇晨
  • 前端每周清单第 53 期:Go 与 WebAssembly, React Suspense 演练, CSS 技巧

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 唐巧的iOS技术博客选摘

    王大锤
  • 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)

    https://juejin.im/post/5e85ec79e51d4547153d073820ed

    闰土大叔
  • 适合 JS 新手学习的开源项目——在 GitHub 学编程

    这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇,系列文章:

    HelloGitHub

扫码关注云+社区

领取腾讯云代金券