前端面試題整理—React篇

一、說一下React

　　React是Facebook 開發的前端JavaScript庫

　　V層：react並非完整的MVC框架，而是MVC中的C層

　　虛擬DOM：react引入虛擬DOM，每當數據變化經過reactdiff運算，將上一次的虛擬DOM與本次渲染的DOM進行對比，僅僅只渲染更新的，有效減小了DOM操做

　　JSX語法：js+xml，是js的語法擴展，編譯後轉換成普通的js對象

　　組件化思想：將具備獨立功能的UI模塊封裝爲一個組件，而小的組件又能夠經過不一樣的組合嵌套組成大的組件，最終完成整個項目的構建

　　單向數據流：指數據的流向只能由父級組件經過props講數據傳遞給子組件，不能由子組件向父組件傳遞數據

　　要想實現數據的雙向綁定只能由子組件接收父組件props傳過來的方法去改變父組件數據，而不是直接將子組件數據傳給父組件

　　生命週期：簡單說一下生命週期：Mounting(掛載)、Updateing(更新)、Unmounting(卸載)

 

二、什麼是JSX？爲何瀏覽器沒法讀取JSX

　　JSX 是JavaScript XML 的簡寫，是 React 使用的一種文件

　　它利用 JavaScript 的表現力和相似 HTML 的模板語法

　　使得 HTML 文件很是容易理解。此文件能使應用很是可靠，並可以提升其性能

 

　　瀏覽器只能處理 JavaScript 對象，而不能讀取常規 JavaScript 對象中的 JSX

　　因此爲了使瀏覽器可以讀取 JSX，首先，須要用Babel轉換器將 JSX 文件轉換爲 JavaScript 對象，而後再將其傳給瀏覽器

 

三、React與Angular有何不一樣？

　　react是Facebook出品，angular是Google

　　react只有MVC中的C，angular是MVC

　　react使用虛擬DOM，angular使用真實DOM

　　react是單項數據綁定，angular是雙向數據綁定

 

四、react生命週期函數

　　（1）Mounting掛載階段

　　constructor()

　　componentWillMount()組件掛載到頁面以前

　　render()建立虛擬DOM，進行diff運算，更新DOM樹。不可進行setState()

　　componentDidMount()組件掛載到頁面以後，能夠在此請求數據

　　（2）Updateing更新階段

　　componentWillReceiveProps()父級數據發生變化

　　shouldComponentUpdate()

　　性能優化：這個函數只返回true或false，表示接下來的組件是否須要更新（從新渲染）

　　返回true就是緊接着如下的生命週期函數，返回false表示組件不須要從新渲染，再也不執行任何生命週期函數（包括render）

　　componentWillUpdate() 組件更新以前，不可進行setState() 會致使函數調用shouldComponentUpdate從而進入死循環

　　render()

　　componentDidUpdate()組件更新以後

　　（3）Unmounting卸載階段

　　componentWillUnmount 組件卸載和銷燬以前馬上停用

　　能夠在此銷燬定時器，取消網絡請求，消除建立的相關DOM節點等

 

五、shouldComponentUpdate是作什麼的，（react性能優化是哪一個周期函數？）

　　shouldComponentUpdate 這個方法用來判斷是否須要調用render方法從新繪製dom

　　由於DOM的描繪很是消耗性能，若是咱們能在shouldComponentUpdate 方法中可以寫出更優化的 dom diff 算法，能夠極大的提升性能

 

六、爲何虛擬 DOM 會提升性能? 說下他的原理

 　　虛擬 dom 至關於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法避免了沒有必要的 dom 操做，從而提升性能

　　Virtual DOM 工做過程有三個簡單的步驟

　　1）每當底層數據發生改變時，整個 UI 都將在 Virtual DOM 描述中從新渲

　　2）而後計算以前 DOM 表示與新表示的之間的差別

　　3）完成計算後，將只用實際更改的內容更新 real DOM

 

七、調用setState以後發生了什麼？

　　當調用setState後，新的 state 並無立刻生效渲染組件，而是，先看執行流中有沒有在批量更新中

　　若是有，push到存入到dirtyeComponent中，若是沒有，則遍歷dirty中的component，調用updateComponent,進行state或props的更新

　　而後更新UI，react進行diff運算，與上一次的虛擬DOM相比較，進行有效的渲染更新組件

 

八、react diff 原理

 　　diff（翻譯差別）：計算一棵樹形結構轉換成另外一棵樹形結構的最少操做

