2020年React最全面試題

前言

React是近幾年來前端項目開發很是火的一個框架，其背景是Facebook團隊的技術支持，市場佔有率也很高。不少初學者糾結一開始是學react仍是vue。我的以爲，有時間的話，最好兩個都掌握一下。

react全家桶

（1）運用jsx語法

（2）React生命週期

（3）先後端交互用到的fetch/axios

（4）React-router路由

（5）數據流解決方案redux

（6）React-redux

（7）中間件

（8）Dva框架

（9）Umi框架

react的優缺點以及特色

優點：

1.     引入了虛擬DOM和diff算法，提升了Web性能。

2. 組件化，模塊化開發。便於咱們後期維護性。

3. 單向數據流，比較有序，便於數據管理。

不足：

1. react中只是MVC模式的View部分，因此在react開發中要依賴不少其餘模塊。

2. 當父組件進行從新渲染時，即便子組件的props或state沒有任何改變，也會一樣進行從新渲染。（react如何避免重複渲染）

特色：　

1. 聲明式設計（React採用聲明式，能夠輕鬆描述應用。）

2. 高性能（React經過對DOM的模擬，最大限度地減小與DOM的交互。）

3. 靈活（React能夠與已知的庫或框架很好地配合。）

在React如何作性能優化？

1. 給DOM的遍歷上加上惟一的key。提升diff算法效率。

儘可能不要用index,若是說在DOM中刪了某一個節點，index也就會發生變化，這時候就會從新渲染，因此key值最好使用id。

2.     能用const聲明的就用const。

在render裏面儘可能減小新變量的建立以及函數的指向改變問題。

3. 減小對真實DOM的操做。

4. 若是是用webpack搭建環境的話，當一個包過大加載過慢時，可分紅多個包來優化。

5. 使用react-loadable，按需加載路由

6. 定時器，超時器使用事後在unmount中清除。

7. immutable對象管理狀態  讓狀態不能被更改

8. 把component更換成pureComponent 也能夠進行優化

你對pureComponent的理解

  1.當更新時，若是組件的props或者state都沒有改變，render函數就不會觸發。

  2.省去虛擬DOM的生成和對比過程，達到提高性能的目的。

  3.具體緣由是由於react自動幫咱們作了一層淺比較

簡述react項目的開發過程？

答：

   安裝node環境 
    使用creat-react-app建立項目
    經過npm start運行項目
    查看生產環境的項目目錄及結構
    開始寫本身的組件 而後拼裝組件
    而後在查看項目 沒問題了
    在經過webpack打包到生產環境中 
    而後提交到公司git服務器上 
    而後鏈條測試
    上線

react生命週期及相關用法

react生命週期分爲mount階段、update階段、unmount階段。

(1) mount階段：

componentWillMount：實例掛載以前。進行初始化數據的交互。

Render：渲染組件

componentDidMount：實例掛載完成。在這個函數中，實現先後端數據交互。

 

(2) update階段：

 componentWillReceiveProps：父組件改變時調用。

sholudComponentUpdate：是否從新渲染組件，通常在這個函數中作組件的性能優化。

componentWillUpdate：組件數據更新前調用

componentDidUpdate：組件數據更新完成時調用

 

(3) unmount階段：

componentWillUnmount：通常用來銷燬不用的變量或者是解除無用定時器以及解綁無用事件。防止內存泄漏問題。

對先後state淺層比較

react如何避免重複渲染

React 官方提供了 PureRenderMixin 插件，它的功能就是在不須要從新渲染的狀況下讓shouldComponentUpdate 返回 false, 使用這個插件就可以減小沒必要要的從新渲染，性能獲得也獲得一些提高。

可是在 React 的新版本里面，提供了 React.PureComponent，而不須要使用這個插件。 因此說一個較大的組件決定重渲染的時候，咱們能夠在每個子組件中綁定（新的）shouldComponentUpdate方法，這樣能夠減小子組件從新渲染的次數。 

無狀態組件和有狀態組件有什麼區別

無狀態組件

    無狀態組件的建立形式使代碼的可讀性更好，並且減小了大量冗餘的代碼，以致於只有一個render方法。

組件不會被實例化

組件不能訪問this對象，也不能訪問生命週期方法

無狀態組件只能訪問輸入的props ，一樣的props渲染一樣的結果，並且沒有反作用。

有狀態組件

    React.Component建立的組件，其成員函數不會自動綁定this，若是咱們沒有手動綁定this，就不能獲取當前組件實例對象。

