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特性执行阶段的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

在create-react-app中使用css modules的示例代码
这篇文章主要介绍了在create-react-app中使用css modules的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
react实现动态增减表单项的示例代码
在做项目的时候,甲方给的信息有限,网页的备案信息写成固定的,之后验收的时候,甲方要求把这个备案信息写成动态的,可以自增减,下面通过实例代码给大家介绍react实现动态增减表单项的示例,感兴趣的朋友跟随小编一起看看吧
2024-05-05
react中代码块输出,代码高亮显示,带行号,能复制的问题
这篇文章主要介绍了react中代码块输出，代码高亮显示，带行号，能复制的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
React组件通信的实现示例
在React中,组件通信是一个重要的概念,它允许不同组件之间进行数据传递和交互，本文主要介绍了React组件通信的实现示例，感兴趣的可以了解一下
2023-11-11
React中使用axios发送请求的几种常用方法
本文主要介绍了React中使用axios发送请求的几种常用方法，主要介绍了get和post请求，具有一定的参考价值，感兴趣的可以了解一下
2021-08-08
详解React Fiber架构原理
Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
2022-08-08
react-native组件中NavigatorIOS和ListView结合使用的方法
这篇文章主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-09-09
详解React Native与IOS端之间的交互
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。本文将介绍React Native与IOS端之间的交互。
2021-06-06
React Store及store持久化的使用教程
这篇文章主要介绍了React Store及store持久化的使用教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
详解React setState数据更新机制
这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
2021-04-04