react fiber使用的关键特性及执行阶段详解
更新时间：2023年05月23日 09:56:23 作者：ohoherror
这篇文章主要为大家介绍了react fiber使用的关键特性及执行阶段详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
react15之前面临的问题
1.如果界面节点多，层次深，递归渲染比较耗时
2.js是单线程，而且UI线程和Js线程互斥
什么是Fiber
1.Fiber其实是指的是一种数据结构，它可以用一个纯JS对象来表示
const fiber= {
stateNode,//节点实例
child,
sibling,
return
}2.Fiber是一个执行单元，每次执行完一个执行单元，React就会检查现在还剩多少时间，如果没有时间就将控制权让出去
Fiber关键特性
1.增量渲染
2.暂停，终止，复用渲染任务
3.不同更新的优先级
4.并发方面新的基础能力
用requestAnimationFrame+MessageChannel实现requestldleCallback
let activeTimeFrame = 1000/60;//每帧的时间
let deadFrameTime;
let pendingCallback;
let channel = new MessageChanne();
let timeRemaining = ()=>deadFrameTime - performance.now
channel.port2.onMessage = function(){
console.log("接收到port1返回的消息")
let currentTime = performance.now()
let didTimeOut = deadFrameTime<=currentTime
if(didTimeOut||timeRemaining>0){
if(pendingCallback){
pendingCallback(didTimeOut,timeRemaining)
}
}
}
window.requestldleCallback = function(callback,option){
window.requestAnimationFrame((rafTime)=>{
console.log(rafTime);// 后面计算是否超时使用的
deadFrameTime = rafTime + activeTimeFrame;
pendingCallback = callback;
channel.port1.postMessage("hello");
})
}Fiber执行阶段
每次渲染有两个阶段：Reconciliation(协调render阶段)和commit(提交阶段)
一、协调阶段：可以认为是diff阶段，这个阶段会找出所有节点变更，这些变更称为React的副作用
二、提交阶段：将上一阶段计算出来的需要处理的副作用（effects）一次性执行，这个阶段必须同步执行，不能被打断
遍历规则：深度遍历
以上就是react fiber使用的关键特性及执行阶段详解的详细内容，更多关于react fiber特性执行阶段的资料请关注脚本之家其它相关文章！
相关文章
在 React 中,我们经常需要更新组件的状态（state）,使用 setState 方法是一种常见的方式来实现状态的更新,而在使用 setState 方法时,有两种不同的写法,即对象式和函数式,本文将介绍这两种写法的区别和使用场景,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了React实现pc端的弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家介绍了react定位组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了React 源码中的依赖注入方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文主要介绍了React文字展开收起组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）
本篇文章主要介绍了React-Native解决键盘遮挡问题（Keyboard遮挡问题），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了详解Ant Design of React的安装和使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文主要介绍了React useEffect异步操作常见问题小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了浅谈React碰到v-if,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了 React 组件中的 bind(this) ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
最新评论