react面試題

調用 setState 之后發(fā)生了什么?

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

this.state

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

傳入 setState 函數的第二個參數的作用是什么?

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

React 中 keys 的作用是什么?

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

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

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

簡單而言,React Element 是描述屏幕上所見內容的數據結構,是對于 UI 的對象表述。典型的 React Element 就是利用 JSX 構建的聲明式代碼片然后被轉化為createElement的調用組合。而 React Component 則是可以接收參數輸入并且返回某個 React Element 的函數或者類。

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

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

ref

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

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

我們應當將AJAX 請求放到 componentDidMount 函數中執(zhí)行

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

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

shouldComponentUpdate 這個方法用來判斷是否需要調用render方法重新描繪dom。因為dom的描繪非常消耗性能,如果我們能在shouldComponentUpdate方法中能夠寫出更優(yōu)化的dom diff算法,可以極大的提高性能

state和props的區(qū)別

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

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

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

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

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

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

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

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

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

什么是JSX

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

JSX不是XML或者HTML,不是一種限制,是基于ECMAScript的一種新特性,一種定義帶屬性樹結構的語法。JSX是JS的一中語法糖,類似CoffeeScript、TypeScript最終都是被解釋為JS。語法糖必須要有解析器解析,瀏覽器才可以識別。解析JSX的庫是browser.min.js;

JSX的特點

類XML語法 ,容易接受?

增強JS語義

結構清晰

抽象程度高

代碼模塊化

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

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

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

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

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

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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容