摘要：而中實(shí)現(xiàn)原理是利用高階函數(shù)通過將多個(gè)函數(shù)組合成一個(gè)可執(zhí)行執(zhí)行函數(shù)關(guān)鍵步驟代碼如下所示。和都是基于更新差異元素。

平時(shí)開發(fā)單頁項(xiàng)目應(yīng)用基于vue,目前另外兩個(gè)比較熱的庫還有angular和react,angular 1系列用過,進(jìn)入公司后由于基于vue技術(shù)棧就沒在關(guān)注了。
一直在關(guān)注react,目的不是學(xué)習(xí)用法,只是為了拓展自己的視野和思維,通過了解一些使用上的差異性,來進(jìn)一步的思考其底層設(shè)計(jì)的思想。

在具體業(yè)務(wù)邏輯開發(fā)前,我們首先要做的是搭建項(xiàng)目骨架,vue的話可以使用vue-cli,通過腳手架產(chǎn)生的配置完全暴露出來,我們可以靈活的修改配置來定制化需求。
我常用幾個(gè)配置如下

    build時(shí)assetsPublicPath會(huì)修改成相對(duì)引入,或者配置成公共前綴,方便測(cè)試
    dev時(shí)proxyTable代理一些接口,聯(lián)調(diào)用,自己測(cè)試話就直接用mock數(shù)據(jù)服務(wù)
    關(guān)閉devtool,去除contenthash,chunkhash,html的minify,添加externals,定制化一些eslint……等等
    其它也有一些不通用改動(dòng),上面是每個(gè)項(xiàng)目都通用的配置

至于react可以使用create-react-app架手架,然后就直接可以使用create-react-app創(chuàng)建項(xiàng)目了,默認(rèn)隱藏配置,定制化配置可以直接npm run eject。需要注意點(diǎn)就是使用?create-react-app創(chuàng)建比較慢,需要做如下設(shè)置

    ?npm config set registry https://registry.npm.taobao.org 

其實(shí)自定義配置直接在配置依賴包里也可以改動(dòng),不過這樣不太好。其次腳手架創(chuàng)建項(xiàng)目最好不要在已有g(shù)it目錄下載創(chuàng)建,不然使用npm run eject會(huì)報(bào)錯(cuò),此時(shí)用空目錄下創(chuàng)建即可。
無論是哪個(gè)腳手架常用的配置,都是基于webpack核心生態(tài)圈構(gòu)建,所以核心重點(diǎn)就是webpack用的熟練的話,無論使用哪個(gè)自定義化配置都不成問題。

vue稍微復(fù)雜些單頁會(huì)基于vue+vuex+vue-router,react棧是react+redux+react-router。
不同點(diǎn)是vue組件是(html+css+js),對(duì)開發(fā)友好,上手容易。react一切都是js,特別的靈活,通過在render中利用純js邏輯控制渲染輸出模板。下面是基于react的一個(gè)示例。

render() {
    let name = this.state.flag ? "true":"false"
    return (
        

            {this.props.items.map(item => (
                
{item.text}
            ))}
            {name}
        
    );
}

vue的語法糖可以讓我們?cè)诒韱紊陷p松的實(shí)現(xiàn)雙向綁定,而react是純粹的基于UI=render(data)的理念。vue利用es5的set,get機(jī)制收集依賴,能詳細(xì)的定位修改元素,react每次setState對(duì)組件構(gòu)造函數(shù)中私有屬性進(jìn)行修改時(shí),組件都會(huì)更新,除非你在shouldComponentUpdate加入一些邏輯處理。另外vue提供的api多,有很多好用又方便的指令,但是具有兩面性,而react核心概念少,js用的溜,上手挺容易的。

無論是vue還是react都支持組件私有屬性;組件之間prop,組件之間簡(jiǎn)單關(guān)數(shù)據(jù)系修改的話,可以使用事件的方式,vue此時(shí)又提供了個(gè)語法糖sync,吼吼,其它的話沒啥差異。

比較麻煩的一點(diǎn)就是復(fù)雜網(wǎng)狀組件之間數(shù)據(jù)流動(dòng)時(shí)處理,此時(shí)就需要合理組織數(shù)據(jù)了,不然維護(hù),調(diào)試就是一個(gè)大坑,事件方式就不適合了,此時(shí)就要說到vuex和redux了,vuex的getter獲取state中數(shù)據(jù),映射到組件data屬性上,Mutation同步commit修改數(shù)據(jù),Action中dispatch可同步or異步修改數(shù)據(jù),核心是單一狀態(tài)樹,通過設(shè)計(jì)層層方法最后達(dá)到修改數(shù)據(jù)的目的就是為了更好的管理,檢測(cè)數(shù)據(jù)的流動(dòng)。redux因?yàn)槠綍r(shí)用的少,所以此刻我要描述的詳細(xì)些,以做備忘。

