react?fiber使用的關(guān)鍵特性及執(zhí)行階段詳解
引言
react15之前面臨的問題
1.如果界面節(jié)點多，層次深，遞歸渲染比較耗時
2.js是單線程，而且UI線程和Js線程互斥
什么是Fiber
1.Fiber其實是指的是一種數(shù)據(jù)結(jié)構(gòu)，它可以用一個純JS對象來表示
const fiber= {
stateNode,//節(jié)點實例
child,
sibling,
return
}2.Fiber是一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React就會檢查現(xiàn)在還剩多少時間，如果沒有時間就將控制權(quán)讓出去
Fiber關(guān)鍵特性
1.增量渲染
2.暫停，終止，復(fù)用渲染任務(wù)
3.不同更新的優(yōu)先級
4.并發(fā)方面新的基礎(chǔ)能力
用requestAnimationFrame+MessageChannel實現(xiàn)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執(zhí)行階段
每次渲染有兩個階段：Reconciliation(協(xié)調(diào)render階段)和commit(提交階段)
一、協(xié)調(diào)階段：可以認(rèn)為是diff階段，這個階段會找出所有節(jié)點變更，這些變更稱為React的副作用
二、提交階段：將上一階段計算出來的需要處理的副作用（effects）一次性執(zhí)行，這個階段必須同步執(zhí)行，不能被打斷
遍歷規(guī)則：深度遍歷
以上就是react fiber使用的關(guān)鍵特性及執(zhí)行階段詳解的詳細(xì)內(nèi)容，更多關(guān)于react fiber特性執(zhí)行階段的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在create-react-app中使用css modules的示例代碼
這篇文章主要介紹了在create-react-app中使用css modules的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
react實現(xiàn)動態(tài)增減表單項的示例代碼
在做項目的時候,甲方給的信息有限,網(wǎng)頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
react中代碼塊輸出,代碼高亮顯示,帶行號,能復(fù)制的問題
這篇文章主要介紹了react中代碼塊輸出，代碼高亮顯示，帶行號，能復(fù)制的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在React中,組件通信是一個重要的概念,它允許不同組件之間進行數(shù)據(jù)傳遞和交互，本文主要介紹了React組件通信的實現(xiàn)示例，感興趣的可以了解一下2023-11-11
本文主要介紹了React中使用axios發(fā)送請求的幾種常用方法，主要介紹了get和post請求，具有一定的參考價值，感興趣的可以了解一下2021-08-08
Fiber?可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React?Fiber就會檢查還剩多少時間，如果沒有時間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React?Fiber架構(gòu)原理剖析,需要的朋友可以參考下2022-08-08
react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-09-09
React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架，是Facebook早先開源的JS框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物，支持iOS和安卓兩大平臺。本文將介紹React Native與IOS端之間的交互。2021-06-06
這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
詳解React setState數(shù)據(jù)更新機制
這篇文章主要介紹了React setState數(shù)據(jù)更新機制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04