　　1）把樹形結構按照層級分解，只比較同級元素

　　2）給列表結構的每一個單元添加惟一的 key 屬性，方便比較

　　3）React 只會匹配相同 class 的 component（這裏面的 class 指的是組件的名字）

　　4）合併操做，調用 component 的 setState 方法的時候, React 將其標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的 component 從新繪製

　　5）選擇性子樹渲染。開發人員能夠重寫 shouldComponentUpdate 提升 diff 的性能

 

九、setState 什麼時候同步什麼時候異步？

　　1）setState 只在合成事件（react爲了解決跨平臺，兼容性問題，本身封裝了一套事件機制，代理了原生的事件，像在jsx中常見的onClick、onChange這些都是合成事件）和鉤子函數（生命週期）中是「異步」的，在原生事件和 setTimeout 中都是同步的

　　2）setState的「異步」並非說內部由異步代碼實現，其實自己執行的過程和代碼都是同步的，只是合成事件和鉤子函數的調用順序在更新以前，致使在合成事件和鉤子函數中無法立馬拿到更新後的值，形式了所謂的「異步」，固然能夠經過第二個參數 setState(partialState, callback) 中的callback拿到更新後的結果

　　3）setState 的批量更新優化也是創建在「異步」（合成事件、鉤子函數）之上的，在原生事件和setTimeout 中不會批量更新，在「異步」中若是對同一個值進行屢次 setState ， setState 的批量更新策略會對其進行覆蓋，取最後一次的執行，若是是同時 setState 多個不一樣的值，在更新時會對其進行合併批量更新

 

十、react渲染機制

　　1）當頁面一打開，就會調用render構建一棵DOM樹

　　2）當數據發生變化（ state | props ）時，就會再渲染出一棵DOM樹

　　3）此時，進行diff運算，兩棵DOM樹進行差別化對比，找到更新的地方進行批量改動

 

十一、React中refs 的做用是什麼？

　　Refs 是 React 提供給咱們的安全訪問 DOM 元素或者某個組件實例的句柄

　　咱們能夠爲元素添加 ref 屬性而後在回調函數中接受該元素在 DOM 樹中的句柄

　　該值會做爲回調函數的第一個參數返回

 

十二、組件的狀態(state)和屬性(props)之間有何不一樣　　

　　State 是一種數據結構，用於組件掛載時所需數據的默認值。State 可能會隨着時間的推移而發生突變，但多數時候是做爲用戶事件行爲的結果

　　Props(properties 的簡寫)則是組件的配置。props 由父組件傳遞給子組件，而且就子組件而言，props 是不可變的

　　組件不能改變自身的 props，可是能夠把其子組件的 props 放在一塊兒(統一管理)

　　

1三、在構造函數中調用 super(props) 的目的是什麼

　　在 super() 被調用以前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調用 super()。傳遞 props 給 super() 的緣由則是便於(在子類中)能在 constructor 訪問 this.props

 

1四、爲何在componentDidMount()中請求數據

　　componentDidMount方法中的代碼，是在組件已經徹底掛載到網頁上纔會調用被執行，因此能夠保證數據的加載

 

1五、何爲受控組件(controlled component)

　　在HTML 中，相似 <input>, <textarea> 和 <select> 這樣的表單元素會維護自身的狀態，並基於用戶的輸入來更新，當用戶提交表單時，

　　前面提到的元素的值將隨表單一塊兒被髮送，但在 React 中會有些不一樣，包含表單元素的組件將會在 state 中追蹤輸入的值，而且每次調用回調函數時

　　如 onChange 會更新 state，從新渲染組件，一個輸入表單元素，它的值經過 React 的這種方式來控制，這樣的元素就被稱爲」受控元素」

 

1六、何爲高階組件(higher order component)

　　高階組件是一個以組件爲參數並返回一個新組件的函數。HOC 運行你重用代碼、邏輯和引導抽象，最多見的多是 Redux 的 connect 函數

　　除了簡單分享工具庫和簡單的組合，HOC 最好的方式是共享 React 組件之間的行爲

　　若是你發現你在不一樣的地方寫了大量代碼來作同一件事時，就應該考慮將代碼重構爲可重用的 HOC

 

1七、React中的狀態是什麼？它是如何使用的？

