我了解的几个阶段

  1. Mounting 挂载
  2. Updating 更新
  3. Unmounting 卸载

我说几个我常用的钩子函数

1.挂载阶段Mounting

  1)constructor():函数构造器

      执行次数:1

      作用:初始化

  2)componentDidmount()

      执行次数:1

      作用:Dom挂载完成获取节点,通常在这里发起数据请求

  3)render()

      react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

  4)shouldComponentUpdate(nextProps, nextState):判断组件是否更新的钩子函数

      执行次数:多次
      触发条件:组件挂载之后,每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render。

2.更新阶段Updating

  1)componentDidUpdate(prevProps, prevState):组件完成更新时执行的钩子函数

    执行次数:多次

    作用:除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate。

3.卸载阶段Unmounting

  1)componentWillUnmount():组件将要卸载是执行的钩子函数

    执行次数:1

    触发条件:组件将要被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除

知道的并不是很多,所有就写了这些

说一说我了解的react生命周期函数的更多相关文章

  1. React生命周期函数详解

    React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...

  2. 十二、React 生命周期函数

    React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...

  3. react生命周期函数使用箭头函数,导致mobx-react问题

    最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...

  4. 2.React 生命周期函数

    什么是生命周期函数:在某一时刻组件会自动调用执行的函数. import React,{ Component,Fragment } from 'react' class Note extends Com ...

  5. react生命周期函数的应用-----1性能优化 2发ajax请求

    知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...

  6. react 生命周期函数介绍

    constructor():构造函数 执行:组件加载钱最先调用一次,仅调用一次. 作用:定义状态机变量. 注意:第一个语句必须为super(), 否则会报错:'this' is not allowed ...

  7. react生命周期函数

      如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组 ...

  8. react 生命周期函数的一些心得体会

    一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实 ...

  9. react 生命周期函数

    (1)初始化阶段:getDefaultProps:获取实例的默认属性static propTypes 设置属性的类型componentWillMount:组件即将首次被装载.渲染到页面上render: ...

随机推荐

  1. sklearn调用分类算法的评价指标

    sklearn分类算法的评价指标调用#二分类问题的算法评价指标import numpy as npimport matplotlib.pyplot as pltimport pandas as pdf ...

  2. JuJu团队1月3号工作汇报

    JuJu团队1月3号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 飞飞 测试dataloader 将model嵌入GUI 无 婷婷 调试代码 提升acc 无 恩升 -- 写p ...

  3. POJ 3273:Monthly Expense 二分好题啊啊啊啊啊啊

    Monthly Expense Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 19207   Accepted: 7630 ...

  4. 7个现在就该学习Python 的理由【80%的人都不知道】

    Python 是一门更注重可读性和效率的语言,尤其是相较于 Java,PHP 以及 C++ 这样的语言,它的这两个优势让其在开发者中大受欢迎. 诚然,它有点老了,但仍是 80 后啊 —— 至少没有 C ...

  5. 7.6 CLI 管理Varnish

    ./varnishd -f /usr/common/varnish/etc/varnish/ -a 测试: 代理tomcat服务器地址:http://172.20.10.5:1111/ telnet ...

  6. 微信小程序提示:https://api.map.baidu.com 不在以下 request 合法域名列表中

    如果你想利用百度地图API定位来获得当前位置,但却出现了如标题所示问题,那么请接着看: 1.首先我们需要在百度地图开放平台(https://lbs.baidu.com/apiconsole/key?a ...

  7. nginx配置多个项目

    使用Nginx要在同一个域名下配置多个项目有两种方式: nginx按不同的目录分发给不同的项目 启用二级域名,不同的项目分配不同的二级域名 1.nginx按不同的目录分发给不同的项目: server ...

  8. Spark的任务提交和执行流程概述

    1.概述 为了更好地理解调度,我们先看一下集群模式的Spark程序运行架构图,如上所示: 2.Spark中的基本概念 1.Application:表示你的程序 2.Driver:表示main函数,创建 ...

  9. window下Apache Jmeter基础用法

    1.下载Apache-jmeter-5.1.1.zip 2.解压到一个地方,就可以开始使用了,如果需要在CMD里快速打开,可以设置环境变量. 3.在bin里面,直接打开jmeter.bat. 可以修改 ...

  10. 吴裕雄--天生自然java开发常用类库学习笔记:RumTime类

    public class RuntimeDemo01{ public static void main(String args[]){ Runtime run = Runtime.getRuntime ...