React中组件的生命周期

最新推荐文章于 2022-04-15 00:07:06 发布

a821814989

最新推荐文章于 2022-04-15 00:07:06 发布

阅读量339

点赞数

分类专栏： React Native学习笔记文章标签： dom React组生命周期

本文链接：https://blog.csdn.net/a821814989/article/details/53812609

版权

React Native学习笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、先创建项目编写代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!--react.js是React的核心库-->
    <script src="./build/react.js" charset="utf-8"></script>
    <!--react-dom.js的作用是提供与DOM相关的功能-->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!--browser.min.js的作用是JSX语法转换成JavaScript语法-->
    <script src="./build/browser.min.js" charset="utf-8"></script>
  </head>
  <body>
    <!--React渲染的模板内容会插入到这个DOM节点中，也可以理解为一个容器-->
    <div id="container">

    </div>
  </body>
  <!--在React开发中，使用JSX,跟JavaScript不兼容，所以在使用JSX的地方需要设置type="text/babel"-->
  <!--babel是一个转换编译器，可以将ES6转成可以在浏览器中运行的代码-->
  <script type="text/babel">

  //在此处编写React代码
  /**
    生命周期介绍：

    1、组件的生命周期一般可以分为三个状态：
        Mounting:组件挂载，组件渲染完成了，已插入真实DOM
        Updating:组件更新，正在被重新渲染
        Unmounting: 组件移出，已移出真实DOM

    2、组件的生命周期可以分为四个阶段：
       创建、实例化、更新、销毁

    3、举例：网易新闻列表页面，
  **/

  /**
    1、Mounting/组件挂载相关：
      (1) componentWillMount
         组件将要挂载。在render之前执行，但仅执行一次，即使多次重复渲染该组件，或者改变了组件的state
      (2)componentDidMount
         组件已经挂载，在render之后执行，同一个组件重复渲染只执行一次

    2、Updating/组件更新相关：
      (1)componentWillReceiveProps(object nextProps)
         已加载组件收到新的props之前调用，注意组件初始化渲染时则不会执行
      (2)shouldComponentUpdate(object nextProps,object nextState)
         组件判断是否重新渲染时调用。该接口实际是在组件接收到了新的props或者新的state的时候会立即调用
         ，然后通过
      (3)componentWillUpdate(object nextProps,object nextState)
         组件将要更新
      (4)componentDidUpdate(object prevProps,object prevState)
         组件已经更新

    3、Unmounting/组件移除相关：
      (1)componentWillUnmount
         在组件要被移除之前的时间点触发，可以利用该方法来执行一些必要的清理组件将要移除

    4、生命周期中与props和state相关：
      (1)getDefaultProps 设置props属性默认值
      (2)getInitialState 升值state属性初始值
  **/

  /**
    生命周期各个阶段介绍
  **/

    var Demo=React.createClass({
      /**
        一、创建阶段
        流程：
           只调用getDefaultProps方法
      **/
      getDefaultProps:function(){
        //在创建类的时候被调用，设置this.props的默认值
        console.log("getDefaultProps");
        return {};
      },

      /***
        二、实例化阶段
        流程：
            getInitialState
            componentWillMount
            render
            componentDidMount
      **/
      getInitialState:function(){
        //设置this.state的默认值
        console.log("getInitialState");
        return null;
      },
      componentWillMount:function(){
        //在render之前调用
        console.log("componentWillMount");
      },
      render:function(){
        //渲染并返回一个虚拟DOM
        console.log("render");
        return<div>Hello React</div>
      },
      componentDidMount:function(){
        //在render之后调用
        //在该方法中，React会使用render方法返回的虚拟DOM对象去创建真实的DOM结构，
        //可以在这个方法中读取DOM节点
        console.log("componentDidMount");
      },

      /**
        三、更新阶段
        流程:
          componentWillReceiveProps
          shouldComponentUpdate  如果返回值是false，后三个方法不执行
          componentDidUpdate
          render
          componentDidUpdate
      **/
      componentWillReceiveProps:function(){
        //
        console.log("componentWillReceiveProps");
      },
      shouldComponentUpdate:function(){
        //是否需要更新
        console.log("shouldComponentUpdate");
        return true;
      },
      componentWillUpdate:function(){
        console.log("componentWillUpdate");
      },
      componentDidUpdate:function(){
        console.log("componentDidUpdate");
      },

      /**
        四、销毁阶段
        流程：
          componentWillUnmount
      **/
      componentWillUnmount:function(){
        console.log("componentWillUnmount");
      }
    });

    //第一次创建并加载组件
    ReactDOM.render(
      <Demo />,
      document.getElementById("container")
    );

    //重新渲染组件
    ReactDOM.render(
      <Demo />,
      document.getElementById("container")
    );

    //移除组件
    // ReactDOM.unmountComponentAtNode(document.getElementsByClassName("container"));
  </script>
</html>