标签：
曾经看到一篇文章，写的是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的。
上述代码，我们干了三件事：
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是绑定的，所以，组件也跟着变化了！
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。
上述代码，我们干了三件事：
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‘) ] };
槽点如下：
这些想法，我想对于angular开发者来说，都是有共鸣的。
没有用过angular的react开发者觉得react好，可能是因为他们没有用过angular，拿react和jquery对比得出的结论。
用过angular的react开发者觉得react好，无非就是因为
但是，不考虑性能和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证明你的开发效率低下”
标签：
原文地址：http://www.cnblogs.com/lewis617/p/5126334.html