　　狀態是 React 組件的核心，是數據的來源，必須儘量簡單。基本上狀態是肯定組件呈現和行爲的對象。與props 不一樣，它們是可變的，並建立動態和交互式組件。能夠經過 this.state() 訪問它們

 

1八、解釋 React 中 render() 的目的

　　每一個React組件強制要求必須有一個 render()。它返回一個 React 元素，是原生 DOM 組件的表示

　　若是須要渲染多個 HTML 元素，則必須將它們組合在一個封閉標記內，例如 <form>、<group>、<div> 等

　　此函數必須保持純淨，即必須每次調用時都返回相同的結果

 

1九、理解「在React中，一切都是組件」這句話

　　組件是 React 應用 UI 的構建塊。這些組件將整個 UI 分紅小的獨立並可重用的部分

　　每一個組件彼此獨立，而不會影響 UI 的其他部分

 

20、react父子組件之間如何通訊，兄弟組件呢？

　　父級傳遞子級：把數據掛載子組件的屬性上，子組件經過this.props來接收父組件的數據

　　子級傳遞父級：父級須要定義一個修改數據的方法，把修改數據的方法傳給子組件，當子組件須要修改父級數據時，調用父級傳過來的修改方法　　

　　兄弟組件傳遞：屬於同一個父級，父組件分別和這兩個組件傳遞。好比子組件A操做執行父組件方法，父組件進行修改，而後把信息傳給子組件B

 

2一、請列舉定義react組件的中方法

　　1）函數式定義的無狀態組件

　　2）es5原生的方式 React.createClass方式

　　3）es6中extends React.Component定義的組件 

 

2二、react中component和pureComponent區別是什麼？

　　 PureComponent自帶經過props和state的淺對比來實現 shouldComponentUpate()，而Component沒有

　　比於Component，PureCompoent的性能表現將會更好

 

2三、什麼是無狀態組件，與有狀態組件的區別

　　無狀態組件主要用來定義模板，接收來自父組件props傳遞過來的數據，使用{props.xxx}的表達式把props塞到模板裏面

　　有狀態組件主要用來定義交互邏輯和業務數據，使用{this.state.xxx}的表達式把業務數據掛載到容器組件的實例上（有狀態組件也能夠叫作容器組件，無狀態組件也能夠叫作展現組件），而後傳遞props到展現組件，展現組件接收到props，把props塞到模板裏面

 

2四、在哪些生命週期中能夠修改組件的state

　　componentDidMount和componentDidUpdate

　　constructor、componentWillMount中setState會發生錯誤：setState只能在mounted或mounting組件中執行

　　componentWillUpdate中setState會致使死循環

 

2五、調用render時，DOM必定會更新嗎，爲何

　　不必定更新

　　React組件中存在兩類DOM，render函數被調用後， React會根據props或者state從新建立一棵virtual DOM樹，雖然每一次調用都從新建立，但由於建立是發生在內存中，因此很快不影響性能。而 virtual dom的更新並不意味着真實DOM的更新，React採用diff算法將virtual DOM和真實DOM進行比較，找出須要更新的最小的部分，這時Real DOM纔可能發生修改

　　因此每次state的更改都會使得render函數被調用，可是頁面DOM不必定發生修改

 

2六、展現組件(Presentational component)和容器組件(Container component)之間有何不一樣

　　展現組件：展現專門經過props接受數據回調，而且幾乎不會有自身的狀態

　　容器組件：展現組件或者其餘容器組件提供容器和行爲；並調用actions，將其做爲回調提供給展現組件,容器組件常常是有狀態的

 

2七、setState的兩個參數

　　第一個參數是要改變的state對象

　　第二個參數是state致使的頁面變化完成後的回調，等價於componentDidUpdate

 

2八、React的生命週期函數中，當props改變時 會引起的後續變化，rander()函數何時執行

　　componentWillUpdate(){}以後

　　render

　　componentDidupdate(){}以前

 

2九、React 和 Vue 相對於JQ在開發上有哪些優勢？

　　虛擬DOM的優化，組件化利於維護，組件化方便複用

 

30、react-router的原理

　　BrowserRouter或hashRouter用來渲染Router所表明的組件

　　Route用來匹配組件路徑而且篩選須要渲染的組件

　　Switch用來篩選須要渲染的惟一組件

　　Link直接渲染某個頁面組件

　　Redirect相似於Link，在沒有Route匹配成功時觸發　

 

3一、爲何React Router v4中使用 switch 關鍵字 ？

