【笔记-react】《imooc-React源码深度解析高级前端工程师必备技能》

╰+哭是因爲堅強的太久メ 2022-12-31 04:21 140阅读 0赞

# 第01章 课程导学 #

## 01-01 课程导学 ##

一、UI=fn(x)  
核心api：setState  
没有directive双向绑定  
二、vue，angular更新大版本，需要调整兼容  
三、react，引入fiber，从根本上解决了，js单线程运行，如果计算量太大，导致动画卡帧，交互卡顿问题  
四、第1章：React API，及每个API的作用  
createElement、createContext、JSX=>JS、ConcurrentMode、Ref、Component、Suspense、Hooks  
五、第2章：React中的更新创建  
ReactDOM.render、Fiber、UpdateQueue、FiberRoot、Update、expirationTime  
六、第3章：react创建完，更新之后的调度过程  
scheduleWork、batchedUpdates、performWork、performUnitOfWork、requestWork、react scheduler、renderRoot  
七、第4章：开始更新  
beginWork以及优化、各类组件的更新过程、调和子节点的过程  
八、第5章：完成各个节点的更新  
completeUnitOfWork、completeWork、unwindWork、虚拟DOM对比、错误捕获处理、完成整棵树更新  
九、第6章：提交更新  
commitRoot整体流程、提交快照、提交DOM更新、提交所有声明周期、开发时的帮助方法、提交DOM插入、提交DOM删除  
十、第7章：各种功能的实现过程  
context的实现过程、ref的实现过程、hydrate的实现过程、React的事件体系  
十一、第8章：Suspense  
优先更新级的概念、Suspense组件更新、retry重新尝试渲染、更新挂起的概念、timeout处理、lazy组件更新  
十二、第9章：Hooks  
核心原理、useState、useEffect、useContext、其他Hooks API  
十三、Fiber、Update、Scheduler等核心着重讲解  
十四、课程电子书链接：https://react.jokcy.me/book/api/react.html  
十五、通读源码  
外在：提高开发能力、解决问题的能力、提升自身价值  
内在：提升学习能力、提升思考能力、提升设计能力

# 第02章 基础知识React api 一览 #

## 02-01 准备工作 ##

一、目录结构  
1、packages/  
（1）event/  
react 事件系统, onClick，自己实现了一套事件传播系统，区别于原生的事件绑定  
（2）react/  
react包全都在这里  
（3）react-dom/  
npm安装时，react-dom的源文件包  
react-dom会重度依赖react-reconciler  
（4）react-reconciler  
独立的公共源码  
二、react、react-dom之间的关系  
1、jsx是与react相关的  
2、react本身是一种定义，表现行为的包  
3、如何渲染，如何更新都是在react-dom中  
三、Flow Type  
1、flow，静态检查工具，强制性没有typescript那么高  
`import type { ReactNodeList } from 'shared/ReactTypes'`  
2、对代码阅读不会产生太大影响。  
3、官网文档：https://flow.org

## 02-02 JSX到JavaScript的转换 ##

一、babel转换地址（代码转换的测试）：https://babeljs.io/repl

## 02-03 react-element ##

一、ReactElement.js

export function createElement( type, config, children) { }

二、react提供的原生组件：Fragment、StrictMode、Suspense  
三、config  
写在jsx标签上所有的attrs，筛选出props，特殊的key, ref  
是否是内建的props

## 02-07 context ##

一、组件与组件之间的共同，父子组件沟通，用props  
二、context两种方式  
childContextType，将在react 17版本中废弃  
createContext  
三、childContextType  
每次更新，都需要进行完整的渲染，对性能消耗非常大

## 02-08 ConcurrentMode ##

一、让react的整体渲染过程，能进行一个优先级的排序，并且让整体的渲染过程能中断。这样就可以进行一个任务的调度，提高cpu性能。  
如果react更新占用js进程，动画，或input响应就会比较卡。  
二、flushSync， import \{ flushSync \} from ‘react-dom’  
在更新操作的时候，使用优先级最高的方式去进行更新。  
三、如果用了ConcurrentMode，它的子组件产生的更新都是低优先级更新。

## 02-09 Suspense and lazy ##

一、Suspense下渲染一个或多个组件，子组件throw promise之前，都会用fallback里的内容  
二、16.6只支持lazy，就是异步加载组件，没有支持异步数据加载。  
三、在Suspense内部，要等到所有组件都resolve之后，才会把fallback去掉，然后显示里面的内容。有任何一个处于Pending状态的，都会显示fallback

## 02-10 Hooks ##

一、hooks的react, react-dom要在16.7版本以上  
二、function Component，没有this对象，不能使用生命周期方法  
三、React Conf视频：https://reactjs.bootcss.com/blog/2018/11/13/react-conf-recap.html  
（讲解了为什么要用hooks）  
四、hooks里没有着重区分mounted和updated  
五、useEffect，解除绑定用return

useEffect(() => {
    	console.log('component update')
    	return () => {
    		console.log('component unbind')
    	}
    }, [])

## 02-11 children ##

一、React.children  
二、实际跟数组的map， forEach有点差别

Children: {
    	map,
    	forEach,
    	count,
    	toArray,
    	only,
    }

map有返回，返回新的数组；forEach无返回，还是原来的数组。  
三、

import React from 'react'
    function ChildrenDemo (props) {
    	console.log(props.children)
    	// [child1, 1, 1, 2, 2, 2]
    	console.log(React.children.map(props.children, c=> [c, [c, [c]]])) // map方法，变成一维数组
    	return props.children
    }
    export default () => {
    	<ChildrenDemo>
    		<span>1</span>
    		<span>1</span>
    	</ChildrenDemo>
    }

