一般而言 Component 有以下三种生命周期的状态:
  1. Mounting:已插入真实的 DOM
  2. Updating:正在被重新渲染
  3. Unmounting:已移出真实的 DOM

针对 Component 的生命周期状态 React 也有提供对应的处理方法:

  1. Mounting

    • componentWillMount()
    • componentDidMount()
  2. Updating
    • componentWillReceiveProps(object nextProps):已载入组件收到新的参数时呼叫
    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时呼叫,起始不会呼叫除非呼叫 forceUpdate()
    • componentWillUpdate(object nextProps, object nextState)
    • componentDidUpdate(object prevProps, object prevState)
  3. Unmounting
    • componentWillUnmount()

React Component 生命周期的更多相关文章

  1. 学习React系列(一)——React.Component 生命周期

    挂载中(只执行一次) 以下方法在组件实例正被创建和插入到DOM中时调用 constructor()一般用于初始化state和方法的this绑定 componentWillMount() render( ...

  2. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  3. React的生命周期

    我们先来看一张图,其实看完这张图基本就懂了,如果还不懂,请继续往下看. getDefaultProps 执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组 ...

  4. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  5. React 函数生命周期

      React 函数生命周期基础 1 ,概念 在组件创建.到加载到页面上运行.以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为组件的生命周期:* 2,组件生命周 ...

  6. 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法

    生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...

  7. react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新

    场景:数据新增成功之后,需要返回原来的查询表,这时候的查询,需要使用react的生命周期:componentDidUpdate componentDidUpdate() 这个生命周期的作用是当prop ...

  8. 附实例!图解React的生命周期及执行顺序

    本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...

  9. React之生命周期

    哈喽,这是我的第一篇博客,请大家多多关照~ 追根溯源:What's the lifeCycle? 生命周期函数指在某一时刻组件会自动调用执行的函数: React生命周期概览: 接下来我们就着生命周期的 ...

随机推荐

  1. UVA - 10870 UVA - 10870

    Problem ARecurrencesInput: standard inputOutput: standard output Consider recurrent functions of the ...

  2. codevs1226 倒水问题

    题目描述 Description 有两个无刻度标志的水壶,分别可装 x 升和 y 升 ( x,y 为整数且均不大于 100 )的水.设另有一水 缸,可用来向水壶灌水或接从水壶中倒出的水, 两水壶间,水 ...

  3. Linux下Ubuntu 操作系统 部署

    1.1 先更新系统 环境 更新命令为: apt-get update 1.2 安装jdk 安装JDK命令为:sudo apt-get install o penjdk-7-jdk 1.3 安装tomc ...

  4. logout退出功能是怎么实现的?login登陆功能室怎么实现的

    logout退出功能是怎么实现的?login登陆功能室怎么实现的 login就是登陆成功的时候,在session里面创建好用户对应的数据. logout就是登出的时候,在session里面销毁用户对应 ...

  5. Docker创建PHP镜像

    Step: 1. 创建Dockerfile FROM php:7.0-apache RUN chmod -R 755 /var/www 2. 创建镜像 docker build -t docker_n ...

  6. 服务器Hot Spare热备

    Hot Spare:热备用 当一个正在使用的磁盘发生故障后,一个空闲.加电并待机的磁盘将马上代替此故障盘,此方法就是热备用.热备用磁盘上不存储任何的用户数据,最多可以有8个磁盘作为热备用磁盘.一个热备 ...

  7. HDU 1242 -Rescue (双向BFS)&&( BFS+优先队列)

    题目链接:Rescue 进度落下的太多了,哎╮(╯▽╰)╭,渣渣我总是埋怨进度比别人慢...为什么不试着改变一下捏.... 開始以为是水题,想敲一下练手的,后来发现并非一个简单的搜索题,BFS做肯定出 ...

  8. easyUI中的layout

    Layout 通过$.fn.layout.defaults能够重写Layout. layout是一个具有五个区域的容器.仅仅有中间区域面板是必须的,其余的都是边界面板.每个边界面板都能够通过拖动它的边 ...

  9. dotnet core 文档链接

    The installation was successful The following were installed at C:\Program Files\dotnet • .NET Core ...

  10. AngularJS2.0 quick start——其和typescript结合需要额外依赖

    AngularJS2 发布于2016年9月份,它是基于ES6来开发的. 运行条件! 由于目前各种环境(浏览器或 Node)暂不支持ES6的代码,所以需要一些shim和polyfill(IE需要)让ES ...