日韩国产精品99成人不卡在线无毒|狠狠躁夜夜爽一级二级精品|亚洲日日噜噜孕妇中文字幕|日韩久草中文三级片

一. 說說對(duì) React 的理解，有哪些特性

官方的解釋:React 是一個(gè) UI 庫(kù)，它的核心思想是UI=F(data), 即界面的呈現(xiàn)是由函數(shù)傳入的參數(shù)決定的

開發(fā)者不再需要關(guān)心界面時(shí)如何渲染的，只要關(guān)心數(shù)據(jù)的生成和傳遞，這大大提高的開發(fā)者的開發(fā)效率，節(jié)省了開發(fā)時(shí)間

其次 React 設(shè)計(jì)的

• 使用類似 HTML 的JSX語(yǔ)法來描述視圖
• 通過虛擬DOM修改真實(shí)DOM
• 通過setState修改數(shù)據(jù)
• 在不同的生命周期階段做不同的事
• 源碼底層對(duì)真實(shí) DOM 事件進(jìn)行封裝，使用事件委托的方式來捕獲 DOM 事件
• ....

等特性進(jìn)一步簡(jiǎn)化的 真實(shí) DOM 操作的復(fù)雜性

二. 說說真實(shí) DOM 與虛擬 DOM 的區(qū)別，優(yōu)缺點(diǎn)

虛擬DOM

2.1 虛擬 DOM 是什么

• 真實(shí)DOM就是我們?cè)跒g覽器開發(fā)者工具中看到的DOM結(jié)構(gòu)
• 虛擬DOM簡(jiǎn)單來說就是 JS 對(duì)象，此對(duì)象中的字段包含了對(duì)真實(shí)DOM的描述:
• type:是什么標(biāo)簽/元素
• props:標(biāo)簽/元素有哪些屬性
• children:是否有子元素

a

2.2 虛擬 DOM 大概是如何工作的

當(dāng) DOM 操作（渲染更新）比較頻繁時(shí)，

React 底層會(huì)先將前后兩次的虛擬DOM 樹進(jìn)行對(duì)比，

定位出具體需要更新的部分，生成一個(gè)補(bǔ)丁集，

最后只把“補(bǔ)丁”打在需要更新的那部分真實(shí)DOM 上，實(shí)現(xiàn)精準(zhǔn)的“差量更新”。

2.3 虛擬 DOM 的優(yōu)點(diǎn)

1. 解決了頻繁操作真實(shí) DOM 的低效率工作-不直接操作 DOM，數(shù)據(jù)驅(qū)動(dòng)視圖,也在一定程度上提升了性能
2. 解決了擴(kuò)平臺(tái)開發(fā)的問題，因?yàn)樘摂M DOM 描述的東西可以是真實(shí) DOM,也可以是安卓界面。IOS 界面等等,這就可以對(duì)接不同平臺(tái)的渲染邏輯。從而實(shí)現(xiàn)"一次編碼，多端運(yùn)行"(如 React,React Native)

2.4 虛擬 DOM 的缺點(diǎn)

如果當(dāng)虛擬 DOM 的構(gòu)建和diff的過程相對(duì)復(fù)雜(比如很多遞歸遍歷等操作),那么虛擬 DOM 的 JS 計(jì)算是比較耗時(shí)的

三. 說說 Diff 算法

Diff算法

一般的原始 diff 思路算法復(fù)雜度是O(n^3),即循環(huán)遞歸進(jìn)行樹節(jié)點(diǎn)的一一對(duì)比

但 React 的 diff 算法是 O (n) 復(fù)雜度的思路

當(dāng)對(duì)比兩棵虛擬 DOM 樹時(shí)，React 首先比較兩棵樹的根節(jié)點(diǎn)。不同類型的根節(jié)點(diǎn)元素會(huì)有不同的形態(tài)

當(dāng)對(duì)比兩個(gè)相同類型的 React 元素時(shí)，React 會(huì)保留 DOM 節(jié)點(diǎn)，僅比對(duì)及更新有改變的屬性。

