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

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

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

其次 React 設計的

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

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

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

虛擬DOM

2.1 虛擬 DOM 是什么

• 真實(shí)DOM就是我們在瀏覽器開(kāi)發(fā)者工具中看到的DOM結構
• 虛擬DOM簡(jiǎn)單來(lái)說(shuō)就是 JS 對象，此對象中的字段包含了對真實(shí)DOM的描述:
• type:是什么標簽/元素
• props:標簽/元素有哪些屬性
• children:是否有子元素

a

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

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

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

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

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

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

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

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

如果當虛擬 DOM 的構建和diff的過(guò)程相對復雜(比如很多遞歸遍歷等操作),那么虛擬 DOM 的 JS 計算是比較耗時(shí)的

三. 說(shuō)說(shuō) Diff 算法

Diff算法

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

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

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

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

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

詳細內容請參考React 官方文檔- Diffing 算法^[2]

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

image.png

4.1 創(chuàng )建階段

1. constructor():組件的構造函數，組件更新到界面上之前會(huì )先調用

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

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

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

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

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

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

4.2 更新階段

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

4.3 卸載階段

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

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

詳細內容請參考React 知識體系之生命周期及使用場(chǎng)景^[3]

五. 說(shuō)說(shuō)對 State 和 Props 的理解，有什么區別

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

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

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

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

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

在 JavaScript 中，super 指的是父類(lèi)構造函數。（在我們的示例中，它指向 React.Component 實(shí)現。）

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

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