React原理相关

董俊豪
2022-03-15 / 0 评论 / 0 点赞 / 634 阅读 / 1,007 字
温馨提示:
本文最后更新于 2022-03-18,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

一、React

React15 阻塞用户操作,优先级不明确
React16 所有更新标记优先级,数据结构由数组变成链表(child return) Fiber节点连接它的子节点,为了方便中断,新增Scheduler模块调度优先级,
Scheduler调度流程 高优先级先进入recociler,同步任务主线程立即执行,异步走调度,根据startTime currentTime计算得到expirationTime,分render commit阶段,多个setstate,在同一个更新队列优先级相同,调用同一个回调
Reconciler 协调器 负责构建fiber tree 找出变化组件
react发生更新,从fiber root开始从上往下遍历,找到变化的节点,构建形成fiber tree,react内部存在两颗fiber树双缓存,屏幕显示为currentFiber 内存为workInProgress Fiber
React17 连续区间的优先级 车道概念,判断优先级高低

二、diff

diff
1.只对同级比较
2.节点变化直接删除重建
3.存在key值,对比key值

三、hooks用法和原理

useContext+useReducer+createContext = redux
useEffect:模拟声明周期 componentDidMount+didUpdate/willMount,当依赖数组中的值变化时,useEffect的callback会执行,mount阶段执行一次,不加依赖数组每次state变化都会执行
useMemo:缓存一个值存对象 子组件用React.memo
useCallBack:缓存一个function 当依赖变化才生成新的函数 父组件用,如果不加依赖函数,需要通过用回调函数
useRef:ref在function里使用 组件不需要重新渲染
useState:定义state和改变state 返回新的引用
useRef:1.用来定义变量,这些变量更改之后不会引起页面重新渲染,比如分页获取数据时,存储页码。
2.在DOM节点上定义ref属性,通过.current就可以获取到该DOM元素

四、常见问题:

1.setstate只能放在函数顶级作用域,不能放于判断语句内,因为hooks通过链表连接查找
2.依赖死循环 usecallbacl 和useEffect相互影响死循环 如果相互依赖拆分两个useeffect
3.把依赖干掉 setage通过传函数,使用useRef

0

评论区