摘要：我們可以為元素添加屬性然后在回調函數中接受該元素在樹中的句柄，該值會作為回調函數的第一個參數返回。使用最常見的用法就是傳入一個對象。單向數據流，比較有序，有便于管理，它隨著視圖庫的開發而被概念化。

面試中問框架，經常會問到一些原理性的東西，明明一直在用，也知道怎么用，
但面試時卻答不上來，也是挺尷尬的，就干脆把react相關的問題查了下資料，再按自己的理解整理了下這些答案。

組件載入階段：
componentWillMount:組件即將被裝載、渲染到頁面上，只調用1次
componentDidMount:組件真正在被裝載之后，這里可以拿到真實DOM執行操作，只調用1次

運行中狀態：
componentWillReceiveProps(nextProps):組件將要接收到新屬性的時候調用，在這時setState不會觸發額外的render,因為此時已經有一次來自父組件引發的render了。

shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（返回 false，接收數據后不更新，阻止 render ，后面的函數不會繼續執行）
componentWillUpdate:組件即將更新不能修改屬性和狀態
componentDidUpdate:組件已經更新

銷毀階段：
componentWillUnmount:組件即將銷毀，這時候可以銷毀綁定的事件監聽或者定時器什么的。

有些好像把render也算進生命周期了：
render:組件在這里生成虛擬的 DOM 節點

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

1.把樹形結構按照層級分解，只比較同級元素。
2.通過給列表結構的每個單元添加的唯一 key值進行區分同層次的子節點的比較。
3.React 只會匹配相同 class 的 component（這里面的 class 指的是組件的名字）
4.合并操作，調用 component 的 setState 方法的時候, React 將其標記為 dirty.
    到每一個事件循環結束, React 檢查所有標記 dirty 的 component 重新繪制。
5.選擇性渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff 的性能。

圖片源自：react精髓之一---diff算法

實現原理：

1. 用 js對象結構表示 DOM 樹的結構；然后用這個樹構建一個真正的 DOM 樹，插到文檔當中。
2. 當狀態變更的時候，重新構造一棵新的對象樹。然后對比新舊虛擬DOM樹，記錄兩棵樹差異。
3. 把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。

原因：虛擬 dom 相當于在 js 和真實 dom 中間加了一個緩存，利用 dom diff 算法減少了對真實DOM的操作次數，從而提高性能。

Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。
我們可以為元素添加 ref 屬性然后在回調函數中接受該元素在 DOM 樹中的句柄，該值會作為回調函數的第一個參數返回。或者ref可以傳字符串。

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

state 是一種數據結構，用于組件掛載時所需數據的默認值。state 可能會隨著時間的推移而發生突變，但多數時候是作為用戶事件行為的結果。
Props則是組件的配置。props 由父組件傳遞給子組件，并且就子組件而言，props 是不可變的(immutable)。

父子：父傳子：props； 子傳父：子調用父組件中的函數并傳參；
兄弟：利用redux實現。
所有關系都通用的方法：利用PubSub.js訂閱

原理：當調用setState時，它并不會立即改變，而是會把要修改的狀態放入一個任務隊列，等到事件循環結束時，再合并指更新。
因此，setState有 異步，合并更新更新兩個特性。

這里應該需要了解下Batch Update 。

使用：
1.最常見的用法就是傳入一個對象。

    this.setState({
        isLoading:false
    })

2.還可以接收一個函數

    this.setState((prevState,props)=>{
        // 要做的事件
        return {isLoading:false};
    })

3.因為setState是異步的，所以它還可以接收第二個參數，一個回調函數

    this.setState({count:2},()=>{
        isLoading:this.state.count===2 ? true : false
    })

參考鏈接：React 中 setState() 為什么是異步的？、 react的setstate原理

1.保證內部的一致性

因為props是要等到父組件渲染過后才能拿到，也就是不能同步更新，state出于統一性設成異步更新。

2.性能優化

舉例說你正在一個聊天窗口輸入，如果來了一條新消息又要render,那就會阻塞你的當前操作，導致延遲什么的。

3.支持state在幕后渲染

異步可以使state在幕后更新，而不影響你當前舊的頁面的交互，提升用戶體驗。

詳情可以點擊上面的參考鏈接，寫的很詳細的。

另外：setstate在原生事件，setTimeout,setInterval,promise等異步操作中，state會同步更新。

優勢：

1. 實現對虛擬DOM的操作，使得它速度快，提高了Web性能。
2. 組件化，模塊化。react里每一個模塊都是一個組件，組件化開發，可維護性高。
3. 單向數據流，比較有序，有便于管理，它隨著React視圖庫的開發而被Facebook概念化。
4. 跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標準化的API，甚至在IE8中都是沒問題的。

