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. spyder中让生成的图像单独在窗口中显示

    IPython 支持两种形式的绘图 终端输出图像新窗口输出图像方式 1 能够非常方便的保存输出记录(如将`IPython 终端输出转换成 Html 文件) 方式 2 则可以交互式的放大.拖动图片,并且 ...

  2. css选择器权重问题

    important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0

  3. 如何调用别人提供的webservice接口

    当我们拿到一个接口的时候,先别急着去调用它,我们得先测试这个接口是否正确,是否能调用成功,以及返回的数据是否是我们需要的类型等等.这时候我们需要一个工具,比如SoapUI.(最好用绿色免安装版的.)然 ...

  4. js实现按钮开关.单机下拉菜单

    通过onclick单击事件,实现效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  5. Django--filter()-字段查找(双下划线的使用详解)

    Django--filter()-字段查找(双下划线的使用详解) 在了解django中的字段查找的同时,让我们先熟悉一下比较符: 大于--gt-(greater than) 小于--lt-(less ...

  6. MOS管应用概述(四):基本参数

    mos管的基本参数,大家熟悉的必然是Ids电流,Ron导通电阻,Vgs的阈值电压,Cgs.Cgd.Cds这几项,然而在高速应用中,开关速度这个指标比较重要.<ignore_js_op> 上 ...

  7. git撤销merging

    $ git pull origin test // git pull合并代码的时候,若发生冲突,会处于merging状态,检查代码,发现自己的分支低于主分支,这个时候想撤销merge // 撤销mer ...

  8. 【leetcode198 解题思路】动态规划

    动态规划 https://blog.csdn.net/so_geili/article/details/53639920 最长公共子序列 https://blog.csdn.net/so_geili/ ...

  9. Flutter错误集合

    一.Waiting for another flutter command to release the startup lock... 运行flutter命令 flutter upgrade 运行 ...

  10. python+appium 自动化2--元素定位uiautomatorviewer

    出处:https://www.cnblogs.com/yoyoketang/p/6128741.html 前言: 可以打开手机上的app了,下一步元素定位uiautomatorviewer,通过定位到 ...