React 相關資料

1. 區(qū)分真實DOM (Real DOM) 和虛擬DOM (Virtual DOM)

區(qū)別

2.React 核心

1.React 是 Facebook 在 2011 年開發(fā)的前端 JavaScript 庫。

2.它遵循基于組件的方法,有助于構建可重用的UI組件。

3.它用于開發(fā)復雜和交互式的 Web 和移動 UI。

4.它使用**虛擬DOM **而不是真正的DOM。

5.它可以用服務器端渲染

6.它遵循單向數(shù)據(jù)流或數(shù)據(jù)綁定。

3.優(yōu)點

1.它提高了應用的性能

2.可以方便地在客戶端和服務器端使用

3.由于 JSX,代碼的可讀性很好

4.React 很容易與 Meteor,Angular 等其他框架集成

5.使用React,編寫UI測試用例變得非常容易

4.Virtual DOM 虛擬DOM

它是一個節(jié)點樹,它將元素、它們的屬性和內(nèi)容作為對象及其屬性。 React 的渲染函數(shù)(render)從 React 組件中創(chuàng)建一個節(jié)點樹。然后它響應數(shù)據(jù)模型中的變化來更新該樹,該變化是由用戶或系統(tǒng)完成的各種動作引起的。

1.每當?shù)讓訑?shù)據(jù)發(fā)生改變時,整個 UI 都將在 Virtual DOM 描述中重新渲染。

2.然后計算之前 DOM 表示與新表示的之間的差異。

3.完成計算后,將只用實際更改的內(nèi)容更新 real DOM。

5.生命周期


componentWillMount**()** – 在渲染之前執(zhí)行,在客戶端和服務器端都會執(zhí)行。

componentDidMount**()** – 僅在第一次渲染后在客戶端執(zhí)行。

componentWillReceiveProps**()** – 當從父類接收到 props 并且在調(diào)用另一個渲染器之前調(diào)用。

shouldComponentUpdate**()** – 根據(jù)特定條件返回 true 或 false。如果你希望更新組件,請返回true否則返回false。默認情況下,它返回 false。

componentWillUpdate**()** – 在 DOM 中進行渲染之前調(diào)用。

componentDidUpdate**()** – 在渲染發(fā)生后立即調(diào)用。

componentWillUnmount**()** – 從 DOM 卸載組件后調(diào)用。用于清理內(nèi)存空間。

6.什么是高階組件(HOC)?

高階組件是重用組件邏輯的高級方法,是一種源于 React 的組件模式。 HOC 是自定義組件,在它之內(nèi)包含另一個組件。它們可以接受子組件提供的任何動態(tài),但不會修改或復制其輸入組件中的任何行為。你可以認為 HOC 是“純(Pure)”組件。

7.React 中 key 的重要性是什么?

key 用于識別唯一的 Virtual DOM 元素及其驅(qū)動 UI 的相應數(shù)據(jù)。它們通過回收 DOM 中當前所有的元素來幫助 React 優(yōu)化渲染。這些 key 必須是唯一的數(shù)字或字符串,React 只是重新排序元素而不是重新渲染它們。這可以提高應用程序的性能。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容