不足：

1. react中只是MVC模式的View部分，要依賴引入很多其他模塊開發。、
2. 當父組件進行重新渲染操作時，即使子組件的props或state沒有做出任何改變，也會同樣進行重新渲染。

特點：　

1. 聲明式設計：React采用聲明范式，可以輕松描述應用。
2. 高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
3. 靈活：React可以與已知的庫或框架很好地配合。

講一些項目中用到的小的點：

1. 充分利用shouldComponentUpdate函數，不過這需要你的組件盡量最小化，如果當前組件數據過于復雜，其實是很難優化的。
2. 給你的DOM遍歷上加上唯一的key,注意盡量不要用index,因為如果你新DOM中刪了某一個節點，它會重新排列index，
那跟原來同層級一比就都會完全不一樣，而重新渲染了，所以最好使用id值什么的作key值。

3. 能用const聲明的就用const。
4. DOM里少用箭頭函數，當然其實要傳參時也還是得用。再者，函數bind盡量寫在constructor，避免每次render重新bind。
5. 減少對真實DOM的操作。
6. 如果是用webpack搭建環境的話，當一個包過大加載過慢時，可分打成多個包來優化。

react-perf性能查看工具，可自行了解下：react-perf

有些是個人意見，僅供參考。

相同點：

1. 都用虛擬DOM實現快速渲染
2. 我覺得父子，兄弟通信這些都挺像的，也都有自己的狀態管理器：react=>redux, vue=>vuex
3. 都是輕量級框架
4. 現在vue也在漸漸吸收react中的一些語法，比如JSX語法，類式聲明寫法等

不同點：

1. React屬于單向數據流——MVC模式，vue則屬于雙向——MVVM模式。
2. react兼容性比vue好，vue不兼容IE8.
3. react采用JSX語法，vue采用的則是html模板語法。
4. vue的css可以有組件的私有作用域，react則沒有。
5. react比vue好的另一點是，它是團隊維護，而vue屬于個人，一般來說，大型項目更傾向于react，小型則用vue，當然這也不是絕對。

用戶頁面行為觸發一個Action，然后，Store 自動調用 Reducer，并且傳入兩個參數：當前 State 和收到的 Action。Reducer 會返回新的 State 。每當state更新之后，view會根據state觸發重新渲染。

Redux作為一個通用模塊，主要還是用來處理應用中state的變更，通過react-redux做連接，可以在React+Redux的項目中將兩者結合的更好。
react-redux是一個輕量級的封裝庫，它主要通過兩個核心方法實現：

Provider：從最外部封裝了整個應用，并向connect模塊傳遞store。
Connect： 
    1、包裝原組件，將state和action通過props的方式傳入到原組件內部。
    2、監聽store tree變化，使其包裝的原組件可以響應state變化

理解：中間件就是要對redux的store.dispatch方法做一些改造，以實現其他的功能。

我用過redux-thunk，就拿它舉例。

背景：Redux 的基本做法，是用戶發出 Action，Reducer 函數立刻算出新的 State，View 重新渲染，但這是做同步。

而如果有異步請求時，那就不能知道什么時候獲取的數據有存進store里面，因此此時需要在請求成功時返回一個標識或狀態，并在此時再觸發action給reducer傳值。
因此，為了解決異步的問題，就引入了中間件的概念。

作用： redux-thunk 幫助你統一了異步和同步 action 的調用方式，把異步過程放在 action 級別解決，對 component 調用沒有影響。

引入使用可參照：理解redux和redux的中間件redux-thunk的認識

原文鏈接：異步方案選型redux-saga 和 redux-thunk

redux-thunk
缺點：

(1).一個異步請求的action代碼過于復雜，且異步操作太分散，相對比saga只要調用一個call方法就顯得簡單多了。
(2).action形式不統一，如果不一樣的異步操作，就要寫多個了。

優點：學習成本低

redux-saga:
優點：

（1）集中處理了所有的異步操作，異步接口部分一目了然(有提供自己的方法)
（2）action是普通對象，這跟redux同步的action一模一樣({type:XXX})
（3）通過Effect，方便異步接口的測試
（4）通過worker和watcher可以實現非阻塞異步調用，并且同時可以實現非阻塞調用下的事件監聽
（5） 異步操作的流程是可以控制的，可以隨時取消相應的異步操作。

缺點：學習成本高。

原文鏈接不記得了（囧...)
相同點：

1.數據驅動視圖，提供響應式的視圖組件
2.都有virtual DOM， 組件化開發，通過props參數進行父子組件數據的傳遞，都實現webComponents規范
3.都支持服務端渲染  
4.都有native解決方案，reactnative（facebook團隊） vs weex（阿里團隊）

