react源码解析
文章平均质量分 92
天马小咸鱼
向真理下跪
展开
-
React源码解析————ReactElementValidator,useMutableSource,startTransition
React源码解析————ReactElementValidator,ReactMutableSource,useMutableSource2021SC@SDUSCReactElementValidatorcreateElementWithValidationcreateFactoryWithValidationcloneElementWithValidationReactMutableSourceuseMutableSource2021SC@SDUSC2021SC@SDUSCReactElement原创 2021-12-26 14:36:41 · 532 阅读 · 0 评论 -
React源码解析————Commit阶段(三)
React源码解析————Commit阶段(三)2021SC@SDUSC2021SC@SDUSC2021SC@SDUSC原创 2021-12-26 10:59:40 · 433 阅读 · 0 评论 -
React源码解析————Commit阶段(二)
React源码解析————Commit阶段(二)2021SC@SDUSCmutation 阶段2021SC@SDUSC2021SC@SDUSCmutation 阶段现在我们来看执行DOM的mutation阶段类似before mutation阶段,mutation阶段也是遍历effectList,执行函数。这里首先执行的是commitMutationEffects。然后commitMutationEffects调用commitMutationEffects_begin,在commitMutatio原创 2021-12-25 21:09:03 · 513 阅读 · 0 评论 -
React源码解析————Commit阶段(一)
React源码解析————Commit阶段(一)2021SC@SDUSCcommit阶段commitRootbefore mutation阶段2021SC@SDUSC2021SC@SDUSCcommit阶段前几篇我们介绍了render阶段,现在我们来看commit阶段,commitRoot方法是commit阶段工作的起点。fiberRootNode会作为传参。同时在rootFiber.firstEffect上保存了一条需要执行副作用的Fiber节点的单向链表effectList,这些Fiber节点原创 2021-12-18 21:23:45 · 620 阅读 · 0 评论 -
React源码解析————Render阶段(三)
React源码解析————Render阶段(三)2021SC@SDUSCCompleteWork流程预览HostComponent2021SC@SDUSC2021SC@SDUSCCompleteWork流程预览类似beginWork,completeWork也是针对不同fiber.tag调用不同的处理逻辑。function completeWork( current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes,)原创 2021-12-11 22:54:16 · 248 阅读 · 0 评论 -
React源码解析————Render阶段(二)
React源码解析————Render阶段(二)2021SC@SDUSCBeginWorkCompleteWork2021SC@SDUSC2021SC@SDUSCBeginWork先看传递的参数function beginWork( current: Fiber | null, workInProgress: Fiber, renderLanes: Lanes,)1.current:当前组件对应的Fiber节点在上一次更新时的Fiber节点,workInProgress.alte原创 2021-12-04 21:10:17 · 520 阅读 · 0 评论 -
React源码解析————Render阶段(一)
React源码解析————ReactHooks(四)2021SC@SDUSC前言2021SC@SDUSC2021SC@SDUSC前言为了巩固我们对react hooks的理解,我们尝试去构建一个简单useState原创 2021-11-27 18:48:38 · 743 阅读 · 0 评论 -
React源码解析————ReactHooks(三)
React源码解析————ReactHooks(三)2021SC@SDUSCReactHooksupdateWorkInProgressHook2021SC@SDUSC2021SC@SDUSCReactHooks上一篇文章我们介绍了react-hooks初始化都做些什么,接下来,我们分析一下,对于更新阶段,说明上一次 workInProgress 树已经赋值给了 current 树。存放hooks信息的memoizedState,此时已经存在current树上,react对于hooks的处理逻辑和f原创 2021-11-20 21:07:40 · 1208 阅读 · 0 评论 -
React源码解析————ReactHooks(二)
React源码解析————ReactHooks(二)2021SC@SDUSCReactHooksmountWorkInProgressHookmountStatedispatchAction 无状态组件更新机制mountEffectpushEffectreadContextupdateReducermountMemomountRef总结2021SC@SDUSC2021SC@SDUSCReactHooks本文将重点围绕四个中重点hooks展开,分别是负责组件更新的useState,负责执行副作用use原创 2021-11-13 23:20:06 · 961 阅读 · 0 评论 -
React源码解析————ReactHooks(一)
React源码解析————ReactHooks.js2021SC@SDUSC2021SC@SDUSC2021SC@SDUSC原创 2021-11-07 12:28:11 · 608 阅读 · 0 评论 -
React源码解析————ReactContext.js,ReactLazy.js
React源码解析————ReactContent.js2021SC@SUDSCReactContent2021SC@SUDSC2021SC@SUDSCReactContentimport {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';import type {ReactContext} from 'shared/ReactTypes';export function createContext<原创 2021-10-29 11:21:36 · 340 阅读 · 0 评论 -
React源码解析————ReactElement.js
React源码解析————ReactElement.js2021SC@SUDSC总览2021SC@SUDSC2021SC@SUDSC总览ReactElement.js内部函数有:│ ├── hasValidRef ----------------------------- 检测获取config上的ref是否合法│ ├── hasValidKey ----------------------------- 检测获取config上的key是否合法│ ├── defineKeyPropW原创 2021-10-23 14:04:49 · 371 阅读 · 0 评论 -
React源码解析————ReactChildren.js
React源码解析————ReactChildren.js2021SC@SUDSCReactChildren.jsimport2021SC@SUDSC2021SC@SUDSCReactChildren.js只要是看过源码的同学都知道,这个js文件一共导出了五个方法:export { forEachChildren as forEach, mapChildren as map, countChildren as count, onlyChild as only, toArray,原创 2021-10-14 22:35:23 · 359 阅读 · 2 评论 -
React源码解析——ReactVersion.js,ReactSymbols.js,ReactBaseClasses.js和ReactCreateRef.js
React源码解析——012021SC@SUDSC引言ReactBaseClasses.jsxxxxxxxx12021SC@SUDSC2021SC@SUDSC引言ReactBaseClasses.js在我们平时写一个类组件的时候,一般都会继承一个React.Component这个基类,我们可能会觉得,这个baseClass可能封装各种各样的功能(钩子函数等等),它帮助我们运行render函数,然后最终不是我们写在里面的dom标签、子组件之类的把它们都渲染到浏览器里的这种形式。但实际是这样的吗?答案原创 2021-10-09 22:22:41 · 434 阅读 · 0 评论 -
React源码解析————前言
React源码解析————前言简单概述新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入简单概述1.React是什么1-1:React开发背景:1:React是facebook官方推出的JavaScritp库和框架,为原创 2021-09-29 20:40:31 · 268 阅读 · 0 评论