Vue Logo

年前上班摸魚(yú)時(shí)間來(lái)寫(xiě)一個(gè)～～
那么關(guān)注過(guò)我的小伙伴都知道，我之前是搞過(guò)RN的，所以先來(lái)個(gè)React和Vue兩套框架的對(duì)比～～
TIP：
之前Vue項(xiàng)目，我就是在劃水，沒(méi)想到這個(gè)項(xiàng)目還是Vue～～媽蛋，沒(méi)辦法了，逃不掉??！只能重新對(duì)待了～～

React 和 Vue 區(qū)別：

1. 首先 React 是單向數(shù)據(jù)流：
   啥意思呢？個(gè)人理解就是老子捶兒子，兒子不能反抗，只能忍。
   而 Vue默認(rèn)雙向綁定的：
   又是啥意思呢？個(gè)人理解就是老子捶兒子，兒子特么不爽了，就起身揍老子了，開(kāi)始互搏了（這個(gè)解釋在Vue 1.0里是非常到位的，只是Vue 2.0就不能父子組件之間props雙向綁定了，就是只剩下組件 <–> DOM 之間的雙向綁定這一種了）。
   

   數(shù)據(jù)流的區(qū)別

2. 渲染模版方式不同：
   React中render函數(shù)是支持閉包特性的，所以我們import的組件在render中可以直接調(diào)用。但是在Vue中，由于模板中使用的數(shù)據(jù)都必須掛在 this 上進(jìn)行一次中轉(zhuǎn)，所以我們import 一個(gè)組件完了之后，還需要在 components 中再聲明下。

3. Vuex 和 Redux 的區(qū)別：

   • 在Vuex中，$store被直接注入到了組件實(shí)例中，而且是全局都可以 用，注冊(cè)一次，可以瞎JB用，使用dispatch或者commit提交更新，其實(shí)我覺(jué)得不用在actions里搞個(gè)commit 下 mutations 里的方法，而直接在 component 里去 commit 方法也是可以的，以為我試過(guò)沒(méi)啥卵區(qū)別～～雞肋(我唯一解釋的通的原因就是模仿Redux，搞個(gè)類(lèi)似于ActionType的東西吧)。
   • 在Redux中，要用store 里的數(shù)據(jù)，那就要多寫(xiě)好幾步：先搞個(gè)Provider把我們的組件套一套，不然獲取不到，再把我們對(duì)應(yīng)組件需要顯示的數(shù)據(jù)，用connect把需要的指定的 state和指定的 action連接起來(lái)，也就是你之前寫(xiě)的子 reducer。

4. 再來(lái)看下代碼的區(qū)分：

Vuex:

mport Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const index = new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
});

export default index;

TIP：
如果你要用modules的話(huà)，每個(gè)單獨(dú)的里面都要寫(xiě)上namespaced:true。

Redux：

在 Provider 里面拿 store
render() {
        return (
            <Provider store={ConfigureStore}>
                <NavigationIndex/>
            </Provider>
        )
    }

store 的注冊(cè)
import {createStore, applyMiddleware, compose} from 'redux';
import thunkMiddleware from 'redux-thunk';
import logger from 'redux-logger'

import rootReducer from '../reducers/index';

function RootStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        compose(applyMiddleware(thunkMiddleware,logger))
    )
}

const Store=RootStore();
export default Store;

ActionType：
//供應(yīng)商搜索信息
export const GET_SUPPLIER_INFO_NEW = "GET_SUPPLIER_INFO_NEW_QCC";
//復(fù)制
export const GET_DEFAULT_DATA_COPY = 'GET_DEFAULT_DATA_COPY_TYPE_QCC';
//清空?qǐng)D片
export const CLEAR_IMAGES = 'CLEAR_IMAGES_QCC';

頁(yè)面和數(shù)據(jù)玩的捆綁
export default connect((state) => {
    const {CheckOutReducer}=state;
    return {
        CheckOutReducer
    }
}, Actions)(CheckOut)

TIP：
再補(bǔ)充一點(diǎn)：在 Redux中，ActionType 命名不要一致，也就是你哪怕當(dāng)前頁(yè)面只捆綁(SM 了解一下，嘿嘿～)的Reducer A，但是當(dāng)你Reducer B中的ActionType也是同一個(gè)，也會(huì)觸發(fā)的，因?yàn)樗撬械?code>Reducer都會(huì)來(lái)一遍～～

來(lái)來(lái)來(lái)，我們來(lái)總結(jié)下：看到以上紅色字體可以得出，Redux是不是比Vue復(fù)雜的同時(shí)，更加框架化，頁(yè)面必須和你要使用的數(shù)據(jù)關(guān)聯(lián)起來(lái)，你才能用，不像Vuex特么注冊(cè)一次，你就可以瞎雞巴全局拿來(lái)用，當(dāng)然Vuex里的modules也是幫助你類(lèi)似的效果 ......
媽的，打你好累，快點(diǎn)結(jié)束吧～也就是React比 Vue更偏向于構(gòu)建穩(wěn)定大型的應(yīng)用。

哎喲～背有點(diǎn)僵硬了，第一期理論全是理論沒(méi)什么卵用，下期來(lái)個(gè)干貨，把遇到的問(wèn)題都來(lái)列一列。
最近肺炎恐慌，大家減少外出，祝冬安！
那么我們下期再見(jiàn)～

推薦鏈接
IT 界寄來(lái)的書(shū)信系列
IT 界寄來(lái)的段子系列
IT 界起來(lái)的書(shū)籍系列
搞笑我們是用心系列
React Native 專(zhuān)題