React.js再探（三）

时间：2015-06-14 00:27:42 阅读：174 评论：0 收藏：0 [点我收藏+]

标签：

很多时候，组件实例的外观和行为我们通过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次

好了,今天先这样，明天继续.....

React.js再探（三）

标签：

原文地址：http://www.cnblogs.com/galenyip/p/4574400.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行