React相關(guān)面試經(jīng)典問題

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子漩怎,更是在濱河造成了極大的恐慌勋颖,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件勋锤,死亡現(xiàn)場(chǎng)離奇詭異饭玲,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)叁执,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門茄厘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人谈宛,你說我怎么就攤上這事蚕断。” “怎么了入挣?”我有些...
    開封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵亿乳,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我径筏,道長(zhǎng)葛假,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任滋恬,我火速辦了婚禮聊训,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘恢氯。我一直安慰自己带斑,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開白布勋拟。 她就那樣靜靜地躺著勋磕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪敢靡。 梳的紋絲不亂的頭發(fā)上挂滓,一...
    開封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音啸胧,去河邊找鬼赶站。 笑死,一個(gè)胖子當(dāng)著我的面吹牛纺念,可吹牛的內(nèi)容都是我干的贝椿。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼陷谱,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼烙博!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤习勤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后焙格,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體图毕,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年眷唉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了予颤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡冬阳,死狀恐怖蛤虐,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情肝陪,我是刑警寧澤驳庭,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站氯窍,受9級(jí)特大地震影響饲常,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜狼讨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一贝淤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧政供,春花似錦播聪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至衅檀,卻和暖如春枕磁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背术吝。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工计济, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人排苍。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓沦寂,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親淘衙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子传藏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • 3. JSX JSX是對(duì)JavaScript語言的一個(gè)擴(kuò)展語法, 用于生產(chǎn)React“元素”,建議在描述UI的時(shí)候...
    pixels閱讀 2,823評(píng)論 0 24
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南毯侦,這只是我在學(xué)習(xí)過程中的一些閱讀筆記哭靖,個(gè)人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,833評(píng)論 1 18
  • 1侈离、redux中間件中間件提供第三方插件的模式试幽,自定義攔截 action -> reducer 的過程。變?yōu)?ac...
    董董董董董董董董董大笨蛋閱讀 6,961評(píng)論 0 16
  • 作為一個(gè)合格的開發(fā)者卦碾,不要只滿足于編寫了可以運(yùn)行的代碼铺坞。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個(gè)周閱讀 8,441評(píng)論 1 33
  • 1.react的生命周期 2.調(diào)用 setState 之后發(fā)生了什么洲胖? 在代碼中調(diào)用setState函數(shù)之后济榨,Re...
    三寸日光_閱讀 1,011評(píng)論 0 0