react面試題

調(diào)用 setState 之后發(fā)生了什么玻募?

在代碼中調(diào)用setState函數(shù)之后览濒,React 會將傳入的參數(shù)對象與組件當(dāng)前的狀態(tài)合并次和,然后觸發(fā)所謂的調(diào)和過程(Reconciliation)反肋。經(jīng)過調(diào)和過程,React 會以相對高效的方式根據(jù)新的狀態(tài)構(gòu)建 React 元素樹并且著手重新渲染整個UI界面踏施。在 React 得到元素樹之后石蔗,React 會自動計算出新的樹與老樹的節(jié)點差異,然后根據(jù)差異對界面進行最小化重渲染畅形。在差異計算算法中养距,React 能夠相對精確地知道哪些位置發(fā)生了改變以及應(yīng)該如何改變,這就保證了按需更新日熬,而不是全部重新渲染

this.state

一開始有一個初始狀態(tài)棍厌,然后用戶互動,導(dǎo)致狀態(tài)變化碍遍,從而觸發(fā)重新渲染 UI

傳入 setState 函數(shù)的第二個參數(shù)的作用是什么定铜?

該函數(shù)會在setState函數(shù)調(diào)用完成并且組件開始重渲染的時候被調(diào)用,我們可以用該函數(shù)來監(jiān)聽渲染是否完成

React 中 keys 的作用是什么怕敬?

Keys 是 React 用于追蹤哪些列表中元素被修改揣炕、被添加或者被移除的輔助標(biāo)識。

在開發(fā)過程中东跪,我們需要保證某個元素的 key 在其同級元素中具有唯一性畸陡。減少不必要的元素重渲染鹰溜。還需要借助 Key 值來判斷元素與本地狀態(tài)的關(guān)聯(lián)關(guān)系

React 中 Element 與 Component 的區(qū)別是?

簡單而言丁恭,React Element 是描述屏幕上所見內(nèi)容的數(shù)據(jù)結(jié)構(gòu)曹动,是對于 UI 的對象表述。典型的 React Element 就是利用 JSX 構(gòu)建的聲明式代碼片然后被轉(zhuǎn)化為createElement的調(diào)用組合牲览。而 React Component 則是可以接收參數(shù)輸入并且返回某個 React Element 的函數(shù)或者類墓陈。

在什么情況下你會優(yōu)先選擇使用 Class Component 而不是 Functional Component?

在組件需要包含內(nèi)部狀態(tài)或者使用到生命周期函數(shù)的時候使用 Class Component 第献,否則使用函數(shù)式組件贡必。

ref

獲取真實的 DOM 節(jié)點,為了做到這一點庸毫,dom元素必須有一個?ref?屬性仔拟,然后?this.refs.[refName]?就會返回這個真實的 DOM 節(jié)點。

在生命周期中的哪一步你應(yīng)該發(fā)起 AJAX 請求飒赃?

我們應(yīng)當(dāng)將AJAX 請求放到 componentDidMount 函數(shù)中執(zhí)行

shouldComponentUpdate 的作用是啥以及為何它這么重要利花?

shouldComponentUpdate 允許我們手動地判斷是否要進行組件更新,根據(jù)組件的應(yīng)用場景設(shè)置函數(shù)的合理返回值能夠幫我們避免不必要的更新载佳。

shouldComponentUpdate 這個方法用來判斷是否需要調(diào)用render方法重新描繪dom炒事。因為dom的描繪非常消耗性能,如果我們能在shouldComponentUpdate方法中能夠?qū)懗龈鼉?yōu)化的dom diff算法刚盈,可以極大的提高性能

state和props的區(qū)別

首先說明: state和props是每個組件都有的?

其次: state可變, 但props不可變(這是官網(wǎng)給出的說法)?

但實操過程中, state的確可變, 但props也可以變, 是不是fb搞錯了? 當(dāng)然不是!?

