調(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)組件是不需要的生命周期的,邏輯組件是需要生命周期的