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. webclient上传数据到ashx服务

    1.上传参数 UploadData()方法可以上传数据参数,需要将所要上传的数据拼成字符. // 创建一个新的 WebClient 实例.    WebClient myWebClient = new ...

  2. 电脑小白和ta的小白电脑——MySQL的简单使用

    数据库的基本操作:增删改查 分别使用cmd环境和Navicat可视化工具连接MySQL数据库来实现 这里默认了已经安装和配置MySQL↓ https://www.cnblogs.com/gifted3 ...

  3. 【基于微信小程序的社区电商平台】第一次迭代心得(非正式版本

    一.迭代任务 团队在第八周确认迭代计划时,是想要在第一阶段实现电商小程序的核心功能,就是买和卖,也是前端和后台数据交换的核心模块.涉及到首页浏览商品信息,查看商品详情及评论,选择加入购物车.关注卖家以 ...

  4. 【Appium】Appium工作原理(2)

    Appium原理 面试的时候,被问到appium原理,一点不会,实在尴尬. 大家可以直接翻看原作https://blog.csdn.net/jffhy2017/article/details/6922 ...

  5. TP自动提取关键词

    protected function _before_insert(&$data, $option) {        $data['create_time'] = time();       ...

  6. IIS10安装IIS URL重写模块2伪静态组件提示需要IIS7.0以上版本。

    解决方法: 打开注册表 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\InetStp 双击右边MajorVersion,默认的数值是a,修改成9,然后再安装 ,安装完成后 ...

  7. [工控安全]“祝融”—一种针对PLC控制系统的欺骗攻击病毒

    “祝融”作为一种针对传统PLC控制系统的欺骗攻击病毒,所述的典型的PLC控制系统通常包括两部分: 用于组态.编程.监视.控制的工程师站(通常是PC设备) PLC控制器(通常如西门子.施耐德.三菱等厂家 ...

  8. css实现标题左右横线

    最近用到了记录一下 页面 <div class="subtitle"> 马上邀请好友得奖励 </div> 样式 .subtitle { position: ...

  9. 判断浏览器大于等于ie9

    方便自己查找 <script> (function (window) { var theUA = window.navigator.userAgent.toLowerCase(); if ...

  10. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...