年前上班
摸魚(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ū)別：
-
首先
React是單向數(shù)據(jù)流：
啥意思呢？個(gè)人理解就是老子捶兒子，兒子不能反抗，只能忍。
而Vue默認(rèn)雙向綁定的：
又是啥意思呢？個(gè)人理解就是老子捶兒子，兒子特么不爽了，就起身揍老子了，開(kāi)始互搏了（這個(gè)解釋在Vue 1.0里是非常到位的，只是Vue 2.0就不能父子組件之間props雙向綁定了，就是只剩下組件 <–> DOM之間的雙向綁定這一種了）。
數(shù)據(jù)流的區(qū)別 渲染模版方式不同：
React中render函數(shù)是支持閉包特性的，所以我們import的組件在render中可以直接調(diào)用。但是在Vue中，由于模板中使用的數(shù)據(jù)都必須掛在this上進(jìn)行一次中轉(zhuǎn)，所以我們import一個(gè)組件完了之后，還需要在components中再聲明下。-
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。
- 在
再來(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)題
