react入门笔记（三）demo实例学习

发表于   |   分类于   |     |   阅读次数

本文的实例demo主要涉及到 state状态机，组件的生命周期

react官网地址：React: A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

本文中的代码 github 地址：demo实例

demo的html模板

本文中所有的 demo ，都采用以下这个 html 模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>react demo</title>
  <script src="../build/react.min.js"></script>
  <script src="../build/react-dom.min.js"></script>
  <script src="../build/browser.min.js"></script>
  <script src="index.js" type="text/babel"></script>  <!--引入的jsx文件-->
</head>
<body>
<div id="jc"></div>
<!-- <script type="text/babel">
  //jsx代码
</script> -->
</body>
</html>

demo6: state状态机

React 将组件划分为不同的状态，每个React组件实例都有一个state变量，用来保存组件的当前状态。
state: 组件的状态变量；
getInitialState(): 设置组件初始状态，必须返回一个JSON对象或空值null；
setState(currentState): 设置组件当前状态，参数currentState是一个JSON对象；setState()方法会 将这个参数值与当前状态this.sate进行合并，结果作为状态变量的新值；不建议直接使用this.state来设置状态，setState()方法会自动 地重新渲染组件。

接下的demo实例，主要是设置初始化背景色、点击改变state状态进而改变背景色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var MyState = React.createClass({
   getInitialState:function(){
     return {colors: 'green'};
   },
   colorClick: function(){
     this.setState({colors: !this.state.colors});
   },
   render: function(){
     var color = this.state.colors ? 'green' : 'red';
     return(
       <div>
         <a onClick={this.colorClick} href='javascript:;'>点击切换背景颜色</a>
         <div style={{backgroundColor:color}}>div的背景颜色</div>
       </div>
     );
   }
 });
 ReactDOM.render(
   <MyState/>,
   document.getElementById('jc')
 );

demo7: 组件的生命周期

组件实例的这个生命周期中，React 会在特定的时间点调用以下方法，触发的顺序如下表：

First Render Props Change State Change Unmount
getDefaultProps componentWillReceiveProps - componentWillUnmount
getInitialState shouldComponentUpdate shouldComponentUpdate -
componentWillMount componentWillUpdate componentWillUpdate -
render render render -
componentDidMount componentDidUpdate componentDidUpdate -

其中：
componentWillMount()：即将第一次render时候被调用，在整个生命周期中只会被调用一次（初次渲染）。
componentDidMount：已经第一次render时候被调用，在整个生命周期中只会被调用一次（初次渲染）。
componentWillReceiveProps(nextProps) ：组件实例即将设置新属性时被调用，nextProps新属性值。
shouldComponentUpdate(nextProps, nextState)：组件实例即将重新渲染时被调用，但在初次渲染时或通过forceUpdate()方法进行渲染时不会被调用。
componentWillUpdate(nextProps, nextState) ：组件实例即将重新渲染时被调用，不能在此方法内调用 setState()。
componentDidUpdate(prevProps, prevState)：组件实例重新渲染后被调用。
componentWillUnmount()： 组件实例即将从DOM树移除时被调用
这个方法在整个生命周期中只会被调用一次。
……
详尽的说明，请关注官网：组件的详细说明和生命周期

实例demo：通过设置定时器，触发组件被重复render，查看具体方法在不同时间点的调用情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//组件的生命周期
var MyMount = React.createClass({
    getInitialState: function(){
        return {
            width:20,
            backbg:'green'
        };
    },
    componentWillMount: function(){
        this.setState({
            backbg:'red'
        });
        // alert('componentWillMount');
    },
    componentDidMount: function(){
        var timer1 = setInterval(function(){
            var width = this.state.width;
            width += 10;
            if(width >= 120){
                width = 10;
            }
            this.setState({
                width: width,
                backbg:'green'
            });
        }.bind(this),200);
    },
    render:function(){
        return (
            <div style={{height:'40px',width:this.state.width+'px',background:this.state.backbg}}></div>
        );
    }
});
ReactDOM.render(
    <MyMount/>,
    document.getElementById('jc')
);

更多学习demo，待续…

本文中的代码 github 地址：demo实例