1. 當(dāng)根節(jié)點(diǎn)為不同類型的元素時(shí)，React 會(huì)拆卸原有的樹并且建立起新的樹，這大大減少了 Diff 過程中冗余的遞歸操作
2. 當(dāng)對(duì)比兩個(gè)相同類型的 React 元素時(shí)，React 會(huì)保留 DOM 節(jié)點(diǎn)，僅比對(duì)及更新有改變的屬性
3. 列表形式的子元素比較:React 引入了 key 屬性。當(dāng)子元素?fù)碛?nbsp;key 時(shí)，React 使用 key 來匹配原有樹上的子元素以及最新樹上的子元素,如果 key不同 不同則會(huì)拆卸原有的 key 節(jié)點(diǎn)并且建立起新的 key 節(jié)點(diǎn)

詳細(xì)內(nèi)容請(qǐng)參考React 官方文檔- Diffing 算法^[2]

四. 說說 React 聲明周期有哪些不同階段,每個(gè)階段對(duì)應(yīng)的方法是什么

image.png

4.1 創(chuàng)建階段

1. constructor():組件的構(gòu)造函數(shù)，組件更新到界面上之前會(huì)先調(diào)用

• 用于初始化內(nèi)部狀態(tài),很少使用
• 唯一可以直接修改 state 的地方

2. static getDerivedStateFromProps(nextProps, prevState):用于從外部的屬性去初始化一些內(nèi)部的狀態(tài)

• 當(dāng) state 需要從 props 初始化時(shí)使用
• 盡量不要使用,維護(hù) state/props 狀態(tài)一致性會(huì)增加復(fù)雜度
• 每次 render 都會(huì)調(diào)用
• 典型場(chǎng)景: 表單控件獲取默認(rèn)值

3. render()::組件必須定義的一個(gè)生命周期方法，用來描述 虛擬 DOM 結(jié)構(gòu)

4. componentDidMount(): 用于數(shù)據(jù)請(qǐng)求，定義一些外部資源等等副作用

• UI 渲染完成后調(diào)用
• 只執(zhí)行一次
• 典型場(chǎng)景:獲取外部資源

4.2 更新階段

1. static getDerivedStateFromProps(nextProps, prevState)
2. shouldComponentUpdate(nextProps, nextState):告訴組件是否需要重新渲染，用于性能優(yōu)化，比如判定指定 props 發(fā)生改變，組件才進(jìn)行重新渲染
• 決定虛擬 DOM 是否需要重繪
• 一般可以由 PureComponent 自動(dòng)實(shí)現(xiàn)
• 典型場(chǎng)景:性能優(yōu)化
3. render()
4. getSnapshotBeforeUpdate(prevProps, prevState)
• 在最近一次渲染輸出（提交到 DOM 節(jié)點(diǎn)）之前調(diào)用,state 已更新
• 與 componentDidUpdate 搭配使用
• 典型場(chǎng)景:捕獲 render 之前的 DOM 狀態(tài)
5. componentDidUpdate(prevProps, prevState)
• 每次 UI 更新時(shí)被調(diào)用
• 典型場(chǎng)景:頁(yè)面需要根據(jù) props 變化重新獲取數(shù)據(jù)

4.3 卸載階段

1. componentWillUnmount(): 做些資源釋放，卸載副作用的事情

• 此方法中可以執(zhí)行必要的清理操作，例如，清除 timer，取消網(wǎng)絡(luò)請(qǐng)求或清除在

詳細(xì)內(nèi)容請(qǐng)參考React 知識(shí)體系之生命周期及使用場(chǎng)景^[3]

五. 說說對(duì) State 和 Props 的理解，有什么區(qū)別

• state用于組件內(nèi)部數(shù)據(jù)傳遞,state 數(shù)據(jù)可以通過this.setSate或者useState進(jìn)行修改

• props用于組件外部組件數(shù)據(jù)傳遞，props不能直接修改.主要使用場(chǎng)景是:

• 兄弟組件通信
• 父子組件通信
• "爺孫組件"組件通信

• props的使用范圍雖然更加廣泛，但也有其局限性:對(duì)于嵌套層次較深的組件，如果使用props傳遞數(shù)據(jù),會(huì)導(dǎo)致代碼冗余,增加數(shù)據(jù)傳遞的復(fù)雜度

六. super 和 super(props)有什么區(qū)別

在 JavaScript 中，super 指的是父類構(gòu)造函數(shù)。（在我們的示例中，它指向 React.Component 實(shí)現(xiàn)。）

在調(diào)用父類的構(gòu)造函數(shù)之前，你是不能在 constructor 中使用 this 關(guān)鍵字的。JavaScript 不允許這個(gè)行為

class Checkbox extends React.Component {
  constructor(props) {
    //