四、添加对象，删除对象，可能会引起内存抖动问题  
五、关于key相关的东西，children打印出来，会有key，怎么实现的  
getComponentKey

## 02-12 others ##

一、memo  
16.6推出的api，给function component，有PureComponent类似的功能（提供了class component 组件类型）  
forwardRef  
context差不多的东西  
二、Fragment  
`<></>`， 同`<React.Fragment></React.Fragment>`  
三、StrictMode  
标记着这个节点上的所有子元素，会给一些过时的api的提醒  
四、cloneElement  
创建一个新的reactElement  
五、createFactory  
对于jsx，基本不可能用到  
是对createElement的封装，是createElement绑定了一个type

# 第03章 react中的更新 #

## 03-01 react-dom-render ##

一、创建更新的方式  
ReactDOM.render || hydrate  
setState  
forceUpdate  
二、步骤  
创建ReactRoot  
创建FiberRoot和RootFiber  
创建更新  
三、demo  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]  
三、ReactDom.render(), 传进去的`<App />`是类，并不是实例  
四、updateContainerAtExpirationTime()，react16很重要的内容  
react16之后，提供了任务优先级(scheduleWork)的概念。这是react中最复杂的内容

## 03-02 react-fiber-root ##

一、什么是FiberRoot  
整个应用的起点  
包含应用挂载的目标节点  
记录整个应用更新过程的各种信息  
二、createFiberRoot，return 了一个对象

## 03-03 react-fiber ##

一、什么是Fiber  
1、每一个ReactElement对应一个Fiber对象  
2、记录节点的各种状态(state, props都是记录在Fiber上的)  
本身记录节点状态不是在class component上，而是在fiber上，所以可以用在PureComponent  
3、串联整个应用形成树结构  
二、effect，副作用，标记最终更新的内容  
三、创建对象消耗性能比较大，alternate属性：提高性能的

## 03-04 react-update-and-updateQueue ##

一、什么是Update  
用于记录组件状态的改变  
存放于UpdateQueue中  
多个Update可以同时存在  
二、react16之后有ErrorBoundary的功能

## 03-05 react-expiration-time ##

一、| 0表示取整  
`(ms / UNIT_SIZE) | 0`  
二、computeExpirationForFiber(currentTime, current)  
computeExpirationBucket

## 03-06 different-expiration-time ##

一、异步任务可以随便被打断。如果某个任务过了expiration-time，都没有被执行，则强制执行  
二、种类  
Sync模式：创建即更新的流程  
异步模式：调度，可能会被打断  
指定context  
三、二进制，通过与&、或|，能很好地进行判断、操作

## 03-07 react setState forceUpdate ##

一、ReactDOM.render, setState, forceUpdate去更新组件状态  
二、setState, forceUpdate 核心  
1、给节点的Fiber创建更新  
2、更新的类型不同  
三、const classComponentUpdater  
enqueueSetState  
enqueueForceUpdate  
与updateContainer方法特别像  
四、react，创建更新的过程都差不多

# 第04章 fiber scheduler #

## 04-01 总结流程概览 ##

一、ReactFIberSchedule，调度  
很多公共变量名  
二、scheduleDefferredCallback  
1、期望用的是requestIdleCallback（https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback），但是兼容性不高  
2、通过【浏览器的requestAnimatIon，js任务队列的原理进行模拟】实现

## 04-02 ScheduleWork ##

一、核心知识点  
找到更新对应的FiberRoot节点  
如果符合条件重置stack  
如果符合条件就请求工作调度

## 04-03 requestWork ##

一、核心知识点  
1、加入到root调度队列  
2、判断是否批量更新  
3、根据expirationTime判断调度类型

## 04-04 batchedUpdates ##

一、setState后console.log出来的state值并不是最新的，batchedUpdates  
二、create-react-app创建的项目，node\_modules的改变并不会自动更新浏览器内容，需要重启项目  
三、更新队列，一个方法中，每次的更新都放到一个队列中，最终完成之后才会更新最终值。  
四、setTimeout改变了上下文环境，会导致应用整体性能下降  
batchUpdates也是改变了上下文环境  
五、面试题：setState是同步的还是异步的？  
setState本身的方法调用是同步的，但是调用了setState并不标志着react的state会立马就更新，这个更新是根据我们当前环境的执行上下文来判断的。如果处于批量更新的情况下，那么state不是当前立马更新的。而如果我不处于批量更新的情况下，它就有可能是立马更新的。  
那为什么我要说是有可能呢，因为我们现在是有sync module, context module这种异步渲染的情况。如果我处于异步渲染的情况下，我这个state也不是立马就更新的。因为我们之前讲过了，进入异步更新的话，它要进入一个异步的调度的过程，这个过程肯定不会立马更新state

## 04-05 react scheduler（1），异步调度 ##

一、核心知识点  
1、维护时间片  
2、模拟requestIdleCallback  
调用这个api，传入一个回调，这个api会等浏览器把其他任务执行完了，等javascript运行有空闲的时候，再回来调用这个回调  
requestAnimationFrame，浏览器要渲染当前帧的时候，就执行这个回调  
3、调度列表和超时判断  
二、如果要给用户流畅的感觉，1秒钟至少要刷新30次（平均）  
![在这里插入图片描述][aae79bc88b3a1c14958831cbeefadd44.png]

## 04-07 react scheduler（3） ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]: /images/20221120/cadde1f4cb1a4158a6c509f478031461.png
[aae79bc88b3a1c14958831cbeefadd44.png]: /images/20221120/2dd3c7b82b3148f2900f7e5d49b7b2cb.png