欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react基礎知識總結

 更新時間:2021年04月23日 09:38:10   作者:greet_eason  
這篇文章主要介紹了react常用的基礎知識總結,幫助大家更好的理解和學習使用react框架,感興趣的朋友可以了解下

前言

最近在準備面試。復習了一些react的知識點,特此總結。

開始

React 生命周期

react 16以前的生命周期是這樣的

組件在首次渲染時會被實例化,然后調用實例上面的componentWillMount,render和componentDidMount函數(shù)。組件在更新渲染時可以調用componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,render和componentDidUpdate函數(shù)。組件在卸載時可以調用componentWillUnmount函數(shù)。

借圖:

從 React v16.3 開始,React 建議使用getDerivedStateFromProps和getSnapshotBeforeUpdate兩個生命周期函數(shù)替代 componentWillMount,componentWillReceiveProps和componentWillUpdate三個生命周期函數(shù)。這里需要注意的是 新增的兩個生命周期 函數(shù)和原有的三個生命周期函數(shù)必須分開使用,不能混合使用

目前的生命周期(借圖):

componentWillMount存在的問題

有人認為在componentWillMount中可以提前進行異步請求,避免白屏。但是react在調用render渲染頁面的時候,render并不會等待異步請求結束,再獲取數(shù)據(jù)渲染。這么寫是有潛在隱患的。

而在react fiber之后 可能在一次渲染中多次調用。原因是:react fiber技術使用增量渲染來解決掉幀的問題,通過requestIdleCallback調度執(zhí)行每個任務單元,可以中斷和恢復,生命周期一旦中斷,恢復之后會重新跑一次之前的生命周期

新的生命周期

static getDerivedStateFromProps

  • 觸發(fā)時間(v16.4修正):組件每次被rerender的時候,包括在組件構建之后(render之前最后執(zhí)行),每次獲取新的props或state之后。在v16.3版本時,組件state的更新不會觸發(fā)該生命周期
  • 每次接收新的props之后都會返回一個對象作為新的state,返回null則說明不需要更新state
  • 配合componentDidUpdate,可以覆蓋componentWillReceiveProps的所有用法

getSnapshotBeforeUpdate

觸發(fā)時間: update發(fā)生的時候,在render之后,在組件dom渲染之前。
返回一個值,作為componentDidUpdate的第三個參數(shù)。
配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法。

React Fiber

由于React渲染/更新過程一旦開始無法中斷,持續(xù)占用主線程,主線程忙于執(zhí)行JS,無暇他顧(布局、動畫),造成掉幀、延遲響應(甚至無響應)等不佳體驗。fiber應運而生。

Fiber 是對react reconciler(調和) 核心算法的重構。關鍵特性如下:

  • 增量渲染(把渲染任務拆分成塊,勻到多幀)
  • 更新時能夠暫停,終止,復用渲染任務
  • 給不同類型的更新賦予優(yōu)先級
  • 并發(fā)方面新的基礎能力

增量渲染用來解決掉幀的問題,渲染任務拆分之后,每次只做一小段,做完一段就把時間控制權交還給主線程,而不像之前長時間占用。

Fiber tree

  • Fiber之前的reconciler(被稱為Stack reconciler)自頂向下的遞歸mount/update,無法中斷(持續(xù)占用主線程),這樣主線程上的布局、動畫等周期性任務以及交互響應就無法立即得到處理,影響體驗。
  • Fiber解決這個問題的思路是把渲染/更新過程(遞歸diff)拆分成一系列小任務,每次檢查樹上的一小部分,做完看是否還有時間繼續(xù)下一個任務,有的話繼續(xù),沒有的話把自己掛起,主線程不忙的時候再繼續(xù)。

fiber樹其實是一個單鏈表結構,child指向第一個子節(jié)點,return指向父節(jié)點,sibling指向下個兄弟節(jié)點。結構如下:

// fiber tree節(jié)點結構
{
    stateNode,
    child,
    return,
    sibling,
    ...
}

Fiber reconciler

reconcile過程分為2個階段:

1.(可中斷)render/reconciliation 通過構造workInProgress tree得出change

2.(不可中斷)commit 應用這些DOM change(更新DOM樹、調用組件生命周期函數(shù)以及更新ref等內部狀態(tài))

構建workInProgress tree的過程就是diff的過程,通過requestIdleCallback來調度執(zhí)行一組任務,每完成一個任務后回來看看有沒有插隊的(更緊急的),每完成一組任務,把時間控制權交還給主線程,直到下一次requestIdleCallback回調再繼續(xù)構建workInProgress tree

生命周期也被分成了兩個階段:

// 第1階段 render/reconciliation
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

// 第2階段 commit
componentDidMount
componentDidUpdate
componentWillUnmount

第1階段的生命周期函數(shù)可能會被多次調用,默認以low優(yōu)先級執(zhí)行,被高優(yōu)先級任務打斷的話,稍后重新執(zhí)行。

fiber tree與workInProgress tree

