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，看看其是如何实现的

此段参考：阮一峰老师的入门教程，

TodoMVC为MVC框架经典的demo，难度适中，而又可以展示MVC的思想，我们来看看React此处的入口代码：

React • TodoMVC

页面很干净，除了react基本js与其模板解析文件外，还多了一个director.js，因为react本身不提供路由功能，所以路由的工作便需要插件，director便是路由插件，这个不是我们今天学习的重点，然后是两个js文件：

1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 app.Utils = { 7 uuid: function () { i, random; 10 var uuid = ''; (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 } 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 } 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 })();