react相关整理

算法探幽人
• 阅读 757

pureComponent

是 ReactComponent.prototype = isPureComponent = true
为了在后面渲染的时候 checkShouldUpdate的时候 如果是isPureComponent 会进行shallowequall对oldProps,newProps 以及 newState oldState 两个都进行比较,如果不平等重新更新,进行的是前浅比较(object的话会判断keys 的length 以及keys)

hooks 要确保每一次渲染都中都按照同样的顺序被调用,不要再循环、嵌套以及条件中调用hooks

useState

初始化的时候回让memorizedState 等于 initialState
useState返回的是[memorizedState,dispatch]

useState 是按照执行顺序执行的,其内部是以单向链表的形式
Hook {

memorizedState: any, //指向当前渲染节点的fiber,上一次完整更新之后的最终状态值
baseState: any,  // 初始化的initialState,以及每次dispatch之后的newState
baseUpdate,     // 当前需要更新的update,每一更新完会赋值上一个update
queue: updateQueue | null // 缓存更新队列,存储多次更新昕蔚
next: HOOk || null 指向下一个需要执行的hook,通过next串联每一个hook

}
对于首次加载还是更新
useState = 当前fiber是否为空 , ReactCurrentDispatcher.current.useState 将要赋值成HooksDispatcherOnMount.useState,否则就是HooksDispatcherOnUpdate.useState.
useState = ReactCurrentDispatcher.current.useState = HooksDispatcherOnMount.useState = mountState;更新时 useState = ReactCurrentDispatcher.current.useState = HooksDispatcherOnUpdate.useState = updateState。
基于上从而初始化的时候调用的是mountState, 此时会创建一个新的hook,并返回当前的workInProgressHook, 初始化赋值memorizedState = baseState = initialState
创建dispatch绑定子当前fiber和队列。

useEffect

mountEffect
hook.memorizedState = pushEffect(hookEffectTag, create(useEffect穿进去的函数), undefined,deps(触发依赖的数组)) => return mountEffectImpl(hooksEff)
updateEffect
类同mountEffect,只是第三项会存在一个destroy,并且会areHookInputsEqual(nextDeps,prevDeps) 是否响应执行,如果是的则pushEffect(NoHookEffect,create,destroy,nextDeps)
pushEffect
针对mountEffect和updateEffect都执行了pushEffect做了条件判断,这里面是一个循环链表,这里面判断componentUpdateQueue是否为空,空从而是执行的mountEffect,此时责创建一个componentUpdateQueue,里面是{lastEffect: null};并且lastEffect指向effect.next,就是下一个effect

Fiber核心
Fiber的核心是从ReactDOM.render
render的核心是掉哟就那个updateContainer ==》 来源于react-reconciler =》 ReactFiberReconciler.JS
updateContainer ==》 执行返回 return updateContainerAtExpirationTime
updateContainerAtExpirationTime ===》 return scheduleRootUpdate
scheduleRootUpdate ==> 内部执行 enqueueUpdate & scheduleWork return expirationTime
重点在于sheduleWork(相当于Fiber入口)此时内部有 renderRoot
renderRoot里面关注两点

  1. workLoop 是代码的核心部分,配合循环是是实现任务循环
  2. 在超时的情况,会进入commit阶段
    在workLoop中 performUnitOfWork
点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表(关于日期时间时分秒显示不出来)
在使用皕杰报表设计器时,数据据里面是日期型,但当你web预览时候,发现有日期时间类型的数据时分秒显示不出来,只有年月日能显示出来,时分秒显示为0:00:00。1.可以使用tochar解决,数据集用selecttochar(flowdate,"yyyyMMddHH:mm:ss")fromtablename2.也可以把数据库日期类型date改成timestamp
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
4年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Easter79 Easter79
4年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
4年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
4年前
Unity横屏
Android下发现Unity里面的Player设置,并不能完全有效,比如打开了自动旋转,启动的时候还是会横屏,修改XML添加以下代码<applicationandroid:icon"@drawable/ic\_launcher"                    android:label"@string/app\_name"
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
React memo的原理、实践与思考
前言在react中,对一个组件进行点击事件等操作时,该组件以及该组件的子组件都会重新渲染。避免组件的重新渲染一般可以借助React.memo、useCallback等来实现。什么是memomemo原理memo类似于class中pureComponent的特
算法探幽人
算法探幽人
Lv1
春江潮水连海平,海上明月共潮生。
文章
4
粉丝
0
获赞
0