一般而言 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. [luoguP2701] [USACO5.3]巨大的牛棚Big Barn(DP)

    传送门 经典问题. 找出最大的不包含 1 的正方形. f[i][j] 表示 以 (i,j) 结尾的最大的不包含 1 的正方形 f[i][j] = min(f[i - 1][j], f[i][j - 1 ...

  2. jquery转义字符之单引号

    jquery动态生成html,并且html中包含方法时,如 var varHtml = '<input type="button" value="点我删除" ...

  3. ZOJ 3827 Information Entropy(数学题 牡丹江现场赛)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=5381 Information Theory is one of t ...

  4. 使用Jsoup解析和操作HTML

    jsoup 简单介绍 jsoup 是一款 Java 的HTML 解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套很省力的API,可通过DOM.CSS以及类似于jQuery的操作方法来取 ...

  5. 2014年辛星starphp第一节设置入口文件以及App类

    *********************本节目标**************** 1.首先是我们的框架大致布局,我们即将写成的这个框架.它的入口文件统一为star.php.它须要做的一些事,比方载入 ...

  6. CSS中的BFC解析

    CSS的BFC BFC 即块级格式上下文(Block Formatting Context),它是指一个独立的块级渲染区域,只有block-level的box参与,该区域拥有一套渲染规则来约束块级盒子 ...

  7. C#程序猿学习 Python

    孙广东  2016.1.1 交互: C# 运行Python代码: http://stackoverflow.com/questions/11779143/run-a-python-script-fro ...

  8. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...

  9. Android自定义用户控件简单范例(二)

    对于完全由后台定制的控件,并不是很方便其他人的使用,因为我们常常需要看到控件放到xml界面上的效果,并根据效果进行布局的调整,这就需要一个更加标准的控件制作流程: 我们的自定义控件和其他的控件一样,应 ...

  10. node.js应用Redis初步

    node.js下使用Redis,首先: 1.有一台安装了Redis的服务器,当然,安装在本机也行 2.本机,也就是客户端,要装node.js 3.项目要安装nodejs_redis模块 注意第 3 点 ...