React - 组件的生命周期详解（及各阶段调用的方法）

  • Z时代
  • 2024-01-10
  • 分类：综合

react

转自http://www.hangge.com/blog/cache/detail_1473.html

React - 组件的生命周期详解（及各阶段调用的方法）

2016-12-22发布：hangge阅读：2699

ReactJS 的核心思想是组件化，即按功能封装成一个一个的组件，各个组件维护自己的状态和 UI，当状态发生变化时，会自定重新渲染整个组件，多个组件一起协作共同构成了 ReactJS 应用。

为了能够更好的创建和使用组件，我们首先要了解组件的生命周期。

一、组件的生命周期

组件在整个 ReactJS 的生命周期中，主要会经历这4个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段。下面对各个阶段分别进行介绍。

1，创建阶段

  • 该阶段主要发生在创建组件类的时候，即调用 React.createClass 时触发。

  • 这个阶段只会触发一个 getDefaultProps 方法，该方法返回一个对象并缓存起来。然后与父组件指定的 props 对象合并，最后赋值给 this.props 作为该组件的默认属性。

props属性介绍：

1，props 是一个对象，是组件用来接收外面传来的参数的。

2，组件内部是不允许修改自己的 props 属性，只能通过父组件来修改。上面的 getDefaultProps 方法便是处理 props 的默认值的。

2，实例化阶段

该阶段主要发生在实例化组件类的时候，也就是该组件类被调用的时候触发。这个阶段会触发一系列的流程，按执行顺序如下：

（1）getInitialState：初始化组件的 state 的值。其返回值会赋值给组件的 this.state 属性。

（2）componentWillMount：根据业务逻辑来对 state 进行相应的操作。

（3）render：根据 state 的值，生成页面需要的虚拟 DOM 结构，并返回该结构。

（4）componentDidMount：对根据虚拟 DOM 结构而生的真实 DOM 进行相应的处理。组件内部可以通过 ReactDOM.findDOMNode(this) 来获取当前组件的节点，然后就可以像 Web 开发中那样操作里面的 DOM 元素了。

state属性介绍：

它是用来存储组件自身需要的数据。它是可以改变的，它的每次改变都会引发组件的更新。这也是 ReactJS 中的关键点之一。

即每次数据的更新都是通过修改 state 属性的值，然后 ReactJS 内部会监听 state 属性的变化，一旦发生变化，就会触发组件的 render 方法来更新 DOM 结构。

3，更新阶段

这主要发生在用户操作之后或者父组件有更新的时候，此时会根据用户的操作行为进行相应得页面结构的调整。这个阶段也会触发一系列的流程，按执行顺序如下：

（1）componentWillReceiveProps：当组件接收到新的 props 时，会触发该函数。在改函数中，通常可以调用 this.setState 方法来完成对 state 的修改。

（2）shouldComponentUpdate：该方法用来拦截新的 props 或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定。

（3）componentWillUpdate：当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作。

（4）render：根据一系列的 diff 算法，生成需要更新的虚拟 DOM 数据。（注意：在 render 中最好只做数据和模板的组合，不应进行 state 等逻辑的修改，这样组件结构更加清晰）

（5）componentDidUpdate：该方法在组件的更新已经同步到 DOM 中去后触发，我们常在该方法中做一 DOM 操作。

4，销毁阶段

  • 这个阶段只会触发一个叫 componentWillUnmount 的方法。

  • 当组件需要从 DOM 中移除的时候，我们通常会做一些取消事件绑定、移除虚拟 DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。这些事情都可以在这个方法中处理。

二、完整的样例

下面通过一个简单的欢迎信息组件，来演示组件各个环节的运作流程。同时这里把组件整个生命周期中所有会触发的方法都列出来了。

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

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>hangge</title>

    <script type="text/javascript" src="react.js"></script>

    <script type="text/javascript" src="react-dom.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

</head>

<body>

  <div id="example"></div>

  <script type="text/babel">

      var Welcome = React.createClass({

          /* 1.创建阶段 */

          //在创建类的时候被调用

          getDefaultProps: function() {

              console.log("getDefaultProps");

              return {};

          },

          /* 2.实例化阶段 */

          //获取this.state的默认值

          getInitialState: function() {

              console.log("getInitialState");

              return {name: "hangge.com"};

          },

          //组件将要加载，在render之前调用此方法

          componentWillMount: function() {

              //业务逻辑的处理都应该放在这里，比如对state的操作等

              console.log("componentWillMount");

          },

          //渲染并返回一个虚拟DOM

          render: function() {

              console.log("render");

              return (

                      <div>欢迎访问: {this.state.name}</div>

              );

          },

          //组件完成加载，在render之后调用此方法

          componentDidMount: function() {

              //在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构

              console.log("componentDidMount");

              var node = ReactDOM.findDOMNode(this);

              console.log(node);

          },

          /* 3.更新阶段 */

          //该方法发生在this.props被修改或父组件调用setProps()方法之后

          componentWillReceiveProps: function() {

              console.log("componentWillRecieveProps");

          },

          //是否需要更新

          shouldComponentUpdate: function() {

              console.log("shouldComponentUpdate");

              return true;

          },

          //将要更新

          componentWillUpdate: function() {

              console.log("componentWillUpdate");

          },

          //更新完毕

          componentDidUpdate: function() {

              console.log("componentDidUpdate");

          },

          /* 4.销毁阶段 */

          //销毁时会被调用

          componentWillUnmount: function() {

              console.log("componentWillUnmount");

          },

      });

      ReactDOM.render(<Welcome />, document.getElementById('example'));

  </script>

</body>

</html>

控制台输出信息如下(由于样例中我没有更新状态，也没有销毁组件。所以也就没有后面两个阶段）：


原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1473.html

以上是 React - 组件的生命周期详解（及各阶段调用的方法） 的全部内容， 来源链接： utcz.com/z/383694.html

回到顶部