React基礎知識

Jsp發表於2018-06-03

React常見面試題分析

一:呼叫setState之後發生了什麼?

呼叫setState函式之後,react會將傳入的引數物件與元件當前的狀態合併,然後觸發調和過程(Reconciliation)。以高效方式根據新的狀態構建React元素樹並且著手重新渲染整個UI介面。在 React 得到元素樹之後,React 會自動計算出新的樹與老樹的節點差異,然後根據差異對介面進行最小化重渲染。(按需渲染,不是全部渲染)

二:React 中 Element 與 Component 的區別是?

React Element 是描述螢幕上所見內容的資料結構,是對於 UI 的物件表述。典型的 React Element 就是利用 JSX 構建的宣告式程式碼片然後被轉化為createElement的呼叫組合;
React Component 則是可以接收引數輸入並且返回某個 React Element 的函式或者類。

三:React 中 keys 的作用是什麼?

Keys 是 React 用於追蹤哪些列表中元素被修改、被新增或者被移除的輔助標識。
在 React Diff 演算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的還是被移動而來的元素,從而減少不必要的元素重渲染。

四:shouldComponentUpdate 的作用

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

五:傳入 setState 函式的二個引數

第一個引數是要改變的state物件
第二個引數是 state 導致的頁面變化完成後的回撥,等價於componentDidUpdate

六:React中state和props分別是什麼

props是一個從外部傳進元件的引數,主要作為就是從父元件向子元件傳遞資料,它具有可讀性和不變性,只能通過外部元件主動傳入新的props來重新渲染子元件,否則子元件的props以及展現形式不會改變。 

state的主要作用是用於元件儲存、控制以及修改自己的狀態,它只能在constructor中初始化,它算是元件的私有屬性,不可通過外部訪問和修改,只能通過元件內部的this.setState來修改,修改state屬性會導致元件的重新渲染。