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. Haxe东游记(上)part1.5:roadmap

    part1.6 = 常用API参考 1.5.7 -> 官方手册目录/总结/中文化 1.8 -> 官方示例/讲解/总结 1.5.6-> haxe整体结构/解析/综述 part2 = 中 ...

  2. golang开源项目qor快速搭建网站qor-example运行实践

    最近想找几个基于Go语言开发的简单的开源项目学习下,分享给大家,github上有心人的收集的awesome-go项目集锦:github地址 发现一个Qor项目: Qor 是基于 Golang 开发的的 ...

  3. .net core WebApi ManualResetEvent实现并发同步

    ManualResetEvent,即手动重置事件,通过信号量来判别当前线程是否应该阻塞或继续执行.使用方式与ManualResetEventSlim差不多,ManualResetEventSlim只是 ...

  4. 北航OO第二单元总结

    电梯调度的设计策略 第一次作业是单部多线程傻瓜电梯 这次作业的电梯名副其实是一部傻瓜电梯,每次只能运一个人.出于线程安全的考虑,选择了阻塞队列.然后按照先来先服务的原则服务下一个指令.没有什么复杂的设 ...

  5. d3js可视化策略

    d3js是数据驱动图形的思路.基本可以这么理解,有什么样的图形,后面基本就有类似结构的数据.大概思路步骤如下: 一.适配数据格式 这一步主要是为第二部服务,第一步的结果作为第二部的入参. 比如,画层级 ...

  6. Thread类中start()方法喝run()方法有什么不同?

    答:当调用start()方法时会启动一个新创建的线程,然后在start()内部调用run()方法.这和直接调用run()方法不同.直接调用run()方法只是在原来的线程中调用,没有创建新的线程.只有调 ...

  7. 今天捡起来python

    时隔多少,我还是要学习,之前懒,结果有些就忘了,用笨方法学Python,码代码夹理解运行改正也就20多分钟,主要是加分习题,你一扩展就要思考的时间长了所以大概要留出1个小时来做他,好了该复习前面的了

  8. Linux的.pid文件

    PID全称是Process Identification. PID是进程的代号,每个进程有唯一的PID编号.它是进程运行时系统随机分配的,并不代表专门的进程.在运行时PID是不会改变标识符的,但是你终 ...

  9. windows下安装memcached,报错:Failed to ignore SIGHUP RESULT too large

    小平板不想装虚拟机, 但是却跑不起memcached 网上虽有解决方案,但都只有一条命令, 没有出处. 翻了半天, 找到这个连接 https://commaster.net/content/insta ...

  10. 未能加载文件或程序集“BLL”或它的某一个依赖项。生成此程序集的运行时比当前加载的运行时新,无法加载此程序集。

    今天使用VS2012创建项目的时候,考虑到项目中代码的重用性以及清晰简洁性,搭建了一个三层架构,但是在项目运行的时候,总是报错: “未能加载文件或程序集“BLL”或它的某一个依赖项.生成此程序集的运行 ...