你的位置:首页 > Java教程

[Java教程]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: 419         };20       },21       //处理点击事件,切换状态22       onClick : function(){23         if(!!this.state.life)24           //读取并重设状态,这将触发重新渲染25           this.setState({"on" : !this.state.on,"life": --this.state.life });26         else27           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次
 
 
 
好了,今天先这样,明天继续.....