import {createStore, applyMiddleware, compose} from "redux"
import thunk from "redux-thunk"
import {Provider} from "react-redux"
const store = createStore(counter,
    compose(
        applyMiddleware(thunk),
        window.devToolsExtension?window.devToolsExtension(): f => f
    )) 
ReactDOM.render(
    
        
    ,
    document.getElementById("root")
);

了解背后原理，可以讓我們更靈活的控制代碼，下面開始詳細(xì)的分析。
執(zhí)行createStore,提供一個(gè)狀態(tài)樹的初始化環(huán)境,返回一個(gè)對(duì)象,其中包含一些閉包函數(shù),引用createStore初始化環(huán)境中中的各種函數(shù)和變量,例如dispatch(派發(fā)action),getState(獲取只讀狀態(tài)樹上的值),subscribe(訂閱數(shù)據(jù)改變)等等,其中

dispatch({ type: ActionTypes.INIT })(源碼:248)

此代碼的目的是創(chuàng)建store的時(shí)候,給reduce一個(gè)默認(rèn)值,初始化currentState值,方便初次getState調(diào)用。

applyMiddleware中間件機(jī)制,可以在處理store前后加一些通用處理,其它例如express,koa,springMVC這些框架中都有這種思想,實(shí)現(xiàn)方式不同,目的都一樣,解耦,可插拔效果,便于維護(hù)。
而rudux中applyMiddleware實(shí)現(xiàn)原理是利用高階函數(shù)compose,通過reduce將多個(gè)函數(shù)組合成一個(gè)可執(zhí)行執(zhí)行函數(shù),關(guān)鍵步驟代碼如下所示。

//applyMiddleware.js
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch) 

//compose.js
funcs.reduce((a, b) => (...args) => a(b(...args)))

thunk 至于這個(gè)就是用來方便做異步處理的,是一個(gè)高階函數(shù)中間件,如下所示,一般action返回的都是一個(gè)行為描述對(duì)象,但是這個(gè)在你對(duì)store進(jìn)行處理前加了一層邏輯判斷,以便我們?cè)诮M件上統(tǒng)一的方式寫dispatch相關(guān)的代碼。

 if (typeof action === "function") {
      return action(dispatch, getState, extraArgument);
    }

devToolsExtension //開啟調(diào)試工具,沒有vue方便,不能自動(dòng)檢測(cè)

Provider提供一個(gè)上下文環(huán)境,讓一個(gè)樹上的所有組件都能訪問同一個(gè)對(duì)象。必要前提條件是添加加childContextTypes和getChildContext。

為了更好的體驗(yàn),一般我們會(huì)采取一些措施,下面總結(jié)一下針對(duì)vue和react的優(yōu)化措施。
重單頁應(yīng)用,在路由中我們可以異步加載組件,雖然兩者都支持,原理類似,但是vue使用極其方便,如下所示

const My = () => import("../components/My.vue")

有一點(diǎn)需要注意的就是需要配置下assetsPublicPath,這樣打包后的url中是全路徑,否則按照相對(duì)路徑處理容易出問題;相對(duì)而言react還要用模板代碼包裝下組件,這一點(diǎn)不好,不過未來react未來會(huì)開啟異步渲染組件的支持,這一點(diǎn)很贊。

vue和react都是基于dom diff更新差異元素。vue中,我們操作的data數(shù)據(jù)是vue封裝處理過,修改數(shù)據(jù)時(shí),vue會(huì)將數(shù)據(jù)初始化時(shí)收集的相關(guān)依賴元素進(jìn)行更新,而react每次setState更新數(shù)據(jù)針對(duì)的是組件,為了優(yōu)化,組件設(shè)計(jì)的時(shí)候盡量細(xì)粒度,尤其是react當(dāng)中的展示類組件。

因?yàn)閮烧呤褂玫氖轻槍?duì)web頁面情況優(yōu)化過的dom diff算法,以使復(fù)雜度降低為O(n),所以有一些默認(rèn)前提,理解并按照默認(rèn)diff規(guī)則才能使代碼達(dá)到最優(yōu),比如說,保持根節(jié)點(diǎn)一致;一個(gè)dom父節(jié)點(diǎn)下有多個(gè)子節(jié)點(diǎn)并列時(shí),給子節(jié)點(diǎn)添加key,防止對(duì)父節(jié)點(diǎn)使用insertBefore插入子節(jié)點(diǎn)這種情況等等。

陸陸續(xù)續(xù)的學(xué)習(xí)過程中,將自己的想法自己總結(jié)下來。

說明,文中的總結(jié)基于下面這些版本,
vue ^2.4.2
react 16.0.0-rc.2
redux 3.7.2
react-router 4.2