這里的可變與不可變, 說的是改變后, 是否會重新渲染當(dāng)前組件. 可變對應(yīng)的是組件會重新渲染, 不可變(props)是不會渲染的.?

至于原因, 則與內(nèi)部實現(xiàn)機制有關(guān): 每次用?

this.setState({test: "test"}) //只能這樣更改state?

改變state后, 都會觸發(fā)render函數(shù), 以至于渲染當(dāng)前組件;?

眾所周知, react的一個特點就是單向數(shù)據(jù)流, 也就是說數(shù)據(jù)只能從父組件向子組件傳遞, 而這種傳遞就是依賴于props. 所以當(dāng)我們改變props時, 無法渲染當(dāng)前組件, 只能將數(shù)據(jù)繼續(xù)向下傳遞,?re-rendering子組件. 所以對于當(dāng)前組件而言, props是不可變的.?

此外, 就字面而言, state是狀態(tài), props是屬性—即自定義屬性

什么是JSX

JSX 是一種類 XML 語言羡洛,全稱是 JavaScript XML 。React 可以不使用 JSX來編寫組件藕漱,但是使用JSX可以讓代碼可讀性更高欲侮、語義更清晰、對 React 元素進行抽象等等肋联。

JSX不是XML或者HTML威蕉,不是一種限制,是基于ECMAScript的一種新特性橄仍,一種定義帶屬性樹結(jié)構(gòu)的語法韧涨。JSX是JS的一中語法糖,類似CoffeeScript侮繁、TypeScript最終都是被解釋為JS虑粥。語法糖必須要有解析器解析,瀏覽器才可以識別宪哩。解析JSX的庫是browser.min.js娩贷;

JSX的特點

類XML語法 ,容易接受?

增強JS語義

結(jié)構(gòu)清晰

抽象程度高

代碼模塊化

react性能優(yōu)化方案

(1)重寫shouldComponentUpdate來避免不必要的dom操作锁孟。

(2)使用 production 版本的react.js彬祖。

(3)使用key來幫助React識別列表中所有子組件的最小變化

判斷組件是否需要獨立的生命周期茁瘦?

狀態(tài)組件是不需要的生命周期的,邏輯組件是需要生命周期的

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末储笑,一起剝皮案震驚了整個濱河市甜熔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌突倍,老刑警劉巖腔稀,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異羽历,居然都是意外死亡烧颖,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門窄陡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拆火,你說我怎么就攤上這事跳夭。” “怎么了们镜?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵币叹,是天一觀的道長。 經(jīng)常有香客問我模狭,道長颈抚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任嚼鹉,我火速辦了婚禮贩汉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘锚赤。我一直安慰自己匹舞,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布线脚。 她就那樣靜靜地躺著赐稽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪浑侥。 梳的紋絲不亂的頭發(fā)上姊舵,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音寓落,去河邊找鬼括丁。 笑死,一個胖子當(dāng)著我的面吹牛零如,可吹牛的內(nèi)容都是我干的躏将。 我是一名探鬼主播锄弱,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼祸憋!你這毒婦竟也來了会宪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蚯窥,失蹤者是張志新(化名)和其女友劉穎掸鹅,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拦赠,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡巍沙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了荷鼠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片句携。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖允乐,靈堂內(nèi)的尸體忽然破棺而出矮嫉,到底是詐尸還是另有隱情,我是刑警寧澤牍疏,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布蠢笋,位于F島的核電站,受9級特大地震影響鳞陨,放射性物質(zhì)發(fā)生泄漏昨寞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一厦滤、第九天 我趴在偏房一處隱蔽的房頂上張望援岩。 院中可真熱鬧,春花似錦馁害、人聲如沸窄俏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽凹蜈。三九已至,卻和暖如春忍啸,著一層夾襖步出監(jiān)牢的瞬間仰坦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工计雌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留悄晃,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像妈橄,于是被迫代替她去往敵國和親庶近。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

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