
React
文章平均质量分 82
我的名字豌豆
专注前端开发,懂一些Go啦~
展开
-
React之Diff算法
对于Vue2的diff算法使用了双指针,React的diff算法没有使用双指针,是因为更新的jsx对象的newChildren为数组的形式,但是和newChildren中每个组件比较的是current fiber,对fiber的兄弟节点是通过silbing来相连的,我们通过下标来去获取下一个newChildren项,但是对于fiber只能通过fiber.silbing来获取对应的项,所以没有使用双指针法来进行diff。既然唯一的可能性已经不能复用,则剩下的fiber都没有机会了,所以都需要标记删除。原创 2023-02-02 01:02:59 · 1626 阅读 · 1 评论 -
React中commit阶段发生了什么
函数在执行过程中对外部造成的影响可以称之为副作用,副作用包含的类型很多,比如说标记值为Placement时,会叫Dom节点进行插入与移动,Passive代表useEffect进行回调执行,ChildDeletion指移除子Dom节点对于React的工作原理可以简单概括为触发更新render阶段:计算更新会造成的副作用commit阶段:执行副作用更新Dom变化主要就是Placement、ChildDeletion在起作用,在render阶段来进行保存副作用,在commit阶段来使用副作用。原创 2023-01-28 01:02:02 · 1545 阅读 · 0 评论 -
React源码之render过程中发生了什么?
递”:递阶段首先会从 rootFiber 开始向下深度优先遍历。遍历到的每个 Fiber 节点,会调用 beginWork 方法,并且该方法会为传入的 Fiber 节点创建它的子 Fiber 节点,并赋值给 workInProgress.child 进行连接,当遍历到叶子节点时就会进入归阶段这个过程也叫做调和“归”:就是向上归并的过程,会执行 completeWork 方法来处理 Fiber 节点,当某个 Fiber 节点执行完 completeWork,如果有兄弟 Fiber 节点,会。原创 2023-01-23 17:25:20 · 967 阅读 · 0 评论 -
React源码之概念篇
这是从ReactDom.render后触发的步骤首先在React中需要在浏览器刷新一次就需要执行如下的步骤:JS脚本执行->样式布局->样式绘制,如果js执行时间超过了16.6ms,那么就没有时间留给样式布局,此时就会出现掉帧现象。React的设计理念:快速响应制约瓶颈:CPU与IO解决办法:异步可中断更新的机制老架构的更新策略:假如我们将dom的数据改为了2,4,6那么会出现如下的更新事项如果对于老的架构是无法实现异步可中断更新的,因为是递归调用执行栈,如果想要实现可中断则会出现如下情况,原创 2022-12-07 00:23:29 · 363 阅读 · 0 评论 -
React源码之Fiber架构
对于Fiber我们可以理解为存储在内存中的Dom对于React15在render阶段的reconcile是不可打断的,如果在操作大量的dom时,会存在卡顿,因为浏览器将所有的时间都交给了js引擎线程去执行,此时GUI渲染线程被阻塞,导致页面出现卡顿,无法响应用户对应的事件。原创 2022-12-07 00:26:38 · 1464 阅读 · 0 评论 -
react使用require图片无法加载
踩坑记录 在react中使用require进行导入本地图片时,无法显示图片,仔细检查发现图片的base64编码是在default属性里面,如下: 顾在此进行require进行引入图片时,加入default即可,代码如下: <img src={require("./images/1.png").default} alt=""/> 加入.default后图片进行正常显示,踩坑结束。...原创 2021-04-29 00:21:02 · 1163 阅读 · 0 评论