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