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

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

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

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

shouldComponentUpdate:組件接受到新屬性或者新狀態(tài)的時候（返回 false，接收數(shù)據(jù)后不更新，阻止 render ，后面的函數(shù)不會繼續(xù)執(zhí)行）
componentWillUpdate:組件即將更新不能修改屬性和狀態(tài)
componentDidUpdate:組件已經(jīng)更新

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

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

shouldComponentUpdate，這個方法用來判斷是否需要調(diào)用 render 方法重繪 dom。
因為 dom 的描繪非常消耗性能，如果我們能在這個方法中能夠?qū)懗龈鼉?yōu)化的 dom diff 算法，可以極大的提高性能。

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

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

實現(xiàn)原理：

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

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

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

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

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

父子：父傳子：props； 子傳父：子調(diào)用父組件中的函數(shù)并傳參；
兄弟：利用redux實現(xiàn)。
所有關(guān)系都通用的方法：利用PubSub.js訂閱

原理：當(dāng)調(diào)用setState時，它并不會立即改變，而是會把要修改的狀態(tài)放入一個任務(wù)隊列，等到事件循環(huán)結(jié)束時，再合并指更新。
因此，setState有 異步，合并更新更新兩個特性。

這里應(yīng)該需要了解下Batch Update 。

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

    this.setState({
        isLoading:false
    })

2.還可以接收一個函數(shù)

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

3.因為setState是異步的，所以它還可以接收第二個參數(shù)，一個回調(diào)函數(shù)

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

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

1.保證內(nèi)部的一致性

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

2.性能優(yōu)化

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

3.支持state在幕后渲染

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

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

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

優(yōu)勢：

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

不足：

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

特點：　

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

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

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

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

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

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

相同點：

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

不同點：

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

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

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

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

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

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

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

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

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

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

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

redux-thunk
缺點：

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

優(yōu)點：學(xué)習(xí)成本低

redux-saga:
優(yōu)點：

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

缺點：學(xué)習(xí)成本高。

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

1.數(shù)據(jù)驅(qū)動視圖，提供響應(yīng)式的視圖組件
2.都有virtual DOM， 組件化開發(fā)，通過props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳遞，都實現(xiàn)webComponents規(guī)范
3.都支持服務(wù)端渲染  
4.都有native解決方案，reactnative（facebook團(tuán)隊） vs weex（阿里團(tuán)隊）

不同點：

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

總之：期待構(gòu)建一個大型應(yīng)用程序——選擇React，期待應(yīng)用盡可能的小和快——選擇Vue

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

優(yōu)點：

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

缺點：API不太穩(wěn)定，在升級版本的時候需要進(jìn)行代碼變動。

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

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

  

    

      Our React Router 4 App
      
    
    

      
      
    
  
;

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

參考鏈接：webpack配置整理

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

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

基礎(chǔ)配置項：

1. entry:{} 入口，支持多入口
2. output 出口
3. resolve 處理依賴模塊路徑的解析
4. module 處理多種文件格式的loader
5. plugins 除了文件格式轉(zhuǎn)化由loader來處理，其他大多數(shù)由plugin來處理
6. devServer 配置 webpack-dev-server
7. 搭配package.json配置環(huán)境變量，以及腳本配置。
"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 高階函數(shù)
深入淺出React高階組件

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

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

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

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

直接引入：import withHeader from "withHeader"

高階組件部分還有待補(bǔ)充。