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. error connecting to master 'repl@192.168.1.107:3306' - retry-time: 60 retries: 86400

    很多时候,就算thread 正在进行,也不代表没有错误,一定要看看具体表示错误的变量 mysql> show slave status\G *************************** ...

  2. yii防止延迟用户多次点击按钮重复提交数据

    是不是被用户的行为所困扰? 一. 一个表单用户点击提交按钮了N次,这也导致了数据提交了N次. 为了此受到了测试的欺辱,受到了老板的批评? 不用怕,它就是来拯救你的. 第一步:打开命令行,敲入 comp ...

  3. Python爬虫入门之Cookie的使用

    本节我们一起来看一下Cookie的使用. 为什么要使用Cookie呢? Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密) 比如说有些网站需要 ...

  4. nginx 日志打印post请求参数

    在日志格式后面加上 $request_body 配置信息 log_format main '$remote_addr - $remote_user [$time_local] "$reque ...

  5. [模板]quicksort快速查找、排列算法

    1.快速排序 //快速排序 void quick_sort(int s[], int l, int r) { if (l < r) { //Swap(s[l], s[(l + r) / 2]); ...

  6. 在win中,给powershell客户端,搭建sshd服务器。

    下载:https://github.com/PowerShell/Win32-OpenSSH/releases     问:为什么要用这个sshd?答:这是微软用,openssh官方的源码,源码网址: ...

  7. ESP系列MQTT数据通信

    1.使用一个深圳四博智联科技有限公司的NODEMCU开发板. 2.下载MQTT的SDK压缩包,请查看附件. 3.用官方提供的Eclipse打开MQTT的sdk开发包. 4.打开include文件夹中的 ...

  8. 团队作业4——beta冲刺

    beta冲刺准备 冲刺准备 5天冲刺博客 Beta冲刺一 Beta冲刺二 Beta冲刺三 Beta冲刺四 Beta冲刺五 用户使用报告 用户使用用报告 冲刺总结 冲刺总结随笔 项目码云地址 码云地址

  9. jsp视频如何播放

    网站开发小白们对如何插入视频有较大的困扰,一段时间不知道从何下手,想在数据库里面直接导入,但没能成功,后又尝试直接在myeclipse里面直接放入视频. 对于不同的播放器,视频的格式也有要求,建议使用 ...

  10. 动态导入Js文件

    var ScriptLoader = { worker: , isWait: false, readyQueue: [], callback: [], timer: null, wait: funct ...