年前上班
摸魚時間來寫一個～～
那么關注過我的小伙伴都知道，我之前是搞過RN的，所以先來個React和Vue兩套框架的對比～～
TIP：
之前Vue項目，我就是在劃水，沒想到這個項目還是Vue～～媽蛋，沒辦法了，逃不掉啊！只能重新對待了～～
React 和 Vue 區別：
-
首先
React是單向數據流：
啥意思呢？個人理解就是老子捶兒子，兒子不能反抗，只能忍。
而Vue默認雙向綁定的：
又是啥意思呢？個人理解就是老子捶兒子，兒子特么不爽了，就起身揍老子了，開始互搏了（這個解釋在Vue 1.0里是非常到位的，只是Vue 2.0就不能父子組件之間props雙向綁定了，就是只剩下組件 <–> DOM之間的雙向綁定這一種了）。
數據流的區別 渲染模版方式不同：
React中render函數是支持閉包特性的，所以我們import的組件在render中可以直接調用。但是在Vue中，由于模板中使用的數據都必須掛在this上進行一次中轉，所以我們import一個組件完了之后，還需要在components中再聲明下。-
Vuex和Redux的區別：- 在
Vuex中，$store被直接注入到了組件實例中，而且是全局都可以 用，注冊一次，可以瞎JB用，使用dispatch或者commit提交更新，其實我覺得不用在actions里搞個commit 下 mutations 里的方法，而直接在 component 里去 commit 方法也是可以的，以為我試過沒啥卵區別～～雞肋(我唯一解釋的通的原因就是模仿Redux，搞個類似于ActionType的東西吧)。 - 在
Redux中，要用store里的數據，那就要多寫好幾步：先搞個Provider把我們的組件套一套，不然獲取不到，再把我們對應組件需要顯示的數據，用connect把需要的指定的 state和指定的 action連接起來，也就是你之前寫的子 reducer。
- 在
再來看下代碼的區分：
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的話，每個單獨的里面都要寫上namespaced:true。
Redux：
在 Provider 里面拿 store
render() {
return (
<Provider store={ConfigureStore}>
<NavigationIndex/>
</Provider>
)
}
store 的注冊
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：
//供應商搜索信息
export const GET_SUPPLIER_INFO_NEW = "GET_SUPPLIER_INFO_NEW_QCC";
//復制
export const GET_DEFAULT_DATA_COPY = 'GET_DEFAULT_DATA_COPY_TYPE_QCC';
//清空圖片
export const CLEAR_IMAGES = 'CLEAR_IMAGES_QCC';
頁面和數據玩的捆綁
export default connect((state) => {
const {CheckOutReducer}=state;
return {
CheckOutReducer
}
}, Actions)(CheckOut)
TIP：
再補充一點：在 Redux中，ActionType 命名不要一致，也就是你哪怕當前頁面只捆綁(SM 了解一下，嘿嘿～)的Reducer A，但是當你Reducer B中的ActionType也是同一個，也會觸發的，因為他是所有的Reducer都會來一遍～～
來來來，我們來總結下：看到以上
紅色字體可以得出，Redux是不是比Vue復雜的同時，更加框架化，頁面必須和你要使用的數據關聯起來，你才能用，不像Vuex特么注冊一次，你就可以瞎雞巴全局拿來用，當然Vuex里的modules也是幫助你類似的效果 ......
媽的，打你好累，快點結束吧～也就是React比Vue更偏向于構建穩定大型的應用。
哎喲～背有點僵硬了，第一期理論全是理論沒什么卵用，下期來個干貨，把遇到的問題都來列一列。
最近肺炎恐慌，大家減少外出，祝冬安！
那么我們下期再見～
推薦鏈接
IT 界寄來的書信系列
IT 界寄來的段子系列
IT 界起來的書籍系列
搞笑我們是用心系列
React Native 專題
