react源码学习解析专栏
文章平均质量分 90
react源码理念,react源码debugger过程。
coderlin_
幸运=99%的努力+1%的运气
展开
-
react源码debugger-17,18版本的事件更新流程
react事件更新原创 2022-06-05 21:26:54 · 708 阅读 · 0 评论 -
react源码debugger-各个hooks的逻辑实现(useState和useEffect)
了解react的整体流程,会有助于理解本文。hooks是什么?要了解hooks是什么,我们得先想知道react怎么执行函数组件。先看看函数组件的fiber是什么?const fiber = { type: f App(){}, //函数本身, memoziedState: {}, //hooks链表 updateQueue: {}, //effects链表 ....}对于函数组件,我们现在只需要关注他这几个属性就行了首先看到renderWithHooks函数,他是执原创 2022-05-29 22:59:30 · 478 阅读 · 0 评论 -
react源码debugger-commit阶段的完成
commit阶段上节讲到了rootFiber完成completeWork的时候,返回了一个状态,为RootInCompleted,表示工作完成。调用finishConcurrentRender方法,该方法会调用commitRoot,开启commit阶段。现在回顾一下,我们的fiber结构是// App组件const App: React.FC = () => { return <DD />;};// DD组件class DD extends Component {原创 2022-05-15 21:49:50 · 426 阅读 · 0 评论 -
react源码学习(2)
继上一篇react源码学习(1)创建FiberRoot和rootFiber//render调用方法function legacyRenderSubtreeIntoContainer( parentComponent: ?React$Component<any, any>, // mount是null children: ReactNodeList, // ReactElement container: Container, //容器 forceHydrate: boole原创 2022-05-15 00:34:28 · 273 阅读 · 0 评论 -
react源码学习(1)
jsxjsx会被转为createElement方法,看下源码这个方法export function createElement(type, config, children) {}接受三个参数:type元素类型,对于普通元素,就是div p ,对于函数组件,就是 函数本身, 对于类组件,就是类本身config 配置属性,比如ref, key, style…children 子元素这个方法的主要作用就是:1 分离props属性和特殊属性 let propName; const原创 2022-05-14 23:19:28 · 389 阅读 · 0 评论 -
掘金小课《React进阶实战指南》笔记
阅读了掘金小课《React进阶实战指南》,做的笔记加自己的一些总结。部分资源来自掘金小课《React进阶实战指南》认识JSXJsx统统被转为React.createElement,createElement参数:第一个参数:如果是组件类型,会传入组件对应的类或函数;如果是 dom 元素类型,传入 div 或者 span 之类的字符串。第二个参数:一个对象,在 dom 类型中为标签属性,在组件类型中为 props 。其他参数:依次为 children,根据顺序排列。如<div>原创 2022-05-05 15:36:57 · 3622 阅读 · 0 评论 -
react源码debugger-各种fiber的completeWork阶段
原生div p标签等的bieginWorkclass DD extends Component { render() { return <div>123</div>; }}上面调式了DD类组件的fiber,接着看类组件返回的子fiber,div标签的fiber是怎样的。对于原生html的fiber,fiber.tag是5export const HostComponent = 5; //原生标签hostComponent的fiber{altern原创 2022-04-10 23:16:59 · 291 阅读 · 0 评论 -
react源码解析-debugger阶段-类组件mount阶段的beginWork
类组件的beginWork。Appfiber执行完递阶段之后,轮到DDfiber执行递解端。对于类组件,在beginWork的时候,会调用updateClassComponent方法。类组件的fiber如:{alternate: nullchild: nullelementType: ƒ DD()key: nulllanes: 16mode: 1pendingProps: {}ref: nullreturn: FiberNode {tag: 0, key: null, stateN原创 2022-04-05 20:15:00 · 1130 阅读 · 0 评论 -
react源码解析-debugger阶段-函数组件App的beginWork阶段
各种类型fiber的beginWork函数组件的beginWork接第一章,我们走完了createRoot到rootFiber执行完beginWork阶段,workInprogress.child也就是App函数的fiber被创建完毕之后的阶段。rootFiber执行完递阶段之后,返回了App fiber,将App fiber赋值给workINprogress.当performUnitOfWork执行完毕之后,当前浏览器无多余时间,等待下次调度执行performConcurrentWorkOnRo原创 2022-03-27 18:00:37 · 1458 阅读 · 0 评论 -
react源码-debuger解析- createRoot阶段1
看懂这个之后https://react.iamkasong.com开始debugger源码CreateRootReactDOM.createRoot(document.getElementById(''))craeteRoot主要调用了createContainer创建rootFiber和FiberRoot,并且将它们联系起来。createContainer```调用了```createFiberRootconst root: FiberRoot = new FiberRootNode(...)原创 2022-03-13 22:14:55 · 2045 阅读 · 0 评论 -
react-debugger-1
整体流程图概览从ReactDOM.createRoot到beginWorkcreateRoot会创建FiberRoot和rootFiber,并且初始化fiber.updateQueue然后到了render从render开始,创建update,插入updateQueue,开始调度,判断是否同步,执行对应的performSyncWorkOnRoot/performConcurrentWorkOnRoot开启render阶段。ReactDOM.render到render阶段的流程同样的场景Fi原创 2022-03-06 17:52:23 · 471 阅读 · 0 评论 -
react源码学习-实现篇-优先级
优先级什么是优先级生命周期方法:同步执行。受控的用户输入:比如输入框内输入文字,同步执行。交互事件:比如动画,高优先级执行。其他:比如数据请求,低优先级执行。如何调度优先级Schedule提供了runWithPriority方法,接受一个优先级常量和一个回调函数作为参数。回调函数会以优先级高低为顺序排列在一个定时器中并在合适的时间触发。Schedule对优先级的定义,值越低优先级越高。下面可以通过一个demo来了解Schedule的流程。[一文搞懂调度Schedule][原创 2022-03-06 11:07:07 · 502 阅读 · 0 评论 -
react源码学习-实习篇-状态更新
实现篇-状态更新状态更新的流程-几个关键节点先了解几个关键函数的调用,看看常见触发状态更新的方法是如何工作的。render阶段的开始之前就了解归,render阶段开始于performSyncWorkOnRoot/performConcurrentWorkOnRoot,他们会执行对应的performUnitOfWork方法。commit阶段的开始commit阶段开始于commitRoot方法的调用,rootFiber作为传参。render阶段完成后会进入commit阶段。那么从触发状态更新,到r原创 2022-03-06 11:05:39 · 1554 阅读 · 0 评论 -
react源码学习-实现篇-useEffect
useEffect在commit阶段的before-mutation阶段之前,会使用scheduleCallback调度useEffect。可以看到useEffect的优先级是普通优先级。flushPassiveEffectsImpl主要做三件事,1 调用改useEffect在上一次render时的销毁函数; 2 调用该useEffect在本次render的回调函数。 3 存在同步任务的话,就执行他,不需要等到下次事件循环的宏任务。1 调用useEffect的销毁函数。commitPassi原创 2022-03-06 11:00:36 · 1124 阅读 · 0 评论 -
react源码学习-实现篇-hooks
极简hooks实现通过下面demo可以知道react中hooks的执行流程。极简hooks实现通过demo我们知道,mount的时候,每个hooks会创建一个hooks对象,而hooks的状态就存放在hooks对象上,多个hooks对象以链表形式存放在fiber节点上,每次hooks状态更新,会生成update。update会放在hooks.queue.pending上,形成环状链表。重新执行函数组件,即重新执行如useState函数,这时候是update,从fiber上获取hooks对象,会获取ho原创 2022-03-06 10:56:58 · 830 阅读 · 0 评论 -
react源码学习-基类篇
基础篇createElememntjsx会被babel编译成React.createElement最终返回一个虚拟dom,$$typeof用来标识是一个react元素。ComponentComponent是React的基类,来看怎么实现的。如图,简单的几句代码而已,因为主要的实现在不同的平台自己实现,Component只是作为一个基础的类。这里需要注意有一个每个Component实例上有一个updater,不同的平台实现有不同的实现。类组件通过在prototype上标明isReact原创 2022-03-06 10:51:32 · 265 阅读 · 0 评论 -
react源码学习-架构篇-commit阶段
commit阶段在rootFiber.firstEffect上保存了一条需要执行副作用的Fiber节点的单向链表effectList,这些Fiber节点的updateQueue中保存了变化的props。这些副作用对应的dom操作在commit阶段执行,除此之外,一些生命周期钩子如componentDidXXX,useEffect需要在commit阶段执行。commie阶段开始于commitRoot函数commit阶段的工作主要分为三个部分:before mutation阶段(执行DOM操作前)原创 2022-03-06 10:48:35 · 985 阅读 · 3 评论 -
react源码学习-架构篇-render阶段
架构Reconciler工作的阶段属于render阶段,Renderer工作的阶段属于commit阶段。render与commit阶段统称为work,即React在工作中。相对应的,如果任务正在Scheduler内调度,就不属于work。render阶段分为递归两个阶段。render阶段的开始render阶段开始于performSyncWorkOnRoot/performConcurrentWorkOnRoot,主要区别是本次是同步(ReactDOM.render)还是异步更新(ReactDOM.原创 2022-03-06 10:43:11 · 365 阅读 · 0 评论 -
react源码学习之-理念篇
theme: nico理念篇快速响应的瓶颈之一就是cpu限制,浏览器的js线程与gui渲染线程互斥,一旦js执行过长,就会导致卡顿。解决这个问题的关键就是:在浏览器每一帧的时间中,预留一些时间给JS线程,React利用这部分时间更新组件解决CPU瓶颈的关键是实现时间切片,而时间切片的关键是:将同步的更新变为可中断的异步更新。瓶颈之二就是IO的瓶颈: React实现了[Suspense ]功能及配套的hook——useDeferredValue为了支持这些特性,同样需要将同步的更新变为可中断.原创 2022-03-06 10:34:50 · 148 阅读 · 0 评论