React.Component建立的組件，其狀態state是在constructor中像初始化組件屬性同樣去聲明。

補充：React.Component有三種手動綁定方法

1》constructor(props) {

       super(props);

       this.handleClick = this.handleClick.bind(this); //構造函數中綁定

  }

2》<div onClick={this.handleClick.bind(this)}></div> //使用bind來綁定

3》<div onClick={()=>this.handleClick()}></div> //使用arrow function來綁定

如何選擇哪一種方式建立組件

只要有可能，儘可能使用無狀態組件。

 

若是須要state、生命週期方法等，使用class的建立組件

 

react在哪一個生命週期作優化?

能夠在shouldComponentUpdate這個方法進行優化，用來判斷是否調用 render 方法重繪 dom。
由於 dom 的重繪很是消耗性能，因此能夠在這個方法中去作dom的diff算法的優化，這樣就能夠極大的提升性能。

但對於咱們中級工程師來講，通常我不會去修改shouldComponentUpdate這個方法。而是直接去使用。True/false

react組件間傳值。（組件間通訊方式）

   （1）props傳值，父組件經過props向子組件傳值，子組件經過回調函數向父組件傳值

   （2）redux跨級通訊。

   （3）經過prop-types的context實現跨級通訊

跨級組件間雙向通訊：使用 context 對象，根組件和其餘全部子孫通訊，

不太適合組件間通訊（能夠實現，很差維護）

   （4）使用事件訂閱實現非嵌套組件間通訊，也能夠實現跨級組件間通訊

porps和state的區別？

props：通常用於父組件向子組件通訊，在組件之間通訊使用。

state：通常用於組件內部的狀態維護，更新組件內部的數據狀態，更新子組件的props等。

 

在react如何阻止冒泡事件?

阻止冒泡事件分兩種狀況

A、 阻止合成事件間的冒泡，用e.stopPropagation();

B、 阻止js原生事件的冒泡，用e.nativeEvent.stopPropagation();

 

補充：如何阻止事件冒泡、阻止默認動做？

 

  阻止事件冒泡:

e.stopPropagation(IE9+及其餘瀏覽器),

window.e.cancelBubble = true(IE678)

 

  阻止默認事件:

e.preventDefault()-->IE9+及其餘瀏覽器

window.e.returnValue = false   IE678

 

jQuery:

     阻止事件冒泡:e.stopPropagation()

     阻止默認事件:epreventDefault()

     同時阻止事件冒泡和默認事件: return false

 

對react中事件機制的理解

Reac事件是合成事件，不是原生事件。

合成事件和原生事件的區別：

（1）     寫法不一樣：合成事件是camal命名法，原生事件是所有小寫

（2）     綁定位置不一樣：合成事件所有委派到document上，原生事件綁定到真實dom上。因此通常是在componentDidMount中或者ref回調函數中綁定，在componentWillUnmount階段進行解綁，防止內存泄漏。

（3）     執行順序不一樣：先執行原生事件，事件冒泡至document上，再執行合成事件。

react怎麼從虛擬dom中拿出真實dom？

在React中如何獲取真實dom？

經過refs得到 DOM 元素或者某個組件實例。

咱們能夠爲元素添加 ref 屬性，在回調函數中接收該DOM元素，該DOM元素會做爲回調函數的第一個參數返回。

或者能夠給ref傳字符串。經過this.refs獲取dom。

例如：<input ref=((input)=>{return this.name=input}) />， this.name.value取值
或者 <input ref="name" />，this.refs.name取值。

爲何虛擬DOM能夠提升性能？

當數據變化的時候，無需總體的從新渲染，而是局部刷新。虛擬DOM它是以js的形式存在，計算性能會比較好。並且因爲減小對真實DOM的操做次數。性能會有很大提高。

diff算法原理 / 什麼是diff算法（diff算法的理解）

對新舊兩棵DOM樹進行同層比較。

給每層元素添加惟一的 key 值。提升diff算法效率。

React      只會匹配相同組件名字

調用組件setState 方法的時候, React 將它標記爲 dirty.到每個事件循環結束, React 檢查全部標記 dirty 的組件 從新渲染.這樣就實現了局部刷新的效果。

react 中 keys 的做用是什麼？

在開發過程當中，咱們須要保證某個元素的 key 在其同級元素中具備惟一性。在 React Diff 算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的仍是被移動而來的元素，從而減小沒必要要的元素重渲染。此外，React 還須要藉助 Key 值來判斷元素與本地狀態的關聯關係，所以咱們毫不可忽視轉換函數中 Key 的重要性。