React相關(guān)面試經(jīng)典問題
A.react中setState以后發(fā)生了什么
在調(diào)用setState以后拳锚,
1、react會(huì)將傳入的參數(shù)對(duì)象跟當(dāng)前的state合并,觸發(fā)調(diào)和過程。
2垦藏、調(diào)和以后,react會(huì)高效的根據(jù)新的狀態(tài)構(gòu)建react元素樹伞访。
3掂骏、生成react元素樹以后,通過diff算法可以得到新樹和老樹的節(jié)點(diǎn)差異厚掷。
4弟灼、根據(jù)這些差異,可以精確的實(shí)現(xiàn)按需更新
B.React 中 Element 與 Component 的區(qū)別是蝗肪?
react Element是所見內(nèi)容的數(shù)據(jù)結(jié)構(gòu)袜爪,是對(duì)UI的描述蠕趁,是通過jsx構(gòu)建的聲明式代碼片段薛闪。
React Component 是接收參數(shù)輸入返回某個(gè) React Element 的函數(shù)或者類。
C.使用 Class Component 和 Functional Component的時(shí)機(jī)俺陋,即什么時(shí)候使用無狀態(tài)組件豁延?
在組件需要
1昙篙、內(nèi)部狀態(tài)
2、需要使用到生命周期函數(shù)的時(shí)候
使用 Class Component 诱咏,否則使用函數(shù)式組件苔可。
D.React 中 keys 的作用是什么?
Keys 是 React 用于追蹤哪些列表中元素被修改袋狞、被添加或者被移除的輔助標(biāo)識(shí)焚辅。
在開發(fā)過程中,我們需要保證某個(gè)元素的 key 在其同級(jí)元素中具有唯一性苟鸯。
1同蜻、React Diff 算法中 React 會(huì)借助元素的 Key 值來判斷該元素是新近創(chuàng)建的還是被?
移動(dòng)而來的元素,從而減少不必要的元素重渲染早处。
2湾蔓、React 還需要借助 Key 值來判斷元素與本地狀態(tài)的關(guān)聯(lián)關(guān)系,因此我們絕不可忽視轉(zhuǎn)換函數(shù)中 Key 的重要性砌梆。
E.react中的回調(diào)渲染模式
1默责、這種模式中,組件會(huì)接收某個(gè)函數(shù)作為其子組件咸包,然后在渲染函數(shù)中以? ? ? ? props.children進(jìn)行調(diào)用:2桃序、這種模式的優(yōu)勢(shì)在于將父組件與子組件解耦和,? ? ? ? 父組件可以直接訪問子組件的內(nèi)部狀態(tài)而不需要再通過Props傳遞诉儒,? ? ? ? 這樣父組件能夠更為方便地控制子組件展示的UI界面
F.在生命周期中的哪一步你應(yīng)該發(fā)起 AJAX 請(qǐng)求葡缰?
在 componentDidMount 函數(shù)中發(fā)起ajax請(qǐng)求1、保證請(qǐng)求僅在組件掛載完畢后才會(huì)要求響應(yīng)2忱反、調(diào)和算法 Fiber 會(huì)通過開始或停止渲染的方式優(yōu)化應(yīng)用性能泛释,其會(huì)影響到? ? ? ? componentWillMount 的觸發(fā)次數(shù)。React 可能會(huì)多次頻繁調(diào)用? ? ? ? componentWillMount温算。
G.React 中的事件處理邏輯
為了解決跨瀏覽器兼容性問題怜校,React 會(huì)將瀏覽器原生事件(Browser Native Event)封? ? ? 裝為合成事件(SyntheticEvent)傳入設(shè)置的事件處理器中。這里的合成事件提供了與原生? ? ? 事件相同的接口注竿,不過它們屏蔽了底層瀏覽器的細(xì)節(jié)差異茄茁,保證了行為的一致性。另外有意思的? ? ? 是巩割,React 并沒有直接將事件附著到子元素上裙顽,而是以單一事件監(jiān)聽器的方式將所有的事件發(fā)? ? ? 送到頂層進(jìn)行處理。這樣 React 在更新 DOM 的時(shí)候就不需要考慮如何去處理附著在 DOM 上? ? ? 的事件監(jiān)聽器宣谈,最終達(dá)到優(yōu)化性能的目的愈犹。
轉(zhuǎn)自:https://blog.csdn.net/running_shuai/article/details/82667644