年前上班
摸魚時(shí)間來寫一個(gè)～～
那么關(guān)注過我的小伙伴都知道彪腔，我之前是搞過RN的，所以先來個(gè)React和Vue兩套框架的對(duì)比～～
TIP：
之前Vue項(xiàng)目，我就是在劃水解阅，沒想到這個(gè)項(xiàng)目還是Vue～～媽蛋，沒辦法了闸氮，逃不掉凹艨觥！只能重新對(duì)待了～～
React 和 Vue 區(qū)別：
-
首先
React是單向數(shù)據(jù)流：
啥意思呢湖苞？個(gè)人理解就是老子捶兒子拯欧，兒子不能反抗，只能忍财骨。
而Vue默認(rèn)雙向綁定的：
又是啥意思呢镐作？個(gè)人理解就是老子捶兒子，兒子特么不爽了隆箩，就起身揍老子了该贾，開始互搏了（這個(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í)我覺得不用在actions里搞個(gè)commit 下 mutations 里的方法，而直接在 component 里去 commit 方法也是可以的屋摔，以為我試過沒啥卵區(qū)別～～雞肋(我唯一解釋的通的原因就是模仿Redux烁设，搞個(gè)類似于ActionType的東西吧)。 - 在
Redux中钓试，要用store里的數(shù)據(jù)署尤，那就要多寫好幾步：先搞個(gè)Provider把我們的組件套一套，不然獲取不到亚侠，再把我們對(duì)應(yīng)組件需要顯示的數(shù)據(jù)曹体，用connect把需要的指定的 state和指定的 action連接起來，也就是你之前寫的子 reducer硝烂。
- 在
再來看下代碼的區(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的話箕别，每個(gè)單獨(dú)的里面都要寫上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';
頁面和數(shù)據(jù)玩的捆綁
export default connect((state) => {
const {CheckOutReducer}=state;
return {
CheckOutReducer
}
}, Actions)(CheckOut)
TIP：
再補(bǔ)充一點(diǎn)：在 Redux中，ActionType 命名不要一致串稀，也就是你哪怕當(dāng)前頁面只捆綁(SM 了解一下除抛，嘿嘿～)的Reducer A，但是當(dāng)你Reducer B中的ActionType也是同一個(gè)母截，也會(huì)觸發(fā)的到忽，因?yàn)樗撬械?code>Reducer都會(huì)來一遍～～
來來來，我們來總結(jié)下：看到以上
紅色字體可以得出清寇，Redux是不是比Vue復(fù)雜的同時(shí)喘漏，更加框架化，頁面必須和你要使用的數(shù)據(jù)關(guān)聯(lián)起來华烟，你才能用翩迈，不像Vuex特么注冊(cè)一次，你就可以瞎雞巴全局拿來用盔夜，當(dāng)然Vuex里的modules也是幫助你類似的效果 ......
媽的负饲，打你好累，快點(diǎn)結(jié)束吧～也就是React比Vue更偏向于構(gòu)建穩(wěn)定大型的應(yīng)用喂链。
哎喲～背有點(diǎn)僵硬了返十，第一期理論全是理論沒什么卵用，下期來個(gè)干貨椭微，把遇到的問題都來列一列洞坑。
最近肺炎恐慌，大家減少外出赏表，祝冬安检诗！
那么我們下期再見～
推薦鏈接
IT 界寄來的書信系列
IT 界寄來的段子系列
IT 界起來的書籍系列
搞笑我們是用心系列
React Native 專題
