React生命周期介绍

发表于 | 更新于 | 阅读次数 1
react各个生命周期的介绍

React 生命周期如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
componentWillMount：1、渲染前调用

render：2、渲染

componentDidMount：3、第一次渲染完调用，此时可获取dom


componentWillReceiveProps：4、接收到一个新的props时调用

shouldComponentUpdate：5、接收props或state时判断是否该update

componentWillUpdate：6、接收到props或state时开始更新

render：7、render

componentDidUpdate：8、组件更新完毕


componentWillUnmount：～移除组件时调用

生命周期实例demo

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
  <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
  <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
    var Button = React.createClass({
      getInitialState: function () {
        return {
          data: 0
        };
      },

      // 自定义事件
      setNewNumber: function () {
        // this.setState({data: this.state.data + 1})
        // this.setState(function (state) {
        //   return {data: state.data + 1}
        // })

        this.setState(function (state) {
          state.data++
        })
      },

      render: function () {
        return (
          <div>
            <button onClick = { this.setNewNumber }>INCREMENT</button>
            <Content myNumber = { this.state.data } />
          </div>
        );
      }
    });

    var Content = React.createClass({
      // 1、渲染前调用
      componentWillMount:function () {
        console.log('Component Will Mount!')
      },

      // 3、第一次渲染完调用，此时可获取dom
      componentDidMount: function () {
        console.log('Component Did Mount!')
      },

      // 4、接收到一个新的props时调用
      componentWillReceiveProps: function () {
        console.log('Component Will Receive Props!')
      },

      // 5、接收props或state时判断是否该update
      shouldComponentUpdate: function (nextProps, nextState) {
        console.log('Should Component Update')
        return true;
      },

      // 6、接收到props或state时开始更新
      componentWillUpdate: function () {
        console.log('Component Will Update!')
      },

      // 7、再次render

      // 8、组件更新完毕
      componentDidUpdate: function () {
        console.log('Component Did Update!')
      },

      // ～移除组件时调用
      componentWillUnmount: function () {
        console.log('Component Will UnMount!')
      },

      // 2、渲染
      render: function () {
        console.log('Render')
        return (
          <div>
            <h3>{this.props.myNumber}</h3>
          </div>
        );
      }

      // 正确的顺序：

      // 1、componentWillMount

      // 2、render

      // 3、componentDidMount

      //

      // 4、componentWillReceiveProps

      // 5、shouldComponentUpdate

      // 6、componentWillUpdate

      // 7、render

      // 8、componentDidUpdate

      //

      // 9、componentWillReceiveProps

      // 10、shouldComponentUpdate

      // 11、componentWillUpdate

      // 12、render

      // 13、componentDidUpdate

      //

      // ～componentWillUnmount

    })

    ReactDOM.render(
      <Button />,
      document.getElementById('example')
    );
  </script>
</body>
</html>