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 context 实现vue插槽slot功能
这篇文章主要介绍了使用react context 实现vue插槽slot功能，文中给大家介绍了vue的slot的实现方法,需要的朋友可以参考下
2019-07-07
ReactJs快速入门教程(精华版)
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.这篇文章主要介绍了ReactJs快速入门教程(精华版)的相关资料,需要的朋友可以参考下
2016-11-11
浅谈react-native热更新react-native-pushy集成遇到的问题
下面小编就为大家带来一篇浅谈react-native热更新react-native-pushy集成遇到的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
react源码层探究setState作用
写react的时候，踩了几次坑发现setstate之后state不会立刻更新，于是判定setstate就是异步的方法，但是直到有一天，我想立刻拿到更新的state去传参另一个方法的时候，才问自己，为什么setstate是异步的？准确地说，在React内部机制能检测到的地方，setState就是异步的
2022-10-10
React JSX深入浅出理解
React使用JSX来替代常规的JavaScript。JSX是一个看起来很像 XML的JavaScript语法扩展。我们不需要一定使用 JSX，但它有以下优点：JSX执行更快，因为它在编译为JavaScript代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用JSX编写模板更加简单快速
2022-12-12
React项目中decorators装饰器报错问题解决方案
这篇文章主要介绍了React项目中decorators装饰器报错，本文给大家分享问题所在原因及解决方案，通过图文实例相结合给大家介绍的非常详细,需要的朋友可以参考下
2023-01-01
React高级特性Context万字详细解读
React的context就是一个全局变量，可以从根组件跨级别在React的组件中传递。React context的API有两个版本，React16.x之前的是老版本的context，之后的是新版本的context
2022-11-11
React中使用axios发送请求的几种常用方法
本文主要介绍了React中使用axios发送请求的几种常用方法，主要介绍了get和post请求，具有一定的参考价值，感兴趣的可以了解一下
2021-08-08
在react中使用tailwind的问题
这篇文章主要介绍了在react中使用tailwind的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
详解React中多种组件通信方式的实现
在React中,组件之间的通信是一个非常重要的话题,React提供了几种方式来实现跨组件通信,下面小编将详细讲讲其中几种通信方式,并提供实际的代码示例,需要的可以参考下
2023-11-11