react高頻面試題

1. 類組件和函數(shù)式組件的區(qū)別

• 語法上：函數(shù)式組件返回一個jsx元素，類組件是Es6語法糖class,繼承component這個類
• 類組件有生命周期，函數(shù)式組件沒有生命周期，借用useEffect模擬生命周期
• 類組件通過state 和setstate進(jìn)行狀態(tài)管理，函數(shù)組件使用useState
• 類組件能夠捕獲到最新的值，this可以獲取到最新的props參數(shù)保存在內(nèi)存當(dāng)中，函數(shù)式組件是通過閉包來構(gòu)建的，無法從外面訪問到，也無法在外面修改。

2.react事件綁定的原理

給document加對應(yīng)的函數(shù)，創(chuàng)建listenerBank，

觸發(fā)時調(diào)用調(diào)用分發(fā)函數(shù)dispatchEvent,把d當(dāng)前對應(yīng)的所有回調(diào)函數(shù)都加到listenerBank中，在listenerBank根據(jù)key值查找事件回調(diào)并合成到event中

最后進(jìn)行批處理，按照冒泡排序來的

3.setState缺點

異步更新：在調(diào)用setState時不會立即更新，會先進(jìn)行合并再更新，為了提高性能。

重復(fù)渲染：多次調(diào)用setState會重新渲染考慮使用useReducer或其他狀態(tài)管理庫

性能問題:setState會重新渲染整個組件，即時只修改了部分狀態(tài)，使用react.memo進(jìn)行優(yōu)化。

setState每次傳入的是一個新的狀態(tài)對象，不是直接修改原來的狀態(tài)，大量數(shù)據(jù)時修改時，會有一定的開銷。

由于setState是一步的機制，在修改時依賴state，一般會使用回調(diào)函數(shù)作為參數(shù)更新state值

4.state和props的區(qū)別

props是外部傳過來的數(shù)據(jù)，父傳子不可以在組件內(nèi)部修改，要通過父組件修改

state是內(nèi)部的狀態(tài)可以通過setState修改

5.虛擬dom的優(yōu)劣，實現(xiàn)原理

虛擬dom是js對象模擬的dom樹，相當(dāng)于利用diff算法避免不必要的更新，一次性修改需要更改的部分，首次渲染慢，

虛擬dom的組成：type：元素的類型可以是原生的html也可以是自定義的組件，key:虛擬dom唯一的標(biāo)識，ref:訪問原生的Dom節(jié)點

props:屬性

6.diff算法key

tree diff 同層級比較

component diff 通過id同組件對比

element diff 同元素對比

7.react組件通信如何實現(xiàn)

父傳子props

子傳父回調(diào)函數(shù)+props

Context上下文

redux狀態(tài)管理action 改變state

8.react 中的refs的作用

ref獲取到實例和Dom元素