蓝鸥React Native零基础入门到项目实战组件的生命周期

蓝鸥ReactNative

于 2016-12-29 09:29:25 发布

阅读量723

点赞数

文章标签： React Native 础入门到项目实战 HTML5学习路线图蓝鸥HTML5 蓝鸥零基础学习HTML5路线图

本文链接：https://blog.csdn.net/lanouyihuiyun/article/details/53924193

版权

蓝鸥React Native零基础入门到项目实战 Hello React

http://edu.csdn.NET/course/detail/3129

组件的生命周期

<!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>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/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 的时候 会立即调用，然后通过返回值（Boolean）来决定是否要重新渲染当前的组件
        （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，后三个方法不执行
            componentWillUpdate
            render
            componentDidUpdate
       */
      componentWillReceiveProps: function() {
        console.log("componentWillReceiveProps");
      },
      shouldComponentUpdate: function() {
        // 是否需要更新
        console.log("shouldComponentUpdate");
        return false;
      },
      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.getElementById("container"));


  </script>