我了解的几个阶段

  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. 预备JS执行环境,预执行脚本

    page.evaluateOnNewDocument(pageFunction, ...args) pageFunction <function|string> Function to b ...

  2. Django创建完全独立的APP

    我们之前已经完成了项目的结构搭建,但是,在Django当中,我们强调的一个重要概念是app,比如Django自带的admin就是一个成功的app典范,那么我们应该如果整理自己的项目结构,才能让我们的a ...

  3. NO18 linux开机自启动设置--开机流程--中文乱码--查看行数

    第八题:装完系统后,希望让网络文件共享服务NES,仅在3级别上开机自启动,该如何做? 解答:什么是开机自启动,在Linux下软件服务随系统启动而启动的配置. 方法一:文件配置法,可以把要启动的服务的命 ...

  4. Linux 安装 go 以及 arm linux 移植 go

    背景 Go是一门全新的静态类型开发语言,具有自动垃圾回收,丰富的内置类型,函数多返回值,错误处理,匿名函数,并发编程,反射等特性. 从Go1.4之后Go语言的编译器完全由Go语言编写,所以为了从源代码 ...

  5. Linux之关于用户的几个重要配置文件

    . /etc/skel/ 用来存放新用户配置文件(环境变量)的目录,当创建新用户时,系统会把当下目录的所有文件拷贝一份到新用户家目录中,即:cp -a /etc/skel/* /home/ddu 2. ...

  6. yum出现Error downloading packages错误

    yum出现Error downloading packages错误错误表现方式:yum可以list,可以clean cache,但是无法安装,错误提示: Downloading packages: E ...

  7. springboot2.1以javabean整合rabbitmq及自动注入rabbitmqTemplate为空问题

    springboot集成rabbitmq之前也写过,这次再来个总结,总体来讲比较简单 主要就是配置属性文件,将属性以javabean的形式注入,配置工厂,对象等原来以xml<bean>形式 ...

  8. 01.Delphi最简单的接口

    我想学习一个插件框架,但是那个框架里面大量用到了接口,于是不得不把接口看一下了.总感觉接口编程这一块非常的绕,每一行都注释了. unit Unit1; interface uses Windows, ...

  9. Arrays类常用方法

    Arrays类 3.1 概述 java.util.Arrays 此类包含用来操作数组的各种方法,比如排序和搜索等.其所有方法均为静态方法. 3.2 操作数组的方法 1.将参数数组变成字符串 publi ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-fast-forward

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...