react16专题
认识react16的fiber架构
认识react16的fiber架构 前言 React的Virtual DOM（VDOM），其核心的协调算法，即reconciliation，通过对比前后的Virtual DOM得出最小更新部分，再去渲染真实DOM，减少了频繁操作DOM的成本，使其深受大家关注。但随着前端工程化的发展，在大型的项目上reconciliation越来越不得满足，因此，React团队对reconciliation做出
React16源码: React中详解在渲染阶段Suspend的源码实现
Suspend 挂起详解 1 ）概述 在react的更新过程当中，它的任务是可以被挂起的，也就是 Suspend关于 Suspend 字面意思就是挂起在某次更新的任务更新完成之后，暂时不提交 在 react更新中，分为两个阶段，首先是render阶段 主要就是包含 performUnitOfWork 以及 completeUnitOfWork对拿到的 reactElement 进行一个向下
React16源码: React中event事件触发的源码实现
event 事件触发过程 1 ）概述 在之前事件绑定时，绑定的是两个方法 一个是 dispatchInteractiveEvent另外一个 dispatchEvent 其实它们调用的方法都是差不多的，一开始会有一点小的区别 2 ）源码 定位到 packages/react-dom/src/events/ReactDOMEventListener.js#L165 进入 trapCapt
React16源码: React中处理ref的核心流程源码实现
ref的实现过程 1 ）概述 在更新流程当中如何去设置ref上面的对象的过程在我们创建fiber的时候去处理ref这个属性那我们什么时候创建fiber对象? 就是我们去更新某一个节点，然后要去调和它的子节点的时候这个时候我们会对每一个子节点去创建这个fiber对象 创建这个fiber对象的过程，我们就会去处理这个refcommit开始之前先detach 2 ）源码 定位到 packag
React16源码: React中LegacyContext的源码实现
LegacyContext 老的 contextAPI 也就是我们使用 childContextTypes 这种声明方式来从父节点为它的子树提供 context 内容的这么一种方式遗留的contextAPI 在 react 17 被彻底移除了，就无法使用了那么为什么要彻底移除这个contextAPI的使用方式呢？因为它对性能的影响会比较的大，它会影响整个子树的一个更新过程它嵌套的context提
React16源码: React中处理LegacyContext相关的源码实现
LegacyContext 老的 contextAPI 也就是我们使用 childContextTypes 这种声明方式来从父节点为它的子树提供 context 内容的这么一种方式遗留的contextAPI 在 react 17 被彻底移除了，就无法使用了那么为什么要彻底移除这个contextAPI的使用方式呢？因为它对性能的影响会比较的大，它会影响整个子树的一个更新过程它嵌套的context提
React16源码: React中commitAllHostEffects内部的commitPlacement的源码实现
commitPlacement 1 ）概述 在 react commit 阶段的 commitRoot 第二个while循环中调用了 commitAllHostEffects，在这个函数内部处理了把一个新的dom节点挂载到真正的dom树上面去的一个过程现在主要关注下其中调用的 commitPlacement 2 ）源码 定位到 packages/react-reconciler/src
React16源码: React中commit阶段的commitAllLifeCycles的源码实现
commitAllLifeCycles 1 ）概述 在 react commit 阶段的 commitRoot 第三个 while 循环中处理了生命周期相关的一些内容它这个方法的名字叫做 commitAllLifeCycles 2 ）源码 定位到 packages/react-reconciler/src/ReactFiberScheduler.js#L479 查看 commitAl
React16源码: React中commitAllHostEffects内部的commitWork的源码实现
commitWork 1 ）概述 在 react commit 阶段的 commitRoot 第二个while循环中调用了 commitAllHostEffects，这个函数不仅仅处理了新增节点，若一个节点已经存在，当它有新的内容要更新或者是它的attributes要更新这个时候，就需要调用 commitWork 2 ）源码 定位到 packages/react-reconciler/
React16源码: React中commit阶段的invokeGuardedCallback的源码实现
invokeGuardedCallback 1 ）概述 在 commit 阶段中在 DEV 环境中调用了 invokeGuardedCallback 这个方法这个方法是在开发过程中被使用，用于捕获错误，协助开发调试的方法 2 ）概述 定位到 packages/shared/ReactErrorUtils.js#L41 进入 invokeGuardedCallback const r
React16源码: React中commit阶段的commitRoot的主流程源码实现
commitRoot 1 ）概述 在react中有 render 阶段 和 commit 阶段，这是两个不同的阶段1 ）之前的渲染更新都是render阶段在render阶段，会经历一系列的调度，一系列的节点的更新过程需要去重新计算它的 state, props 生成新的fiber树和dom树在这个过程中，每一个节点的更新过程，它都是独立的每一个节点更新完之后，它都可以跳出这个更新的循环然后
React16源码: React中的renderRoot的错误处理的源码实现
renderRoot的错误处理 1 ）概述 在 completeWork这个方法之后, 再次回到 renderRoot 里面在 renderRoot 里面执行了 workLoop, 之后，对 workLoop 使用了try catch如果在里面有任何一个节点在更新的过程当中 throw Error 都会被catch到catch到之后就是错误处理 给报错节点增加 incomplete 副作用
React16源码: React中的unwindWork的源码实现
unwindWork 1 ）概述 在 renderRoot 的 throw Exception 里面, 对于被捕获到错误的组件进行了一些处理并且向上去寻找能够处理这些异常的组件，比如说 class component 里面具有getDerivedStateFromError 或者 componentDidCatch 这样的生命周期方法这个class component 就代表它可以处理它的
React16源码: React中的completeWork对HostText处理含更新的源码实现
HostText 1 ）概述 在 completeWork 中 对 HostText的处理在第一次挂载和后续更新的不同条件下进行操作 第一次挂载主要是创建实例后续更新其实也是重新创建实例 2 ）源码 定位到 packages/react-reconciler/src/ReactFiberCompleteWork.js#L663 到 case HostText 这里 case Ho
React16源码: React中的updateHostComponent的源码实现
updateHostComponent 1 ）概述 在 completeWork 阶段的 HostComponent 处理，继续前文所述在更新的逻辑里面，调用了 updateHostComponent进行前后props对应的dom的attributes变化的对比情况这个方法也是根据不同环境来定义的，我们这里只专注于 react-dom 环境 2 ）源码 定位到 packages/rea
React16源码: React中的completeWork中对不同类型节点处理的源码实现
completeWork 1 ）概述 在 completeUnitOfWork 当中，在节点是正常渲染没有任何出错的情况下会去调用 completework，对这个节点进行一个完成工作的一系列操作在update各种component的时候，执行了各种获取context相关的内容对于 completeWork，我们会把它对应的这些节点获取的context再pop出来相当于 beginWork
React16源码: React中的resetChildExpirationTime的源码实现
resetChildExpirationTime 1 ）概述 在 completeUnitOfWork 当中，有一步比较重要的一个操作，就是重置 childExpirationTimechildExpirationTime 是非常重要的一个时间节点，它用来记录某一个节点的子树当中，目前优先级最高的那个更新整个应用的调度过程当中使用的都是root节点，在 scheduleWork 的时候，即
React16源码: React中的completeUnitOfWork的源码实现
completeUnitOfWork 1 ）概述 各种不同类型组件的一个更新过程对应的是在执行 performUnitOfWork 里面的 beginWork 阶段它是去向下遍历一棵 fiber 树的一侧的子节点，然后遍历到叶子节点为止，以及 return 自己 child 的这种方式在 performUnitOfWork 里面，还有一个方法叫做 completeUnitOfWork在 c
React16源码: React中的updateHostRoot的源码实现
HostRoot 的更新 1 ）概述 HostRoot 是一个比较特殊的节点, 因为在一个react应用当中它只会有一个 HostRoot, 它对应的 Fiber 对象是我们的 RootFiber 对象重点在于它的更新过程 2 ）源码 定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L612 // 这个函数的重点在:
React16源码: React中的updateClassComponent的源码实现
ClassComponent 的更新 1 ） 概述 在 react 中 class component，是一个非常重要的角色它承担了 react 中 更新整个应用的API setStateforceUpdate 在react当中，只有更新了state之后，整个应用才会重新进行渲染在 class component 中, 它的逻辑相对复杂 2 ）源码 在 packages/react-r
React16源码: React中的updateMemoComponent的源码实现
updateMemoComponent 1 ）概述 在react16.6之后，提供了一个新的API通过 React.memo 来创建一个具有类似于 pure component 特性的 function component现在主要关注其更新过程 2 ）源码 定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L237 进入
React16源码: React中的PortalComponent创建, 调和, 更新的源码实现
PortalComponent 1 ）概述 React Portal之所以叫Portal，因为做的就是和“传送门”一样的事情render到一个组件里面去，实际改变的是网页上另一处的DOM结构主要关注 portal的创建, 调和, 更新过程 2 ）源码 定位到 packages/react-dom/src/client/ReactDOM.js#L576 function createP
React16源码: React中的IndeterminateComponent的源码实现
IndeterminateComponent 1 ）概述 这是一个比较特殊的component的类型， 就是还没有被指定类型的component在一个fibrer被创建的时候，它的tag可能会是 IndeterminateComponent在 packages/react-reconciler/src/ReactFiber.js 中，有一个方法createFiberFromTypeAndP
React16源码: React中的HostComponent HostText的源码实现
HostComponent & HostText 1 ）概述 HostComponent 就是我们dom原生的这些节点, 如: div, span, p 标签这种 使用的是小写字母开头的这些节点一般都认为它是一个 HostComponent HostText，它是单纯的文本节点主要关注它们的一个更新过程 2 ）源码 定位到 packages/react-reconciler/src/Rea
React16源码: React中的reconcileChildren的源码实现
reconcileChildren 1 ）概述 在更新了一个节点之后，拿到它的props.children要根据这个children里面的 ReactElement 来去创建子树的所有的 fiber 对象要根据 props.children 来生成 fiber 子树，然后判断 fiber 对象它是否是可以复用的 因为我们在第一次渲染的时候，就已经渲染了整个 fiber 子树再有一个更新进来
React16源码: React中的FunctionComponent的源码实现
Function Component 1 ）概述 FunctionComponent 会引出调和子节点的过程调和子节点是一个统一的过程，和各类组件不同类型没有太大关系 在 ReactDOM.render 第一次时，只有一个Fiber对象这个Fiber对象它会保存它的props, 里面有很多的children里面的 props.children 是 App 对应的 ReactElement这个