React的组件在第一次挂在的时候首先获取父组件传递的props,接着获取初始的state值,接着经历挂载阶段的三个生命周期函数,也就是ComponentWillMount,render,ComponentDidMount,这三个函数分别代表组件将会挂载,组件渲染,组件挂载完毕三个阶段,在组件挂载完成后,组件的props和state的任意改变都会导致组建进入更新状态,在组件更新阶段,如果是props改变,则进入ComponentWillReceiveProps函数,接着进入ComponentShouldUpdate进行判断是否需要更新,如果是state改变则直接进入ComponentShouldUpdate判定,这个默认是true,当判定不需要更新的话,组件继续运行,需要更新的话则依次进入ComponentWillMount,render,ComponentDidMount三个函数,当组件卸载时,会首先进入生命周期函数ComponentWillUnmount,之后才进行卸载,如图
 
 
 

React的生命周期函数:

初始化阶段:getDefaultProps获取实例的默认属性,getInitialState获取每个实例的初始化状态,ComponentWillMount:组件将被装载,渲染到页面上,render:组件在这里生成虚拟的DOM节点,ComponentDidMount:组件真正被装载之后

运行中状态: componentWillReceiveProps:组件将要接收到属性的时候调用 shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能,如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。 componentWillUpdate:组件即将更新不能修改属性和状态 render:组件重新描绘 componentDidUpdate:组件已经更新 销毁阶段: componentWillUnmount:组件即将销毁

react生命周期和组件生命周期的更多相关文章

  1. 微信小程序生命周期、页面生命周期、组件生命周期

    1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...

  2. React(四)组件生命周期

    组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...

  3. [React] 多组件生命周期转换关系

    前段时间一直在基于React做开发,最近得空做一些总结,防止以后踩坑. 言归正传,React生命周期是React组件运行的基础,本文主要是归纳多组件平行.嵌套时,生命周期转换关系. 生命周期 Reac ...

  4. 深入React组件生命周期

    上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...

  5. 3. React 组件生命周期介绍

            React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期.组件的生命周期为]); return; } this.setState({name: event.target ...

  6. React Native 学习-组件说明和生命周期

    组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...

  7. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  8. React组件生命周期小结

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

  9. react学习(6)——关于组件生命周期的问题

    在项目开发的过程中,遇到了一个问题: 父组件请求后台数据,收到后将数据以props传给子组件,子组件根据收到数据的不同,显示不同的内容,同时,子组件自身可以根据click操作改变根据父组件的数据显示的 ...

随机推荐

  1. dvi文件和将dvi文件转换成pdf格式

    dvi文件和将dvi文件转换成pdf格式 Latex只能把tex文件编译成dvi文件, 在cmd 中: 使用xdvi查看dvi格式的文件 若用texstudio编辑tex文件,则可直接将已编译成功的. ...

  2. 在python项目中导出项目依赖的模块信息

    1.安装pipreqs pip install pipreqs 2.导出requriements.txt文件 在windows中,终端切换到项目所在的文件夹下: 运行: pipreqs ./ 如果遇到 ...

  3. shiro使用redis作为缓存,出现要清除缓存时报错 java.lang.Exception: Failed to deserialize at org.crazycake.shiro.SerializeUtils.deserialize(SerializeUtils.java:41) ~[shiro-redis-2.4.2.1-RELEASE.jar:na]

    shiro使用redis作为缓存,出现要清除缓存时报错 java.lang.Exception: Failed to deserialize at org.crazycake.shiro.Serial ...

  4. Java面试题和解答(二)

    1.字符流和字节流的区别,使用场景是什么,相关类有哪些 http://blog.csdn.net/zj8692286/article/details/126507312.线程安全的概念,实现线程安全的 ...

  5. 数据仓库建模对比: 比较表格和多维解决方案 (Comparing tabular and multidimensional solutions)

    笔记记下来,划重点: https://docs.microsoft.com/zh-cn/sql/analysis-services/comparing-tabular-and-multidimensi ...

  6. 【VIM】-NO.140.VIM.1 -【VIM】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  7. shell脚本报错:syntax error: unexpected end of file

    解决办法1: vi test.sh :set fileformat=unix :wq 解决办法2: yum install dos2unix dos2unix my.sh 原因剖析: DOS下文件和L ...

  8. Java bean 转 Map

    Java bean 转 Map 时需要使用Fastjson //方法 一 Map<String, Object> a = (Map<String, Object>)JSON.t ...

  9. 在C#中,Windows Console控制台 设置控制台标题、禁用关闭按钮、关闭快速编辑模式、插入模式

    设置控制台标题 禁用关闭按钮 关闭快速编辑模式 关闭插入模式 设置控制台标题.禁用关闭按钮 #region 设置控制台标题 禁用关闭按钮 [DllImport("user32.dll&quo ...

  10. Cocos Creator LabelAtlas(艺术数字的使用)

    # 艺术数字资源 (LabelAtlas) **艺术数字资源** 是一种用户自定义的资源,它可以用来配置艺术数字字体的属性. ## 创建艺术数字资源 在 **资源管理器** 中右键,可以在如下菜单中找 ...