angular開發人員吐槽react+redux的複雜：“一個demo證明你的開發效率低下”

標籤：

曾經看到一篇文章，寫的是jquery開發人員吐槽angular的複雜。作為一個angular開發人員，我來吐槽一下react+redux的複雜。

例子

為了讓大家看得舒服，我用最簡單的一個demo來展示react+redux的“彎彎繞”，下面這個程式就是我用react和redux寫的。然而這個程式在angular中一行js都不用寫！！！

展示組件

App.js

import React, { findDOMNode, Component } from ‘react‘;import ReactDOM from ‘react-dom‘;import { connect } from ‘react-redux‘;import * as action from ‘./actions‘class App extends Component {  render() {    return (      <div>        <input type=‘text‘ value={this.props.propsValue} onChange={this.changeHandle.bind(this)} ref="input"/>        {this.props.propsValue}      </div>    );  }  changeHandle(){    const node = ReactDOM.findDOMNode(this.refs.input);    const value = node.value.trim();    this.props.change(value);  }}function mapStateToProps(state) {  return {    propsValue: state.value  }}//將state的指定值對應在props上，將action的所有方法映射在props上export default connect(mapStateToProps,action)(App);

沒有玩過redux的同學們可能已經看得有點暈了，redux的設計是這樣的：

 

state就是資料，組件就是資料的呈現形式，action是動作，action是通過reducer來更新state的。

上述代碼，我們幹了三件事：

1. 編寫一個可視化組件（其實就是個input）;
2. 將state的value屬性綁定在組件的props上;
3. 將action的所有方法綁定在組件的props上。

action和reducer兩個好基友負責更新state

 actions.js

//定義一個change方法，將來把它綁定到props上export function change(value){    return{        type:"change",        value:value    }}

reducers.js

//reducer就是個function,名字隨便你起，功能就是在action觸發後，返回一個新的state(就是個對象)export default function change(state,action){  if(action.type=="change")return{value:action.value};  return {value:‘default‘};}

 上述代碼我們就幹了一件事：使用者觸發action後，更新狀態。

因為狀態和組件的props是綁定的，所以，組件也跟著變化了！

store出場，將reducer注入組件

index.js

import React from ‘react‘import { render } from ‘react-dom‘import { createStore } from ‘redux‘import { Provider } from ‘react-redux‘import App from ‘./App‘import inputApp from ‘./reducers‘let store = createStore(inputApp);render(  <Provider store={store}>    <App />  </Provider>,  document.querySelector("#app"));

provider是組件頂層，用來乘放store。

上述代碼，我們幹了三件事：

1. 將reducer放進store
2. 將store放進provider
3. 將provider放在組件頂層，並渲染

最後用webpack編譯運行

webpack.config.js

var path = require(‘path‘);var webpack = require(‘webpack‘);module.exports = {    entry: {        app:path.join(__dirname, ‘src‘),        vendors: [‘react‘,‘redux‘]    },    output: {        path: path.join(__dirname, ‘dist‘),        filename: ‘[name].js‘    },    module: {        loaders: [            {                test:/\.js?$/,                exclude:/node_modules/,                loader:‘babel‘,                query:{                    presets:[‘react‘,‘es2015‘]                }            }        ]    },    plugins: [        new webpack.optimize.CommonsChunkPlugin(‘vendors‘, ‘vendors.js‘)    ]};

好了，開始吐槽

槽點如下：

1. 概念太多，props,state,action,reducer,store,provider,就這還沒引入router呢,對新手而言，無法在腦海中立馬形成一個清晰的流程
2. 很多概念冗餘，比如reducer和store
3. 很簡單一個功能，寫了這麼多代碼，如果用angular一行代碼都不用寫
4. 看看我們為了虛擬dom的高效能以及伺服器渲染，犧牲了多少，虛擬dom的設計如果被angular引入，那麼react的優點何在？
5. 看看react所謂的簡單，平滑的學習曲線，在引入某種架構後，還不是照樣複雜。react本身非常簡單，可是又有什麼用呢？我們絕大多數人，還不是得結合backbone或者angular或者flux，reflux,redux來用。這樣看來還簡單嗎？
6. 更新太快，如果我不列出package.json清單，幾個月後你能運行這個程式嗎？
7. 一個頁面的HTML模板被完全片段化了，angular的指令雖說也有此嫌疑，但是angular旨在”拓展html的能力“，並沒有完全片段化模板。
8. ……

這些想法，我想對於angular開發人員來說，都是有共鳴的。

沒有用過angular的react開發人員覺得react好，可能是因為他們沒有用過angular，拿react和jquery對比得出的結論。

用過angular的react開發人員覺得react好，無非就是因為

1. react牛逼的伺服器渲染
2. diff演算法帶來的高效能。

但是，不考慮效能和seo，單從開發效率上來講，angular以及mvvm的其他架構相對優秀一點！

當然這裡還有適用情境的問題，因為我們研究所目前在做的是大資料平台，全是crud和表單，使用angular開發會非常合適。

一定要看

最後，我想說這篇文章娛樂為主，並不具有實際參考價值。因為redux是用來管理狀態的架構，通常在大型複雜的項目中會發揮優勢，而我用這樣一個簡單的demo來說明問題，本來就是嘩眾取寵，為了吸人眼球（來咬我呀）。前端圈太浮躁，就愛看這種文章。當然初學者也可以通過這篇文章來學習react+redux。

範例程式碼：

https://github.com/lewis617/myReact/tree/master/input-redux

運行方法：

npm install

npm run build

手動開啟index.html

 

angular開發人員吐槽react+redux的複雜：“一個demo證明你的開發效率低下”