初探React，将我们的View标签化
前言
我之前喜欢玩一款游戏：全民飞机大战，而且有点痴迷其中，如果你想站在游戏的第一阶梯，便需要不断的练技术练装备，但是腾讯的游戏一般而言是有点恶心的，他会不断的出新飞机、新装备、新宠物，所以，很多时候你一个飞机以及装备还没满级，新的装备就又出来了，并且一定是更强！
于是很多人便直接抛弃当前的飞机与装备，追求更好的，这个时候如果是人民币玩家或者骨灰级大神玩家的话，基本可以很快站在世界的顶端，一者是装备好，一者是技术好，但是我不愿意投入太多钱，也不愿意投入过多精力，于是在一套极品装备满级后会积累资源，因为一代之间变化不会太大，到第二代甚至第三代才开始换飞机换装备，也基本处于了第一阶梯，一直到一次游戏大更新， 直接导致我当前的飞机与装备完全二逼了，我当时一时脑热投入了所有资源去刷新的极品装备，最后闹的血本无归，于是便删除了该游戏，一年时间付诸东流！！！
再回过头来看最近两年前端的变化，单是一个前端工程化工具就变了几次，而且新出来的总是叫嚷着要替换之前的，grunt->gulp->webpack->es6
再看前端框架的一些产量：backbone、angularJS、react、canJS、vueJS......
真有点乱花渐欲迷人眼的意思，似乎前端技术也开始想要坑前端玩家，因为人家会了新技能，你就落后了，于是很多技术沉淀已经足够的大神便直接在团队使用某一技术，带领团队组员深入了解了该技术的好，并大势宣传新技术。
很多人在这种情况下就中招了！他们可能会抛弃现有技术栈，直接跟风新的技术，在现有装备都没满级的情况下又去刷新装备，如果哪天一次游戏玩法大更新，大神依旧一套极品装备在那风骚，而炮灰仓库中积累着一箩筐低等级的极品装备，却没有可用的，不可谓不悲哀！
一门技术从入门到精通，是需要时间的，在有限的时间中要学习那么多的新技术，还得落地到实际工作中，而每一次新技术的落地都是对曾经架构的否定与推翻，这个成本不可谓不高，对一些创业团队甚至是致命的。工作中也没那么多时间让你折腾新东西，所以一定是了解清楚了一门再去学习其它的，不要半途而废也不要盲目选型。
我最近回顾了这几年所学，可以说技术栈没有怎么更新，但是我对我所习的每一个技术基本上进入了深入的了解：
① 在MVVM还不太火的时候使用了MVC框架一直到最近，对为什么要使用这种模式，这种模式的好处有了比较深入的了解，并且已经碰到了更复杂的业务逻辑
② 当一个页面过于复杂时（比如1000多行代码的订单填写页），我能通过几年沉淀，将之拆分为多个业务组件模块，保持主控制器的业务清晰，代码量维护在500行之内，并且各子模块业务也清晰，根据model进行通信
③ 使用Grunt完成前端工程化，从构建项目，到打包压缩项目，到优化项目，总的来说无往不利
④ ......
就编程方法，思维习惯，解决问题的方法来说，与两年前有了很大的变化，而且感觉很难提高了。于是我认识到，就现有的装备下，可能已经玩到极限了，可能到了跟风的时候了，而时下热门的ReactJS似乎是一个很好的切入点，React一端代码多端运行的噱头也足够。
初识ReactJS
我最初接触ReactJS的时候，最火的好像是angular，React Native也没有出现，看了他的demo，对其局部刷新的实现很感兴趣。结果，翻看源码一看洋洋洒洒一万多行代码，于是马上便退却了。却不想现在火成了这般模样，身边学习的人多，用于生产的少，我想幕后必然有黑手在推动！也可以预测的是，1,2年后会有更好的框架会取代他，可能是原团队的自我推翻，也有可能是Google公司又新出了什么框架，毕竟前端最近几年才开始真正富客户端，还有很长的路要走。当然，这不是我们关心的重点，我们这里的重点是Hello world。
ReactJS的Hello World是这样写的：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="build/react.js" type="text/javascript"></script> 5 <script src="build/JSXTransformer.js" type="text/javascript"></script> 6 </head> 7 <body> 8 <div id="example"> 9 </div> 10 <script type="text/jsx"> 11 React.render( 12 <h1>Hello, world!</h1>, 13 document.getElementById('example') 14 ); 15 </script> 16 </body> 17 </html>
<div id="example"><h1 data-reactid=".0">Hello, world!</h1></div>
React一来就搞了一个标新立异的地方：jsx（js扩展），说实话，这种做法真的有点大手笔，最初的这种声明式标签写法，在我脑中基本可以追溯到5年前的.net控件了，比如gridview与datalist组件。
在text/jsx中的代码最初不会被浏览器理会，他会被react的JSXTransformer编译为常规的JS，然后浏览器才能解析。 这里与html模板会转换为js函数是一个道理，我们有一种优化方案是模板预编译，即：
在打包时候便将模板转换为js函数，免去在线解析的过程，react当然也可以这样做，这里如果要解析的话，会是这个样子：
1 React.render( 2 React.createElement("h1", null, "Hello, world!"), 3 document.getElementById('example') 4 );
因为render中的代码可以很复杂，render中的代码写法就是一种语法糖，帮助我们更好的写 表现层 代码：render方法中可以写html与js混杂的代码：
1 var data = [1,2,3]; 2 React.render( 3 <h1>Hello, {data.toString(',')}!</h1>, 4 document.getElementById('example') 5 );
1 var data = [1,2,3]; 2 React.render( 3 <h1>{ 4 data.map(function(v, i) { 5 return <div>{i}-{v}</div> 6 }) 7 }</h1>, 8 document.getElementById('example') 9 );
所以，react提供了很多类JS的语法，JSXTransformer相当于一个语言解释器，而解析逻辑长达10000多行代码，这个可不是一般屌丝可以碰的，react从这里便走出了不平常的路，而他这样做的意义是什么，我们还不知道。
标签化View
react提供了一个方法，将代码组装成一个组件，然后像HTML标签一样插入网页：
1 var Pili = React.createClass({ 2 render: function() { 3 return <h1>Hello World!</h1>; 4 } 5 }); 6 7 React.render( 8 <Pili />, 9 document.getElementById('example') 10 );
所谓，声明试编程，便是将需要的属性写到标签上，以一个文本框为例：
<input type="text" data-type="num" data-max="100" data-min="0" data-remove=true />
我们想要输入的是数字，有数字限制，而且在移动端输入的时候，右边会有一个X按钮清除文本，这个便是我们期望的声明式标签。
react中，标签需要和原始的类发生通信，比如属性的读取是这样的：
1 var Pili = React.createClass({ 2 render: function() { 3 return <h1>Hello {this.props.name}!</h1>; 4 } 5 }); 6 7 React.render( 8 <Pili name='霹雳布袋戏'/>, 9 document.getElementById('example') 10 ); 11 12 //Hello 霹雳布袋戏!
上文中Pili便是一个组件，标签使用法便是一个实例，声明式写法最终也会被编译成一般的js方法，这个不是我们现在关注的重点。
由于class与for为关键字，需要使用className与htmlFor替换 通过this.props对象可以获取组件的属性，其中一个例外为children，他表示组件的所有节点：
1 var Pili = React.createClass({ 2 render: function() { 3 return ( 4 <div> 5 { 6 this.props.children.map(function (child) { 7 return <div>{child}</div> 8 }) 9 } 10 </div> 11 ); 12 } 13 }); 14 15 React.render( 16 <Pili name='霹雳布袋戏'> 17 <span>素还真</span> 18 <span>叶小钗</span> 19 </Pili> 20 , 21 document.getElementById('example') 22 );
1 <div id="Div1"> 2 <div data-reactid=".0"> 3 <div data-reactid=".0.0"> 4 <span data-reactid=".0.0.0">素还真</span></div> 5 <div data-reactid=".0.1"> 6 <span data-reactid=".0.1.0">叶小钗</span></div> 7 </div> 8 </div>
PS：return的语法与js语法不太一样，不能随便加分号
如果想限制某一个属性必须是某一类型的话，便需要设置PropTypes属性：
1 var Pili = React.createClass({ 2 propType: { 3 //name必须有，并且必须是字符串 4 name: React.PropTypes.string.isRequired 5 }, 6 render: function() { 7 return <h1>Hello {this.props.name}!</h1>; 8 } 9 });
如果想设置属性的默认值，则需要:
1 var Pili = React.createClass({ 2 propType: { 3 //name必须有，并且必须是字符串 4 name: React.PropTypes.string.isRequired 5 }, 6 getDefaultProps : function () { 7 return { 8 title : '布袋戏' 9 }; 10 }, 11 render: function() { 12 return <h1>Hello {this.props.name}!</h1>; 13 } 14 });
我们仍然需要dom交互，我们有时也需要获取真实的dom节点，这个时候需要这么做：
1 var MyComponent = React.createClass({ 2 handleClick: function() { 3 React.findDOMNode(this.refs.myTextInput).focus(); 4 }, 5 render: function() { 6 return ( 7 <div> 8 <input type="text" ref="myTextInput" /> 9 <input type="button" value="Focus the text input" onClick={this.handleClick} /> 10 </div> 11 ); 12 } 13 });
事件触发的时候通过ref属性获取当前dom元素，然后可进行操作，我们这里看看返回的dom是什么：
<input type="text" data-reactid=".0.0">
看来是真实的dom结构被返回了，另外一个比较关键的事情，便是这里的dom事件支持，需要细读文档：http://facebook.github.io/react/docs/events.html#supported-events
表单元素，属于用户与组件的交互，内容不能由props获取，这个时候一般有状态机获取，所谓状态机，便是会经常变化的属性。
1 var Input = React.createClass({ 2 getInitialState: function() { 3 return {value: 'Hello!'}; 4 }, 5 handleChange: function(event) { 6 this.setState({value: event.target.value}); 7 }, 8 render: function () { 9 var value = this.state.value; 10 return ( 11 <div> 12 <input type="text" value={value} onChange={this.handleChange} /> 13 <p>{value}</p> 14 </div> 15 ); 16 } 17 }); 18 19 React.render(<Input/>, document.body);
组件有其生命周期，每个阶段会触发相关事件可被用户捕捉使用：
Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 一般来说，我们会为一个状态发生前后绑定事件，react也是如此：
componentWillMount() componentDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) componentWillUnmount() 此外，React 还提供两种特殊状态的处理函数。 componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用 shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用 根据之前的经验，会监控组件的生命周期的操作的时候，往往都是比较高阶的应用了，我们这里暂时不予关注。
好了，之前的例子多半来源于阮一峰老师的教程，我们这里来一个简单的验收，便实现上述只能输入数字的文本框：
1 var NumText = React.createClass({ 2 getInitialState: function() { 3 return {value: 50}; 4 }, 5 propTypes: { 6 value: React.PropTypes.number 7 }, 8 handleChange: function (e) { 9 var v = parseInt(e.target.value); 10 if(v > this.props.max || v < this.props.min ) return; 11 if(isNaN(v)) v = ''; 12 this.setState({value: v}); 13 }, 14 render: function () { 15 return ( 16 <input type="text" value={this.state.value} onChange={this.handleChange} /> 17 ); 18 } 19 }); 20 21 React.render( 22 <NumText min="0" max="100" />, 23 document.body 24 );
通过以上学习，我们对React有了一个初步认识，现在我们进入其todolist，看看其是如何实现的
此段参考：阮一峰老师的入门教程，http://www.ruanyifeng.com/blog/2015/03/react.html
TodoMVC
入口文件
TodoMVC为MVC框架经典的demo，难度适中，而又可以展示MVC的思想，我们来看看React此处的入口代码：
1 <!doctype html> 2 <html lang="en" data-framework="react"> 3 <head> 4 <meta charset="utf-8"> 5 <title>React • TodoMVC</title> 6 <link rel="stylesheet" href="node_modules/todomvc-common/base.css"> 7 <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css"> 8 </head> 9 <body> 10 <section class="todoapp"> 11 </section> 12 <script src="node_modules/react/dist/react-with-addons.js"></script> 13 <script src="node_modules/react/dist/JSXTransformer.js"></script> 14 <script src="node_modules/director/build/director.js"></script> 15 <script src="js/utils.js"></script> 16 <script src="js/todoModel.js"></script> 17 18 <script type="text/jsx" src="js/todoItem.jsx"></script> 19 <script type="text/jsx" src="js/footer.jsx"></script> 20 <script type="text/jsx" src="js/app.jsx"></script> 21 </body> 22 </html>
页面很干净，除了react基本js与其模板解析文件外，还多了一个director.js，因为react本身不提供路由功能，所以路由的工作便需要插件，director便是路由插件，这个不是我们今天学习的重点，然后是两个js文件：
1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 app.Utils = { 7 uuid: function () { 8 /*jshint bitwise:false */ 9 var i, random; 10 var uuid = ''; 11 12 for (i = 0; i < 32; i++) { 13 random = Math.random() * 16 | 0; 14 if (i === 8 || i === 12 || i === 16 || i === 20) { 15 uuid += '-'; 16 } 17 uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)) 18 .toString(16); 19 } 20 21 return uuid; 22 }, 23 24 pluralize: function (count, word) { 25 return count === 1 ? word : word + 's'; 26 }, 27 28 store: function (namespace, data) { 29 if (data) { 30 return localStorage.setItem(namespace, JSON.stringify(data)); 31 } 32 33 var store = localStorage.getItem(namespace); 34 return (store && JSON.parse(store)) || []; 35 }, 36 37 extend: function () { 38 var newObj = {}; 39 for (var i = 0; i < arguments.length; i++) { 40 var obj = arguments[i]; 41 for (var key in obj) { 42 if (obj.hasOwnProperty(key)) { 43 newObj[key] = obj[key]; 44 } 45 } 46 } 47 return newObj; 48 } 49 }; 50 })();utils
1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 var Utils = app.Utils; 7 // Generic "model" object. You can use whatever 8 // framework you want. For this application it 9 // may not even be worth separating this logic 10 // out, but we do this to demonstrate one way to 11 // separate out parts of your application. 12 app.TodoModel = function (key) { 13 this.key = key; 14 this.todos = Utils.store(key); 15 this.onChanges = []; 16 }; 17 18 app.TodoModel.prototype.subscribe = function (onChange) { 19 this.onChanges.push(onChange); 20 }; 21 22 app.TodoModel.prototype.inform = function () { 23 Utils.store(this.key, this.todos); 24 this.onChanges.forEach(function (cb) { cb(); }); 25 }; 26 27 app.TodoModel.prototype.addTodo = function (title) { 28 this.todos = this.todos.concat({ 29 id: Utils.uuid(), 30 title: title, 31 completed: false 32 }); 33 34 this.inform(); 35 }; 36 37 app.TodoModel.prototype.toggleAll = function (checked) { 38 // Note: it's usually better to use immutable data structures since they're 39 // easier to reason about and React works very well with them. That's why 40 // we use map() and filter() everywhere instead of mutating the array or 41 // todo items themselves. 42 this.todos = this.todos.map(function (todo) { 43 return Utils.extend({}, todo, { completed: checked }); 44 }); 45 46 this.inform(); 47 }; 48 49 app.TodoModel.prototype.toggle = function (todoToToggle) { 50 this.todos = this.todos.map(function (todo) { 51 return todo !== todoToToggle ? 52 todo : 53 Utils.extend({}, todo, { completed: !todo.completed }); 54 }); 55 56 this.inform(); 57 }; 58 59 app.TodoModel.prototype.destroy = function (todo) { 60 this.todos = this.todos.filter(function (candidate) { 61 return candidate !== todo; 62 }); 63 64 this.inform(); 65 }; 66 67 app.TodoModel.prototype.save = function (todoToSave, text) { 68 this.todos = this.todos.map(function (todo) { 69 return todo !== todoToSave ? todo : Utils.extend({}, todo, { title: text }); 70 }); 71 72 this.inform(); 73 }; 74 75 app.TodoModel.prototype.clearCompleted = function () { 76 this.todos = this.todos.filter(function (todo) { 77 return !todo.completed; 78 }); 79 80 this.inform(); 81 }; 82 83 })();
utils为简单的工具类，不予理睬；无论什么时候数据层一定是MVC的重点，这里稍微给予一点关注：
① model层实现了一个简单的事件订阅通知系统
② 从类实现来说，他仅有三个属性，key（存储与localstorage的命名空间），todos（真实的数据对象），changes（事件集合）
③ 与backbone的model不同，backbone的数据操作占了其实现大部分篇幅，backbone的TodoMVC会完整定义Model的增删差改依次触发的事件，所以Model定义结束，程序就有了完整的脉络，而我们看react这里有点“弱化”数据处理的感觉
④ 总的来说，整个Model的方法皆在操作todos数据，subscribe用于注册事件，每次操作皆会通知changes函数响应，并且存储到localstorage，从重构的角度来说inform其实只应该完成通知的工作，存储的事情不应该做，但是这与我们今天所学没有什么管理，不予理睬，接下来我们进入View层的代码。
组件化编程
React号称组件化编程，我们从标签化、声明式编程的角度来一起看看他第一个View TodoItem的实现：
1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 var ESCAPE_KEY = 27; 7 var ENTER_KEY = 13; 8 9 app.TodoItem = React.createClass({ 10 handleSubmit: function (event) { 11 var val = this.state.editText.trim(); 12 if (val) { 13 this.props.onSave(val); 14 this.setState({editText: val}); 15 } else { 16 this.props.onDestroy(); 17 } 18 }, 19 20 handleEdit: function () { 21 this.props.onEdit(); 22 this.setState({editText: this.props.todo.title}); 23 }, 24 25 handleKeyDown: function (event) { 26 if (event.which === ESCAPE_KEY) { 27 this.setState({editText: this.props.todo.title}); 28 this.props.onCancel(event); 29 } else if (event.which === ENTER_KEY) { 30 this.handleSubmit(event); 31 } 32 }, 33 34 handleChange: function (event) { 35 this.setState({editText: event.target.value}); 36 }, 37 38 getInitialState: function () { 39 return {editText: this.props.todo.title}; 40 }, 41 42 /** 43 * This is a completely optional performance enhancement that you can 44 * implement on any React component. If you were to delete this method 45 * the app would still work correctly (and still be very performant!), we 46 * just use it as an example of how little code it takes to get an order 47 * of magnitude performance improvement. 48 */ 49 shouldComponentUpdate: function (nextProps, nextState) { 50 return ( 51 nextProps.todo !== this.props.todo || 52 nextProps.editing !== this.props.editing || 53 nextState.editText !== this.state.editText 54 ); 55 }, 56 57 /** 58 * Safely manipulate the DOM after updating the state when invoking 59 * `this.props.onEdit()` in the `handleEdit` method above. 60 * For more info refer to notes at https://facebook.github.io/react/docs/component-api.html#setstate 61 * and https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate 62 */ 63 componentDidUpdate: function (prevProps) { 64 if (!prevProps.editing && this.props.editing) { 65 var node = React.findDOMNode(this.refs.editField); 66 node.focus(); 67 node.setSelectionRange(node.value.length, node.value.length); 68 } 69 }, 70 71 render: function () { 72 return ( 73 <li className={React.addons.classSet({ 74 completed: this.props.todo.completed, 75 editing: this.props.editing 76 })}> 77 <div className="view"> 78 <input 79 className="toggle" 80 type="checkbox" 81 checked={this.props.todo.completed} 82 onChange={this.props.onToggle} 83 /> 84 <label onDoubleClick={this.handleEdit}> 85 {this.props.todo.title} 86 </label> 87 <button className="destroy" onClick={this.props.onDestroy} /> 88 </div> 89 <input 90 ref="editField" 91 className="edit" 92 value={this.state.editText} 93 onBlur={this.handleSubmit} 94 onChange={this.handleChange} 95 onKeyDown={this.handleKeyDown} 96 /> 97 </li> 98 ); 99 } 100 }); 101 })();TodoItem
根据我们之前的知识，这里是创建了一个自定义标签，而标签返回的内容是：
render: function () { return ( <li className={React.addons.classSet({ completed: this.props.todo.completed, editing: this.props.editing })}> <div className="view"> <input className="toggle" type="checkbox" checked={this.props.todo.completed} onChange={this.props.onToggle} /> <label onDoubleClick={this.handleEdit}> {this.props.todo.title} </label> <button className="destroy" onClick={this.props.onDestroy} /> </div> <input ref="editField" className="edit" value={this.state.editText} onBlur={this.handleSubmit} onChange={this.handleChange} onKeyDown={this.handleKeyDown} /> </li> ); }
要展示这个View需要依赖其属性与状态：
getInitialState: function () { return {editText: this.props.todo.title}; },
这里没有属性的描写，而他本身也仅仅是标签组件，更多的信息我们需要去看调用方，该组件显示的是body部分，TodoMVC还有footer部分的操作工具条，这里的实现便比较简单了：
1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 app.TodoFooter = React.createClass({ 7 render: function () { 8 var activeTodoWord = app.Utils.pluralize(this.props.count, 'item'); 9 var clearButton = null; 10 11 if (this.props.completedCount > 0) { 12 clearButton = ( 13 <button 14 className="clear-completed" 15 onClick={this.props.onClearCompleted}> 16 Clear completed 17 </button> 18 ); 19 } 20 21 // React idiom for shortcutting to `classSet` since it'll be used often 22 var cx = React.addons.classSet; 23 var nowShowing = this.props.nowShowing; 24 return ( 25 <footer className="footer"> 26 <span className="todo-count"> 27 <strong>{this.props.count}</strong> {activeTodoWord} left 28 </span> 29 <ul className="filters"> 30 <li> 31 <a 32 href="#/" 33 className={cx({selected: nowShowing === app.ALL_TODOS})}> 34 All 35 </a> 36 </li> 37 {' '} 38 <li> 39 <a 40 href="#/active" 41 className={cx({selected: nowShowing === app.ACTIVE_TODOS})}> 42 Active 43 </a> 44 </li> 45 {' '} 46 <li> 47 <a 48 href="#/completed" 49 className={cx({selected: nowShowing === app.COMPLETED_TODOS})}> 50 Completed 51 </a> 52 </li> 53 </ul> 54 {clearButton} 55 </footer> 56 ); 57 } 58 }); 59 })();TodoFooter
我们现在将关注点放在其所有标签的调用方，app.jsx（TodoApp），因为我没看见这个TodoMVC的控制器在哪，也就是我没有看见控制逻辑的js文件在哪，所以控制流程的代码只能在这里了：
1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 app.ALL_TODOS = 'all'; 7 app.ACTIVE_TODOS = 'active'; 8 app.COMPLETED_TODOS = 'completed'; 9 var TodoFooter = app.TodoFooter; 10 var TodoItem = app.TodoItem; 11 12 var ENTER_KEY = 13; 13 14 var TodoApp = React.createClass({ 15 getInitialState: function () { 16 return { 17 nowShowing: app.ALL_TODOS, 18 editing: null 19 }; 20 }, 21 22 componentDidMount: function () { 23 var setState = this.setState; 24 var router = Router({ 25 '/': setState.bind(this, {nowShowing: app.ALL_TODOS}), 26 '/active': setState.bind(this, {nowShowing: app.ACTIVE_TODOS}), 27 '/completed': setState.bind(this, {nowShowing: app.COMPLETED_TODOS}) 28 }); 29 router.init('/'); 30 }, 31 32 handleNewTodoKeyDown: function (event) { 33 if (event.keyCode !== ENTER_KEY) { 34 return; 35 } 36 37 event.preventDefault(); 38 39 var val = React.findDOMNode(this.refs.newField).value.trim(); 40 41 if (val) { 42 this.props.model.addTodo(val); 43 React.findDOMNode(this.refs.newField).value = ''; 44 } 45 }, 46 47 toggleAll: function (event) { 48 var checked = event.target.checked; 49 this.props.model.toggleAll(checked); 50 }, 51 52 toggle: function (todoToToggle) { 53 this.props.model.toggle(todoToToggle); 54 }, 55 56 destroy: function (todo) { 57 this.props.model.destroy(todo); 58 }, 59 60 edit: function (todo) { 61 this.setState({editing: todo.id}); 62 }, 63 64 save: function (todoToSave, text) { 65 this.props.model.save(todoToSave, text); 66 this.setState({editing: null}); 67 }, 68 69 cancel: function () { 70 this.setState({editing: null}); 71 }, 72 73 clearCompleted: function () { 74 this.props.model.clearCompleted(); 75 }, 76 77 render: function () { 78 var footer; 79 var main; 80 var todos = this.props.model.todos; 81 82 var shownTodos = todos.filter(function (todo) { 83 switch (this.state.nowShowing) { 84 case app.ACTIVE_TODOS: 85 return !todo.completed; 86 case app.COMPLETED_TODOS: 87 return todo.completed; 88 default: 89 return true; 90 } 91 }, this); 92 93 var todoItems = shownTodos.map(function (todo) { 94 return ( 95 <TodoItem 96 key={todo.id} 97 todo={todo} 98 onToggle={this.toggle.bind(this, todo)} 99 onDestroy={this.destroy.bind(this, todo)} 100 onEdit={this.edit.bind(this, todo)} 101 editing={this.state.editing === todo.id} 102 onSave={this.save.bind(this, todo)} 103 onCancel={this.cancel} 104 /> 105 ); 106 }, this); 107 108 var activeTodoCount = todos.reduce(function (accum, todo) { 109 return todo.completed ? accum : accum + 1; 110 }, 0); 111 112 var completedCount = todos.length - activeTodoCount; 113 114 if (activeTodoCount || completedCount) { 115 footer = 116 <TodoFooter 117 count={activeTodoCount} 118 completedCount={completedCount} 119 nowShowing={this.state.nowShowing} 120 onClearCompleted={this.clearCompleted} 121 />; 122 } 123 124 if (todos.length) { 125 main = ( 126 <section className="main"> 127 <input 128 className="toggle-all" 129 type="checkbox" 130 onChange={this.toggleAll} 131 checked={activeTodoCount === 0} 132 /> 133 <ul className="todo-list"> 134 {todoItems} 135 </ul> 136 </section> 137 ); 138 } 139 140 return ( 141 <div> 142 <header className="header"> 143 <h1>todos</h1> 144 <input 145 ref="newField" 146 className="new-todo" 147 placeholder="What needs to be done?" 148 onKeyDown={this.handleNewTodoKeyDown} 149 autoFocus={true} 150 /> 151 </header> 152 {main} 153 {footer} 154 </div> 155 ); 156 } 157 }); 158 159 var model = new app.TodoModel('react-todos'); 160 161 function render() { 162 React.render( 163 <TodoApp model={model}/>, 164 document.getElementsByClassName('todoapp')[0] 165 ); 166 } 167 168 model.subscribe(render); 169 render(); 170 })();TodoAPP
这里同样是创建了一个标签，然后最后一段代码有所不同：
1 var model = new app.TodoModel('react-todos'); 2 3 function render() { 4 React.render( 5 <TodoApp model={model}/>, 6 document.getElementsByClassName('todoapp')[0] 7 ); 8 } 9 10 model.subscribe(render); 11 render();
① 这里创建了一个Model的实例，我们知道创建的时候，todos便由localstorage获取了数据（如果有的话）
② 这里了定义了一个方法，以todoapp为容器，装载标签
③ 为model订阅render方法，意思是每次model有变化都将重新渲染页面，这里的代码比较关键，按照代码所示，每次数据变化都应该执行render方法，如果list数量比较多的话，每次接重新渲染岂不是浪费性能，但真实使用过程中，可以看到React竟然是局部刷新的，他这个机制非常牛逼啊！
④ 最后执行了render方法，开始了TodoApp标签的渲染，我们这里再将TodoApp的渲染逻辑贴出来
1 render: function () { 2 var footer; 3 var main; 4 var todos = this.props.model.todos; 5 6 var shownTodos = todos.filter(function (todo) { 7 switch (this.state.nowShowing) { 8 case app.ACTIVE_TODOS: 9 return !todo.completed; 10 case app.COMPLETED_TODOS: 11 return todo.completed; 12 default: 13 return true; 14 } 15 }, this); 16 17 var todoItems = shownTodos.map(function (todo) { 18 return ( 19 <TodoItem 20 key={todo.id} 21 todo={todo} 22 onToggle={this.toggle.bind(this, todo)} 23 onDestroy={this.destroy.bind(this, todo)} 24 onEdit={this.edit.bind(this, todo)} 25 editing={this.state.editing === todo.id} 26 onSave={this.save.bind(this, todo)} 27 onCancel={this.cancel} 28 /> 29 ); 30 }, this); 31 32 var activeTodoCount = todos.reduce(function (accum, todo) { 33 return todo.completed ? accum : accum + 1; 34 }, 0); 35 36 var completedCount = todos.length - activeTodoCount; 37 38 if (activeTodoCount || completedCount) { 39 footer = 40 <TodoFooter 41 count={activeTodoCount} 42 completedCount={completedCount} 43 nowShowing={this.state.nowShowing} 44 onClearCompleted={this.clearCompleted} 45 />; 46 } 47 48 if (todos.length) { 49 main = ( 50 <section className="main"> 51 <input 52 className="toggle-all" 53 type="checkbox" 54 onChange={this.toggleAll} 55 checked={activeTodoCount === 0} 56 /> 57 <ul className="todo-list"> 58 {todoItems} 59 </ul> 60 </section> 61 ); 62 } 63 64 return ( 65 <div> 66 <header className="header"> 67 <h1>todos</h1> 68 <input 69 ref="newField" 70 className="new-todo" 71 placeholder="What needs to be done?" 72 onKeyDown={this.handleNewTodoKeyDown} 73 autoFocus={true} 74 /> 75 </header> 76 {main} 77 {footer} 78 </div> 79 ); 80 }
说句实话，这段代码不知为什么有一些令人感到难受......
① 他首先获取了注入的model实例，获取其所需的数据todos，注入点在：
<TodoApp model={model}/>
② 然后他由自身状态机，获取真实要显示的项目，其实这里如果不考虑路由的变化，完全显示即可
1 getInitialState: function () { 2 return { 3 nowShowing: app.ALL_TODOS, 4 editing: null 5 }; 6 },
③ 数据获取成功后，便使用该数据组装为一个个独立的TodoItem标签：
1 var todoItems = shownTodos.map(function (todo) { 2 return ( 3 <TodoItem 4 key={todo.id} 5 todo={todo} 6 onToggle={this.toggle.bind(this, todo)} 7 onDestroy={this.destroy.bind(this, todo)} 8 onEdit={this.edit.bind(this, todo)} 9 editing={this.state.editing === todo.id} 10 onSave={this.save.bind(this, todo)} 11 onCancel={this.cancel} 12 /> 13 ); 14 }, this);
标签具有很多事件，这里要注意一下各个事件这里事件绑定与控制器上绑定有何不同
④ 然后其做了一些工作处理底部工具条或者头部全部选中的工作
⑤ 最后开始渲染整个标签：
1 return ( 2 <div> 3 <header className="header"> 4 <h1>todos</h1> 5 <input 6 ref="newField" 7 className="new-todo" 8 placeholder="What needs to be done?" 9 onKeyDown={this.handleNewTodoKeyDown} 10 autoFocus={true} 11 /> 12 </header> 13 {main} 14 {footer} 15 </div> 16 );
该标签事实上为3个模块组成的了：header部分、body部分、footer部分，模块与模块之间的通信依赖便是model数据了，因为这里最终的渲染皆在app的render处，而render处渲染所有标签全部共同依赖于一个model，就算这里依赖于多个model，只要是统一在render处做展示即可。
流程分析
我们前面理清了整个脉络，接下来我们理一理几个关键脉络：
① 新增
TodoApp为其头部input标签绑定了一个onKeyDown事件，事件代理到了handleNewTodoKeyDown：
1 handleNewTodoKeyDown: function (event) { 2 if (event.keyCode !== ENTER_KEY) { 3 return; 4 } 5 6 event.preventDefault(); 7 8 var val = React.findDOMNode(this.refs.newField).value.trim(); 9 10 if (val) { 11 this.props.model.addTodo(val); 12 React.findDOMNode(this.refs.newField).value = ''; 13 } 14 },
因为用户输入的数据不能由属性或者状态值获取，这里使用了dom操作的方法获取输入数据，这里的钩子是ref，事件触发了model新增一条记录，并且将文本框置为空，现在我们进入model新增的逻辑：
1 app.TodoModel.prototype.addTodo = function (title) { 2 this.todos = this.todos.concat({ 3 id: Utils.uuid(), 4 title: title, 5 completed: false 6 }); 7 8 this.inform(); 9 };
model以最简的方式构造了一个数据对象，改变了todos的值，然后通知model发生了变化，而我们都知道informa程序干了两件事：
1 app.TodoModel.prototype.inform = function () { 2 Utils.store(this.key, this.todos); 3 this.onChanges.forEach(function (cb) { cb(); }); 4 };
存储localstorage、触发订阅model变化的回调，也就是：
1 function render() { 2 React.render( 3 <TodoApp model={model}/>, 4 document.getElementsByClassName('todoapp')[0] 5 ); 6 } 7 8 model.subscribe(render);
于是整个标签可耻的重新渲染了，我们再来看看编辑是怎么回事：
② 编辑
这个编辑便与TodoApp没有什么关系了：
1 <label onDoubleClick={this.handleEdit}> 2 {this.props.todo.title} 3 </label>
当双击标签项时，触发了代理的处理程序：
1 handleEdit: function () { 2 this.props.onEdit(); 3 this.setState({editText: this.props.todo.title}); 4 },
这里他做了两个事情：
onEdit，为父标签注入的方法，他这里执行函数作用域是指向this.props的，所以外层定义时指定了作用域：
1 return ( 2 <TodoItem 3 key={todo.id} 4 todo={todo} 5 onToggle={this.toggle.bind(this, todo)} 6 onDestroy={this.destroy.bind(this, todo)} 7 onEdit={this.edit.bind(this, todo)} 8 editing={this.state.editing === todo.id} 9 onSave={this.save.bind(this, todo)} 10 onCancel={this.cancel} 11 /> 12 );
其次，他改变了自身状态机，而状态机或者属性的变化皆会引起标签重新渲染，然后当触发keydown事件后，完成的逻辑便与上面一致了
思考
经过之前的学习，我们对React有了一个大概的了解，是时候搬出React设计的初衷了：
Just the ui virtual dom data flow 后面两个概念还没强烈的感触，这里仅仅对Just the ui有一些认识，似乎React仅仅提供了MVC中View的实现，但是这个View又强大到可以抛弃C了，可以看到上述代码控制器被无限的弱化了，而我觉得React其实真实想提供的可能是一种开发方式的思路，React便是如何帮你实现这种思路的方案：
模块化编程、组件化编程、标签化编程，可能是React真正想表达的思想 我们在组织负责业务逻辑时，也会分模块、分UI，但是我们一般是采用控制器调用组件的方式使用，React这里不同的一点是使用标签分模块，孰优孰劣要真实开发过生产项目的朋友才能认识，真实的应用路由的功能必不可少，应该有不少插件会主动抱大腿，但使用灵活性仍然得项目实践验证。
react本身很干净，不包括模块加载的机制，真正发布生产前需要通过webpack打包处理，但是对于复杂项目来说，按需加载是必不可少的，这块不知道如何
而我的关注点仍然落在了样式上，之前做组件或者做页面时，有一个优化方案，是将对应的样式作为一个View的依赖项加载，一个View保持最小的html&css&js量加载，而react对样式与动画一块的支持如何，也需要生产验证；复杂的项目开发，Model的设计一定是至关重要的，也许借鉴Backbone Model的实现+React的View处理，会是一个不错的选择
最后，因为现在没有生产项目能让我使用React试水，过多的话基本就是意淫了，根据我之前MVC的使用经验，感觉灵活性上估计React仍然有一段路要走，但是其模块化编程的思路倒是对我的项目有莫大的指导作用，对于这门技术的深入，经过今天的学习，我打算再观望一下，不知道angularJS怎么样，我也许该对这门MVVM的框架展开调研
正文到此结束
- 本文标签： App json 参数 http java struct 装备 管理 CTO 实例 入门教程 ECS ip find Facebook 空间 Select 插件 src node 创业 NSA DOM onchange dist tab tar CSS 时间 Document 组织 build 源码 数据 代码 parse list example 编译 js UI GitHub 解析 value AngularJS 生命 web https map Google HTML key 开发 删除 update git cat API
- 版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
- 本文海报： 生成海报一 生成海报二
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
