③ 与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'; 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 }, * 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. 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 }, * 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 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 })();

根据我们之前的知识，这里是创建了一个自定义标签，而标签返回的内容是：