React.js再探（三）
很多时候，组件实例的外观和行为我们通过props进行定制就可以了。因为任何时候，组件实例的表现只跟 传过来的props属性 相关。
我们称这种为 无状态/ stateless 组件
即它自身是 无记忆的
比如切换开关，它可以响应用户的点击事件，如果当前状态是关，那么它就 切换到开的状态（显示开状态的图片）；而如果当前状态是开，那么它就切换到关的 状态（显示关状态的图片）
状态记忆：state
React引入了状态机的概念，让组件具有不同的状态，使得组件具有记忆功能
具体如下：
- state ——组件的状态
每个组件都有一个state变量，保存组件的当前状态。用this.state可以获取到组件的当前状态。
- getInitialState()——设置组件初始状态
开发者应当写一个getInitialState() 方法来设置组件的初始状态。该方法必须返回一个JSON对象或者空值null。
- setState(currentState)——设置当前组件状态
currentState必须是一个JSON对象，但只需要写上需要设置的状态的键值对，不必把所有状态变量都包含。
我们虽然可以对this.state进行赋值来设置当前组件的状态。但是React官方推荐使用setState()，因为用该方法会自动重新渲染组件。当前如果有特殊需求，是可以用this.state的。
具体运用如下面这个开关的例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>EzSwitchComp</title> 6 <script src="lib/react.min.js"></script> 7 <script src="lib/JSXTransformer.js"></script> 8 </head> 9 <body> 10 <div id="content"></div> 11 <script type="text/jsx"> 12 //组件定义 13 var EzSwitchComp = React.createClass({ 14 //设置初始状态 15 getInitialState : function(){ 16 return {on : false}; 17 }, 18 //处理点击事件，切换状态 19 onClick : function(){ 20 //读取并重设状态，这将触发重新渲染 21 this.setState({on : !this.state.on}); 22 }, 23 render : function(){ 24 //根据状态设置样式 25 img = this.state.on ? "img/switch-on.png" : img = "img/switch-off.png"; 26 27 //返回元素 28 return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>; 29 } 30 }); 31 //渲染 32 React.render( 33 <EzSwitchComp/>, 34 document.querySelector("#content")); 35 </script> 36 </body> 37 </html>
我们这里加一个需求，开关只有4次的寿命，即只能切换4次，之后alert出坏了。
下面我们就来实现，首先既然要保存寿命这个变量，让组件有记忆功能，那么就是继续使用state
直接上代码吧
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>EzSwitchComp</title> 6 <script src="lib/react.min.js"></script> 7 <script src="lib/JSXTransformer.js"></script> 8 </head> 9 <body> 10 <div id="content"></div> 11 <script type="text/jsx"> 12 //组件定义 13 var EzSwitchComp = React.createClass({ 14 //设置初始状态 15 getInitialState : function(){ 16 return { 17 on : false, 18 life: 4 19 }; 20 }, 21 //处理点击事件，切换状态 22 onClick : function(){ 23 if(!!this.state.life) 24 //读取并重设状态，这将触发重新渲染 25 this.setState({"on" : !this.state.on,"life": --this.state.life }); 26 else 27 alert('已完'); 28 }, 29 render : function(){ 30 //根据状态设置样式 31 img = this.state.on ? "img/switch-on.png" : img = "img/switch-off.png"; 32 33 //返回元素 34 return <img src = {img} style={{width:"150px"}} onClick={this.onClick}/>; 35 } 36 }); 37 //渲染 38 React.render( 39 <EzSwitchComp/>, 40 document.querySelector("#content")); 41 </script> 42 </body> 43 </html>
这里不小心犯了一个小错误，就是this.setState({"on" : !this.state.on,"life": --this.state.life });
这句话，之前写了是 life:this.state.life-- ,然后发现console出来的this.state.life一直是4，至于这里的错误的原因，相信看官想想就明白了，就不多说了。
生命周期
熟悉WebComponent的同学应该都知道，组件是有生命周期的，在WebComponent中，就有4个生命周期的回调函数。
在React中，生命周期的回调函数分的更细
componentWillMount()——组件实例即将初次渲染时调用，整个周期中只调用1次
componentDidMount()——组件实例初次渲染后调用，只调用1次
componentWillReceiveProps(nextProps)——组件实例即将设置新属性时调用，nextProps表示新属性值。在此方法内调用setState()不会引起重新渲染。（不知道这个有什么特别的用法）
shouldComponentUpdate(nextProps, nextState)——组件实例即将重新渲染时调用。此方法返回false时，组件实例不会被渲染，true则渲染。通过forceUpdate()方法进行重新渲染时，这个方法不会被调用。
componentWillUpdate(nextProps, nextState)——组件实例即将重新渲染时调用。不能在此方法内调用setState()
componentDidUpdate(prevProps, prevState)——组件实例重新渲染后调用
componentWillUnmount()——组件实例即将从DOM树中移除时调用，只调用1次
好了,今天先这样，明天继续.....
