react面試總結

react

react發展－－－facebook在構建instagram網站的時候碰見兩個問題
數據綁定的時候，大量操做真實dom，性能成本過高
網站的數據流向太混亂，很差控制

React 把用戶界面抽象成一個個組件。開發者經過組合這些組件，最終獲得功能豐富、可交互的頁面。經過引入 JSX 語法，複用組件變得很是容易，同時也能保證組件結構清晰。

生命週期

react diff算法

tree diff 只對樹進行同層對比，不去比較跨層的節點。
給列表結構的每一個單元添加的惟一 key值進行區分同層次的子節點的比較
component diff 比較組件類型，相同的話比較element
element diff 對於同一層級的一組子節點，它們能夠經過惟一 id 進行區分

hook

react新增的特性，能夠在不編寫class類組件的狀況下使用state以及其餘的react特性。有兩個屬性usestate和useEffect。
usestate代替了constructor中的this.state。
useEffect看作componentDidMount，componentDidUpdate和componentWillUnmount這三個函數的組合

函數組件和類組件

react的this.setState是同步異步，調用 setState 以後發生了什麼

setState 只在合成事件和鉤子函數中是「異步」的，在原生事件和 setTimeout 中都是同步的。

合成事件：就是react 在組件中的onClick等都是屬於它自定義的合成事件
原生事件：好比經過addeventListener添加的，dom中的原生事件

調用 setState 以後：

• 1.this.setState(newState) =>
• 2.newState存入pending隊列 =>
• 3.調用enqueueUpdate =>
• 4.是否處於批量更新模式 => 是的話將組件保存到dirtyComponents
• 5.不是的話遍歷dirtyComponents，調用updateComponent,更新pending state or props

redux的運行機制，redux幫助前端解決什麼

首先組件會觸發一個action給store，而後傳state和action給reducer，咱們要是想改state的值，只能經過reducer，到一個新的setstate，返回給store，去從新進行渲染
它的做用就是，把我須要用的數據存放到一個地方，而後我哪一個組件要用我就直接去store裏面拿，這樣就很方便
組件間通訊
經過對象驅動組件進入生命週期
方便進行數據管理

什麼是受控組件和非受控組件

什麼是展現組件和容器組件

真實dom和虛擬dom的區別

虛擬dom的實現原理，爲何虛擬dom會提升性能

當底層數據發生改變時，整個 UI 都將在 Virtual DOM 描述中從新渲染。
而後計算以前 DOM 表示與新表示的之間的差別。
完成計算後，將只用實際更改的內容更新 real DOM

虛擬 dom 至關於在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法減小了對真實DOM的操做次數，從而提升性能。

區分狀態和 props

如何更新組件的狀態

用 this.setState()更新組件的狀態

React 的 refs

對 render() 返回的特定元素或組件的引用。當須要進行 DOM 引用或向組件添加方法時，它們會派上用場

高階組件（HOC）

高階組件是重用組件邏輯的高級方法，是一種源於 React 的組件模式。 HOC 是自定義組件，在它以內包含另外一個組件。它們能夠接受子組件提供的任何動態，但不會修改或複製其輸入組件中的任何行爲。你能夠認爲 HOC 是「純（Pure）」組件。

hoc作了什麼
*   代碼重用，邏輯和引導抽象
*   渲染劫持
*   狀態抽象和控制
*   Props 控制

純組件

純組件就是有生命週期的可是隻是接受props來做爲純展現組件不作邏輯判斷處理的組件（通常常見list組件）
純組件是經過控制shouldComponentUpdate生命週期函數，減小render調用次數來減小性能損耗的。這相對於Component來講，減小了手動判斷state變化的繁瑣操做。

Redux遵循的三個原則

1. 單一事實來源：整個應用的狀態存儲在單個 store 中的對象/狀態樹裏。單一狀態樹能夠更容易地跟蹤隨時間的變化，並調試或檢查應用程序。
2. 狀態是隻讀的：改變狀態的惟一方法是去觸發一個動做。動做是描述變化的普通 JS 對象。就像 state 是數據的最小表示同樣，該操做是對數據更改的最小表示。
3. 使用純函數進行更改：爲了指定狀態樹如何經過操做進行轉換，你須要純函數。純函數是那些返回值僅取決於其參數值的函數。

解釋 Reducer 的做用

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

Store 在 Redux 中的意義是什麼

Store 是一個 JavaScript 對象，它能夠保存數據的狀態，並提供一些方法來訪問狀態。能夠將中間件傳遞到 store 來處理數據，並記錄改變存儲狀態的各類操做。全部操做都經過 reducer 返回一個新狀態。