react 源码解析 1. 开篇介绍和面试题
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 的理解一定会上升一个档次,甚至会超过大多数面试官了
常见面试题(带上问题学习吧)
以下这些问题可能你已经有答案了,但是你能从源码角度回答出来吗。
jsx 和 Fiber 有什么关系
react17 之前 jsx 文件为什么要声明 import React from 'react',之后为什么不需要了
Fiber 是什么,它为什么能提高性能
hooks
为什么 hooks 不能写在条件判断中
状态/生命周期
setState 是同步的还是异步的
componentWillMount、componentWillMount、componentWillUpdate 为什么标记 UNSAFE
组件
react 元素 $$typeof 属性什么
react 怎么区分 Class 组件和 Function 组件
函数组件和类组件的相同点和不同点
开放性问题
说说你对 react 的理解/请说一下 react 的渲染过程
聊聊 react 生命周期
简述 diff 算法
react 有哪些优化手段
react 为什么引入 jsx
说说 virtual Dom 的理解
你对合成事件的理解
我们写的事件是绑定在
dom
上么,如果不是绑定在哪里?为什么我们的事件手动绑定
this
(不是箭头函数的情况)为什么不能用
return false
来阻止事件的默认行为?react
怎么通过dom
元素,找到与之对应的fiber
对象的?
解释结果和现象
点击 Father 组件的 div,Child 会打印 Child 吗
打印顺序是什么
useLayoutEffect/componentDidMount 和 useEffect 的区别是什么
如何解释 demo_4、demo_8、demo_9 出现的现象
版权声明: 本文为 InfoQ 作者【全栈潇晨】的原创文章。
原文链接:【http://xie.infoq.cn/article/8bfa1c5c0800e2198bf44c2e4】。文章转载请联系作者。
评论