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. Python的魔术方法总结

    魔术方法:再不需要程序员定义,本身就存在类中的方法就是魔术方法. 魔术方法通常都长这样:__名字__. 1.__str__和__repr__ 为了方便记忆看如下列子 class Course: def ...

  2. xpath 在firefox,chrome中正常,在requests中不正常的解决。

    经多次测试发现: lxml中的etree格式化以后,直接使用firefox或chrome提取的xpath检索不到内容. 主要是因为tbody # 车种xpathczxx = '/html/body/t ...

  3. unity5.6 导出gradle工程,Android Studio 导入问题以及解决

    导入后gradle building 一直到跑,卡住了,一般是gradle没有下载,又下不下来的原因. 去  http://services.gradle.org/distributions/  下载 ...

  4. JS 清除DOM 中空白元素节点

    HTML中的空白节点会影响整体的HTML的版面排榜 例如: 制作百度首页时,两个input之间的空白节点将本来是要整合在一起的搜索栏硬是把按钮和搜索框分离出现好丑的间隙 这时我们就可以用js清除这个空 ...

  5. @Autowired注解与@Qualifier注解搭配使用

    问题:当一个接口实现由两个实现类时,只使用@Autowired注解,会报错,如下图所示 实现类1 实现类2 controller中注入 然后启动服务报错,如下所示: Exception encount ...

  6. Spring 基础知识(三)MVC 架构简介

    参考博文: http://blog.csdn.net/liangzi_lucky/article/details/52459378 Spring mvc 执行顺序: 过滤器  web.xml 拦截器 ...

  7. .NET界面控件DevExpress发布v18.2.8|附下载

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  8. 1011. World Cup Betting (20)

    生词(在文中的意思) tie 平局 lay a bet 打赌 putting their money where their mouths were 把他们的钱用在刀刃上 manner of 的方式 ...

  9. WPF 系统关闭模式

    WPF App.xaml中ShutdownMode的属性值 OnLastWindowClose(默认值) 最后一个窗体关闭或调用Application对象的Shutdown()方法时,应用程序关闭. ...

  10. 斐讯K2 22.5.9固件刷华硕固件实测教程

    斐讯K2最新的固件是V22.5.9.163这个版本是锁死了,不能刷机的,而且不能降级到原来的可以刷机的老版本固件,也就不能刷第三方固件了,怎么破呢?下面就教大家怎么降级刷机到V22.4.2.8固件.  ...