雙緩沖技術:指的是workInProgress tree構造完畢,得到的就是新的fiber tree,然后把current指針指向workInProgress tree,由于fiber與workInProgress互相持有引用,舊fiber就作為新fiber更新的預留空間,達到復用fiber實例的目的。

每個fiber上都有個alternate屬性,也指向一個fiber,創(chuàng)建workInProgress節(jié)點時優(yōu)先取alternate,沒有的話就創(chuàng)建一個

let workInProgress = current.alternate;
if (workInProgress === null) {
  //...
  workInProgress.alternate = current;
  current.alternate = workInProgress;
} else {
  // We already have an alternate.
  // Reset the effect tag.
  workInProgress.effectTag = NoEffect;

  // The effect list is no longer valid.
  workInProgress.nextEffect = null;
  workInProgress.firstEffect = null;
  workInProgress.lastEffect = null;
}

這么做的好處:

  • 能夠復用內部對象(fiber)
  • 節(jié)省內存分配、GC的時間開銷

fiber 中斷 恢復

中斷:檢查當前正在處理的工作單元,保存當前成果(firstEffect, lastEffect),修改tag標記一下,迅速收尾并再開一個requestIdleCallback,下次有機會再做

斷點恢復:下次再處理到該工作單元時,看tag是被打斷的任務,接著做未完成的部分或者重做

P.S.無論是時間用盡“自然”中斷,還是被高優(yōu)任務粗暴打斷,對中斷機制來說都一樣。

React setState

在代碼中調用setState函數(shù)之后,React 會將傳入的參數(shù)對象與組件當前的狀態(tài)合并,然后觸發(fā)所謂的調和過程(Reconciliation)。經過調和過程,React 會以相對高效的方式根據(jù)新的狀態(tài)構建 React 元素樹并且著手重新渲染整個UI界面。在 React 得到元素樹之后,React 會自動計算出新的樹與老樹的節(jié)點差異,然后根據(jù)差異對界面進行最小化重渲染。在差異計算算法中,React 能夠相對精確地知道哪些位置發(fā)生了改變以及應該如何改變,這就保證了按需更新,而不是全部重新渲染。

setState調用時有時是同步的(settimeout,自定義dom事件),有時是異步的(普通調用)

React 事件機制

React事件是通過事件代理,在最外層的 document上對事件進行統(tǒng)一分發(fā),并沒有綁定在真實的 Dom節(jié)點上。 而且react內部對原生的Event對象進行了包裹處理。具有與瀏覽器原生事件相同的接口,包括 stopPropagation() 和 preventDefault()。

以上就是react基礎知識總結的詳細內容,更多關于react基礎知識的資料請關注腳本之家其它相關文章!

相關文章

  • React報錯Function?components?cannot?have?string?refs

    React報錯Function?components?cannot?have?string?refs

    這篇文章主要為大家介紹了React報錯Function?components?cannot?have?string?refs解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • React報錯map()?is?not?a?function詳析

    React報錯map()?is?not?a?function詳析

    這篇文章主要介紹了React報錯map()?is?not?a?function詳析,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • React native ListView 增加頂部下拉刷新和底下點擊刷新示例

    React native ListView 增加頂部下拉刷新和底下點擊刷新示例

    這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點擊刷新示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • React冒泡和阻止冒泡的應用詳解

    React冒泡和阻止冒泡的應用詳解

    這篇文章主要介紹了React冒泡和阻止冒泡的應用詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-08-08
  • 詳解react hooks組件間的傳值方式(使用ts)

    詳解react hooks組件間的傳值方式(使用ts)

    本文主要介紹了react hooks組件間的傳值方式(使用ts),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • react如何同步獲取useState的最新狀態(tài)值

    react如何同步獲取useState的最新狀態(tài)值

    這篇文章主要介紹了react如何同步獲取useState的最新狀態(tài)值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React如何實現(xiàn)Vue的watch監(jiān)聽屬性

    React如何實現(xiàn)Vue的watch監(jiān)聽屬性

    在 Vue 中可以簡單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化,還能獲取到改變前的舊值,而在 React 中是沒有 watch 的,今天通過本文給大家講解React實現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下
    2023-06-06
  • react如何實現(xiàn)一個密碼強度檢測器詳解

    react如何實現(xiàn)一個密碼強度檢測器詳解

    這篇文章主要給大家介紹了關于react如何實現(xiàn)一個密碼強度檢測器的相關資料,使用這個密碼強度器后可以幫助大家提高在線帳號、個人信息的安全性,需要的朋友可以參考下
    2021-06-06
  • React錯誤的習慣用法分析詳解

    React錯誤的習慣用法分析詳解

    這篇文章主要為大家介紹了React錯誤用法習慣分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • ios原生和react-native各種交互的示例代碼

    ios原生和react-native各種交互的示例代碼

    本篇文章主要介紹了ios原生和react-native各種交互的示例代碼,非常具有實用價值,需要的朋友可以參考下
    2017-08-08

最新評論