年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1660|回复: 0

[React] 第七讲 React的生命周期

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2017-12-25 22:52:10 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2017-12-25 23:15 编辑

    1、生命周期的三个状态:
    1.1、Mounting:组件挂载,已插入真实DOM
    1.2、Updating:组件更新,正在被重新渲染
    1.3、Unmounting:组件移除,已移出真实DOM

    2、四个阶段,分别是:创建阶段-->实例化阶段-->更新阶段-->销毁阶段

    3、相关方法
    3.1、Mounting/组件挂载相关:
    • componentWillMount
      组件将要挂载,在render之前执行,但仅执行一次!
    • componentDidMount
      组件已经挂载,在render执行之后,同样只执行一次!
    3.2、Updating/组件更新相关:
    • componentWillReveiveProps
      已经加载的组件在接收新(非初始化,而是更新)的属性时调用
    • shouldComponentUpdate
      在接收到新的state或prpos时调用,返回bool值决定下面两个方法是否执行
    • componentWillUpdate
    • componentDidUpdate
    3.3、Unmounting/组件移除相关
    • componentWillUnmount

    4、实例
    4.1、创建阶段
    • getDefaultProps
    • 4.2、实例化阶段
    • getInitialState
    • componentWillMount
    • render
    • componentDidMount
    4.3、更新阶段
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • render
    • componentDidUpdate
    4.4、销毁阶段
    • componentWillUnmount

    5、代码演示
    [JavaScript] 纯文本查看 复制代码
    /**
         * React生命周期
         1、三个状态:
            Mounting:组件挂载,已插入真实DOM
            Updating:组件更新,正在被重新渲染
            Unmounting:组件移除,已移出真实DOM
    
    
         2、四个阶段,分别是:创建阶段-->实例化阶段-->更新阶段-->销毁阶段
    
    
         3、相关方法
            3.1、Mounting/组件挂载相关:
              A>componentWillMount
                组件将要挂载,在render之前执行,但仅执行一次,即使多次重复渲染或改变state也只执行一次
              B>componentDidMount
                组件已经挂载,在render执行之后,同一个组件重复渲染只执行一次
    
            3.2、Updating/组件更新相关:
              A>componentWillReceiveProps
                已加载组件将要接收到新的props之前调用(更新),组件初始化时不会执行!
              B>shouldComponentUpdate
                组件接收到的新的props或state时执行,返回bool值来决定是否更新,并决定下面两个方法是否执行
              C>componentWillUpdate
                组件将要更新
              D>componentDidUpdate
                组件已经完成更新
    
            3.3、Unmounting/组件移除相关方法
              A>componentWillUnmount
                组件将要被移除时调用,用来执行一些必要的清理工作
    
            3.4、生命周期中props与state相关
              A>getDefaultProps 设置Props的默认属性值
              B>getInitialState 设置state的默认属性值
    
    
          4、代码示例
         */
    
         var Demo = React.createClass({
           /**
            * 一、创建阶段
            1、getDefaultProps方法
            */
            getDefaultProps:function(){
              console.log("getDefaultProps");
              return{};
            },
            /**
             * 二、实例化阶段
             1、getInitialState
             2、componentWillMount
             3、render
             4、componentDidMount
             */
             getInitialState:function(){
               console.log("getInitailState");
               return {
                 name : "sian"
               }
             },
             componentWillMount:function(){
               console.log("componentWillMount");
             },
             render:function(){
               console.log("render");
               var text = this.state.name;
               return <p>Hello {text}!</p>;
             },
             componentDidMount:function(){
               console.log("componentDidMount");
             },
             /**
              * 三、更新阶段
              1、componentWillReceiveProps
              2、shouldComponentUpdate
              3、componentWillUpdate
              4、render
              5、componentDidUpdate
              */
              componentWillReceiveProps:function(){
                console.log("componentWillReceiveProps");
              },
              shouldComponentUpdate:function(){
                console.log("shouldComponentUpdate");
                return true;
              },
              componentWillUpdate:function(){
                console.log("componentWillUpdate");
              },
              componentDidUpdate:function(){
                console.log("componentDidUpdate");
              },
              /**
               * 四、销毁阶段
               1、componentWillUnmount
               */
              componentWillUnmount:function(){
                console.log("componentWillUnmount");
              }
         });
         console.log("第一次创建并加载组件");
         ReactDOM.render(
           <Demo />,
           document.getElementById("container")
         );
         console.log("重新渲染组件");
         ReactDOM.render(
           <Demo />,
           document.getElementById("container")
         );
         console.log("销毁组件");
         ReactDOM.unmountComponentAtNode(document.getElementById("container"));

    5.1、控制台输出的结果为:
    [JavaScript] 纯文本查看 复制代码
    getDefaultProps
    第一次创建并加载组件
    getInitailState
    componentWillMount
    render
    componentDidMount
    重新渲染组件
    componentWillReceiveProps
    shouldComponentUpdate
    componentWillUpdate
    render
    componentDidUpdate
    销毁组件
    componentWillUnmount

    6、在线效果演示:http://www.yusian.com/react/lifecycle/index.html
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-28 20:57 , Processed in 0.046060 second(s), 18 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表