react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
引言
react15之前面臨的問題
1.如果界面節(jié)點(diǎn)多，層次深，遞歸渲染比較耗時(shí)
2.js是單線程，而且UI線程和Js線程互斥
什么是Fiber
1.Fiber其實(shí)是指的是一種數(shù)據(jù)結(jié)構(gòu)，它可以用一個(gè)純JS對象來表示
const fiber= {
stateNode,//節(jié)點(diǎn)實(shí)例
child,
sibling,
return
}2.Fiber是一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React就會檢查現(xiàn)在還剩多少時(shí)間，如果沒有時(shí)間就將控制權(quán)讓出去
Fiber關(guān)鍵特性
1.增量渲染
2.暫停，終止，復(fù)用渲染任務(wù)
3.不同更新的優(yōu)先級
4.并發(fā)方面新的基礎(chǔ)能力
用requestAnimationFrame+MessageChannel實(shí)現(xiàn)requestldleCallback
let activeTimeFrame = 1000/60;//每幀的時(shí)間
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);// 后面計(jì)算是否超時(shí)使用的
deadFrameTime = rafTime + activeTimeFrame;
pendingCallback = callback;
channel.port1.postMessage("hello");
})
}Fiber執(zhí)行階段
每次渲染有兩個(gè)階段：Reconciliation(協(xié)調(diào)render階段)和commit(提交階段)
一、協(xié)調(diào)階段：可以認(rèn)為是diff階段，這個(gè)階段會找出所有節(jié)點(diǎn)變更，這些變更稱為React的副作用
二、提交階段：將上一階段計(jì)算出來的需要處理的副作用（effects）一次性執(zhí)行，這個(gè)階段必須同步執(zhí)行，不能被打斷
遍歷規(guī)則：深度遍歷
以上就是react fiber使用的關(guān)鍵特性及執(zhí)行階段詳解的詳細(xì)內(nèi)容，更多關(guān)于react fiber特性執(zhí)行階段的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用react context 實(shí)現(xiàn)vue插槽slot功能
這篇文章主要介紹了使用react context 實(shí)現(xiàn)vue插槽slot功能，文中給大家介紹了vue的slot的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-07-07
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦κ袌錾纤?JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下2016-11-11
淺談react-native熱更新react-native-pushy集成遇到的問題
下面小編就為大家?guī)硪黄獪\談react-native熱更新react-native-pushy集成遇到的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
寫react的時(shí)候，踩了幾次坑發(fā)現(xiàn)setstate之后state不會立刻更新，于是判定setstate就是異步的方法，但是直到有一天，我想立刻拿到更新的state去傳參另一個(gè)方法的時(shí)候，才問自己，為什么setstate是異步的？準(zhǔn)確地說，在React內(nèi)部機(jī)制能檢測到的地方，setState就是異步的2022-10-10
React使用JSX來替代常規(guī)的JavaScript。JSX是一個(gè)看起來很像 XML的JavaScript語法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化。它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯(cuò)誤。使用JSX編寫模板更加簡單快速2022-12-12
React項(xiàng)目中decorators裝飾器報(bào)錯(cuò)問題解決方案
這篇文章主要介紹了React項(xiàng)目中decorators裝飾器報(bào)錯(cuò)，本文給大家分享問題所在原因及解決方案，通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
React的context就是一個(gè)全局變量，可以從根組件跨級別在React的組件中傳遞。React context的API有兩個(gè)版本，React16.x之前的是老版本的context，之后的是新版本的context2022-11-11
本文主要介紹了React中使用axios發(fā)送請求的幾種常用方法，主要介紹了get和post請求，具有一定的參考價(jià)值，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了在react中使用tailwind的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解React中多種組件通信方式的實(shí)現(xiàn)
在React中,組件之間的通信是一個(gè)非常重要的話題,React提供了幾種方式來實(shí)現(xiàn)跨組件通信,下面小編將詳細(xì)講講其中幾種通信方式,并提供實(shí)際的代碼示例,需要的可以參考下2023-11-11