React Lifecycle 分为三种:

  1. 初始化阶段
  2. 状态的更新
  3. 销毁

实例化:

ReactDom.render 用于将模板转换成HTML语言,并插入DOM节点。

1.getDefaultProps || Component.defaultProps  这个方法是用来设置组件默认的props,组件生命周期只会调用一次

2.getInitialState || this.state 设置state初始值,在这个方法中你可以访问到this.props

3.componentWillMount  在组件首次渲染之前调用,这个是render方法调用前最后一次修改state的机会。很少用到。

4.render JSX通过这里,解析成对应的虚拟DOM,渲染成最终结果。

5.componentDidMount 这个方法在首次真实的DOM渲染后调用,当我们需要访问真实的DOM时候,或者当我们请求外部数据接口的时候,一般在这里处理。

存在期:

实例化后,当props或者state发生改变时,下面方法会依次调用

1 componentWillReceiveProps 当我们通过组件更新子组件props时,这个方法就会调用

  componentWillReceiveProps(nextProps){}

2 shouldComponentUpdate 是否应该更新组件,默认返回True,当返回false时,后期函数就不会调用,组件不会再次渲染。

  shouldComponentUpdate(nextProps,nextState){}

3 componentWillUpdate  组件将会被更新,props和state改变后必调用。

4 render

5 componentDidUpdate 这个方法在更新真实的DOM成功后调用,当我们访问真实的DOM时,这个方法就会经常用到。

销毁期:

componentWillUnMount 每当组件使用完成,这个组件就必须从DOM中销毁,此时该方法就会被调用。当我们在组件中使用了setInterval,那我们就需要在这个方法中调用clearInterval.

React Lifecycle的更多相关文章

  1. React LifeCycle API

    React LifeCycle API old API & new API 不可以混用 demo https://codesandbox.io/s/react-parent-child-lif ...

  2. React LifeCycle Methods & re-learning 2019

    React LifeCycle Methods & re-learning 2019 v16.9.0 https://reactjs.org/docs/react-component.html ...

  3. a dive in react lifecycle

    背景:我在react文档里找生命周期的图,居然没有,不敢相信我是在推特上找到的... 正文 react v16.3 新生命周期: static getDerivedStateFromProps get ...

  4. 一图解析 React组件生命周期 (React Component Lifecycle)

     React LifeCycle v1 参考官方文档作成 可放大  参考:https://reactjs.org/docs/react-component.html 数字补丁数字补丁数字补丁数字补丁数 ...

  5. React (Native) Rendering Lifecycle

    How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...

  6. react与jQuery对比,有空的时候再翻译一下

    参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...

  7. 21个React开发神器

    摘要: React开发神器. 原文:22 Miraculous Tools for React Developers in 2019 译者:前端小智 下列工具中的重要性与排序无关. 1.Webpack ...

  8. React Virtual DOM Explained in Simple English

    If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is ...

  9. react起步——从零开始编写react项目

    # index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

随机推荐

  1. lr添加md5方法,字符编码转换,urlcode编码化

    1.使得写lr脚本时可调用md5方法,需要进行以下操作: 1)将md5.h文件加载到Extra Files下: 2)在globals.h文件中添加  #include“md5.h” 3).打开md5文 ...

  2. 第7天:Q Quant库(未完待续)

    一.本文大纲: 1.Python内置函数计算期权的价格 2.numpy加速数值计算 3.SciPy进行仿真模拟 4.SciPy求解器计算隐含波动率 5.matplotlib绘图 二.案例 (看不懂,略 ...

  3. 小白的python之路11/3总结

    ln-s 指定源是谁 l是软连接,其中源文件相当于快捷方式 1.打包 归档命令 tar -cvzf test.tar a.txt b.txt c.txt其中c是创建,v是详细信息,f是打包后文件名,a ...

  4. FORTH 虚拟机内部结构

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  5. cocoapods 换源

    1. 用以下步骤换源: pod repo remove master pod repo add master https://code.aliyun.com/Magi/CocoaPods.git po ...

  6. Exploit-Exercises nebule 旅行日志(二)

    接着上次的路程继续在ubuntu下对漏洞的探索练习,这次是level01了 先看下level01的问题描述: 目标还是要能运行getflag这个可执行的程序,但如果直接运行是不行的,会提示: getf ...

  7. docker学习端口连接docker容器---第四章节

    一.Docker容器连接 前面的第二章节,我们事先通过网络端口来访问运行在docker容器内的服务,我们也可以通过端口连接到一个docker容器 我们可以指定容器绑定的网络地址,如绑定127.0.0. ...

  8. nmon的安装使用

    一.下载Nmon 根据CPU的类型选择下载相应的版本: http://nmon.sourceforge.net/pmwiki.php?n=Site.Download http://sourceforg ...

  9. Protege4.3 添加Rules 栏

    SWRL rules can be edited in Protégé 4, but not with a nice interface like in Protégé 3. If you go to ...

  10. oracle 优化方法总结

    分析和优化的基本步骤如下: 1.如果是SQL语句的写法问题,我们可以通过在不更改业务逻辑的情况下改写SQL来加以解决: 2.如果是不必要的全表扫描/排序而导致了目标SQL的性能问题,我们可以通过建立合 ...