zoukankan      html  css  js  c++  java
  • React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期。

    注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周期之间的调用,mixins混合则玩不来

     先从初始化执行开始:

    挂载生命周期:

      官方提供了componentWillMount,和componentDidMount

      componentWillMount:

         使用于render渲染组件之前调用,比如当前组件内部值需要发生逻辑上的变化,就可以在此做操作,这样的好处是不用再次render渲染组件。

      componentDidMount:

        使用于render渲染组件之后调用,比如ajax

    var ReactWeek = React.createClass({
        getInitialState:function(){
            return console.log("getInitialState");
        },
        getDefaultProps:function(){
            return console.log("getDefaultProps");
        },
        componentWillMount:function(){
            console.log("componentWillMount");
        },
        componentDidMount:function(){
            console.log("componentDidMount");
        },
        render:function(){
          return(
            <i></i>
          )
        }
    });
    
    
    React.render(<ReactWeek  />,document.body);

    这里添加了设置默认值getDefaultProps和初始化设置的getInitialState,运行一下看看它们之间的运行顺序。结果如下

     

  • 相关阅读:
    锚的应用
    有关于MP3音频文件的编码解码资料吗
    自定义web.config配置节 (转)
    HTC 文件
    Asp.Net音频文件上传和播放
    dotnet下用c#编写下载器
    自动滚屏代码
    agsXMPP分析:agsXMPP Namespace
    Socket网络编程学习笔记(1)
    (♂)程序打包工具setup2go使用教程
  • 原文地址:https://www.cnblogs.com/kuailingmin/p/4612337.html
Copyright © 2011-2022 走看看