不同點：

1.vuex是一個針對VUE優化的狀態管理系統，而redux僅是一個常規的狀態管理系統（Redux）與React框架的結合版本。
2.開發模式：React本身，是嚴格的view層，MVC模式；Vue則是MVVM模式的一種方式實現
3.數據綁定：Vue借鑒了angular，采取雙向數據綁定的方式；React，則采取單向數據流的方式
4.數據更新：Vue采取依賴追蹤，默認是優化狀態：按需更新；
    React在則有兩種選擇：
    1）手動添加shouldComponentUpdate，來避免冗余的vdom，re-render的情況
    2）Components 盡可能都用 pureRenderMixin，然后采用 redux 結構 + Immutable.js
5.社區：react相比來講還是要大于vue，畢竟背后支撐團隊不同。
    facebook vs 個人！當然目前vue的增長速度是高于react的增速，不知道未來的發展趨勢是如何。

總之：期待構建一個大型應用程序——選擇React，期待應用盡可能的小和快——選擇Vue

原理：實現URL與UI界面的同步。其中在react-router中，URL對應Location對象，
而UI是由react components來決定的，這樣就轉變成location與components之間的同步問題。

優點：

1.風格: 與React融為一體,專為react量身打造，編碼風格與react保持一致，例如路由的配置可以通過component來實現
2.簡單: 不需要手工維護路由state，使代碼變得簡單
3.強大: 強大的路由管理機制，體現在如下方面
4.路由配置: 可以通過組件、配置對象來進行路由的配置
5.路由切換: 可以通過 Redirect進行路由的切換
6.路由加載: 可以同步記載，也可以異步加載，這樣就可以實現按需加載
7.使用方式: 不僅可以在瀏覽器端的使用，而且可以在服務器端的使用

缺點：API不太穩定，在升級版本的時候需要進行代碼變動。

我只挑了一部分。
原文鏈接：https://blog.csdn.net/qq_3548...

1. V4不再使用V3里的{props.children}(代表所有路由-個人理解)，而V4丟給 DOM 的是我們的應用程序本身.
2. V4還同時支持同時渲染多個路由，1和2都可參照下面代碼，當訪問 /user 時，兩個組件都會被渲染。(V3可實現但過程復雜)

  

    

      Our React Router 4 App
      
    
    

      
      
    
  
;

3.獲取路由的路徑匹配，可以使用props.match.path獲取，match上還有match.params,match.url等屬性。
注：url是瀏覽器的url的一部分，path是給router寫的路徑
4.多了一個限制未登錄的用戶訪問某些路由功能，可以在應用程序頂端中設置一個主入口，區別登錄和未登錄UI展示界面。

參考鏈接：webpack配置整理

概念： webpack是一個預編譯模塊方案，它會分析你的項目結構將其打包成適合瀏覽器加載的模塊。
打包原理：把所有依賴打包成一個bundle.js文件，通過代碼分割成單元片段并按需加載。
核心思想：

1.一切皆模塊，一個js，或者一個css文件也都看成一個模塊，
2.按需加載，傳統的模塊打包工具（module bundlers）最終將所有的模塊編譯生成一個龐大的bundle.js文件。
    但是在真實的app里邊，“bundle.js”文件可能有10M到15M之大可能會導致應用一直處于加載中狀態。
    因此Webpack使用許多特性來分割代碼然后生成多個“bundle”文件，而且異步加載部分代碼以實現按需加載。

基礎配置項：

1. entry:{} 入口，支持多入口
2. output 出口
3. resolve 處理依賴模塊路徑的解析
4. module 處理多種文件格式的loader
5. plugins 除了文件格式轉化由loader來處理，其他大多數由plugin來處理
6. devServer 配置 webpack-dev-server
7. 搭配package.json配置環境變量，以及腳本配置。
"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
}

"scripts": {
    "build_": "NODE_ENV=production webpack",
    "start_": "NODE_ENV=development webpack-dev-server"
}

參考資料：淺談React高階組件 
通俗理解 React 高階函數
深入淺出React高階組件

定義：js里的高階函數的定義是接收一個函數作為參數，并返回一個函數。redux的connect就是一個高階函數。
那react高階組件就是指接收一個react組件作為入參，并返回一個新react組件的組件。

好處：它不用關心組件從哪來，也就是不用自己去引入很多個組件了。
一個簡單的高階組件：(寫法不是唯一)

    export default function withHeader(WrappedComponent){
        return class HOC extends component{
            return (
                

                    
這是一段普通的文字
                    
                
            )
        }
    }

直接引入：import withHeader from "withHeader"

高階組件部分還有待補充。