　　雖然 <div> ** 用於封裝 Router 中的多個路由

　　當你想要僅顯示要在多個定義的路線中呈現的單個路線時，可使用 「switch」 關鍵字，使用時，<switch>**  標記會按順序將已定義的 URL

　　與已定義的路由進行匹配。找到第一個匹配項後，它將渲染指定的路徑。從而繞過其它路線

 

3二、瞭解redux麼，說一下redux

　　redux 是一個應用數據流框架，主要是解決了組件間狀態共享的問題，原理是集中式管理，主要有三個核心方法，action，store，reducer

　　三大原則：

　　1）惟一數據源(整個應用的 state 被儲存在一棵 object tree 中，而且這個 object tree 只存在於惟一一個 store 中)

　　2）reducer必須是純函數（輸入必須對應着惟一的輸出）

　　3）State 是隻讀的, 想要更改必須通過派發action

　　redux的工做流程：　

　　使用經過reducer建立出來的Store發起一個Action，reducer會執行相應的更新state的方法，當state更新以後，view會根據state作出相應的變化

　　1）提供getState()獲取到state

　　2）經過dispatch(action)發起action更新state

　　3）經過subscribe()註冊監聽器　

 

3三、redux數據流通的過程

　　1）用戶操做視圖

　　2）發起一次dispatch。有異步：返回一個函數（使用thunk中間件），沒有異步：return {}

　　3）進入reducer,經過對應的type去修改state,最後返回一個新的state

 

3四、connect()前兩個參數是什麼？

　　mapStateToProps(state, ownProps)

　　容許咱們將store中的數據做爲props綁定到組件中，只要store更新了就會調用mapStateToProps方法，mapStateToProps返回的結果必須是object對象，該對象中的值將會更新到組件中

　　mapDispatchToProps(dispatch, [ownProps])

　　容許咱們將action做爲props綁定到組件中，若是不傳這個參數redux會把dispatch做爲屬性注入給組件，能夠手動當作store.dispatch使用

　　mapDispatchToProps但願你返回包含對應action的object對象

 

3五、redux自己有什麼不足？

　　1）向事件池中追加方法時，沒有作去重處理

　　2）把綁定的方從在事件池中移除掉時，用的是arr.splice(index,1)，這樣可能會引發數組塌陷

　　3）reducer中state，每次返回都須要深克隆，能夠在redux中獲取狀態信息時，深克隆，這樣就不用在reducer裏深克隆了

 

3六、你怎麼理解redux的state的

　　數據按照領域（Domain）分類，存儲在不一樣的表中，不一樣的表中存儲的列數據不能重複

　　表中每一列的數據都依賴於這張表的主鍵，表中除了主鍵之外的其餘列，互相之間不能有直接依賴關係
　　把整個應用的狀態按照領域（Domain）分紅若干子State，子State之間不能保存重複的數據
　　State以鍵值對的結構存儲數據，以記錄的key/ID做爲記錄的索引，記錄中的其餘字段都依賴於索引
　　State中不能保存能夠經過已有數據計算而來的數據，即State中的字段不互相依賴

 

3七、React,redux能夠運行在服務端嗎?有什麼優點

　　1）利於SEO

　　2）提升首屏渲染速度

　　3）同構直出，使用同一份JS代碼實現，便於開發和維護

 

3八、列出 Redux 的組件

　　1）Action – 這是一個用來描述發生了什麼事情的對象

　　2）Reducer – 這是一個肯定狀態將如何變化的地方

　　3）Store – 整個程序的狀態/對象樹保存在Store中

　　4）View – 只顯示 Store 提供的數據

 

3九、解釋 Reducer 的做用

　　Reducers 是純函數，它規定應用程序的狀態怎樣因響應 ACTION 而改變。Reducers 經過接受先前的狀態和 action 來工做，而後它返回一個新的狀態。它根據操做的類型肯定須要執行哪一種更新，而後返回新的值。若是不須要完成任務，它會返回原來的狀態

 

40、Store 在 Redux 中的意義是什麼？

　　Store 是一個 JavaScript 對象，它能夠保存程序的狀態，並提供一些方法來訪問狀態、調度操做和註冊偵聽器。應用程序的整個狀態/對象樹保存在單一存儲中。所以，Redux 很是簡單且是可預測的。咱們能夠將中間件傳遞到 store 處理數據，並記錄改變存儲狀態的各類操做。全部操做都經過 reducer 返回一個新狀態