随便扯扯React生命周期 --《爱看不看系列》
生命周期嘛,顾名思义,就是说组件这辈子从生下来到死掉经历的事情。先来看看一张图片,温故温故,如图:
你会发现有些周期的名字都能找出点规律,我找到的规律是凡是 Will 字母的,表示该钩子函数会在该生命周期发生之前调用;包含前缀did
表示该钩子函数会在该生命周期发生之后调用。
大概给生命周期分及各类:
1、Mounting(挂载)
- constructor()
- componentWillMount()
- render()
- componentDidMount()
上面几个函数会在组件被创建和插入到DOM后调用
2、Updating(更新)
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
props 或者 state 的变化都会导致更新。上面这些方法会在 组件 重新渲染时调用。
3、Unmounting
componentWillUnmount()
该方法将会在 组件 从DOM中移除时调用
分完类之后就来依次说说各个组件是干什么的咯,怕是每个写react的程序员都会有自己的见解咯。
1. componentWillMount()
这个组件个人觉得争议很大,有的人说可以在这个钩子函数内写ajax请求,有的说不行,我还是保持我自己的观念,
不能在里面使用setState方法来更新组件,因为它是在render函数之前执行的,也就是说执行它的时候,DOM节点
是还没有挂在的,强行setState会导致React Component 的 re-render。
2. componentDidMount()
这个函数在组件挂在之后执行的,所以比较适合用作初始化DOM节点的操作和AJAX请求。
在该钩子函数里面,可以使用 setState 但是会触发重新渲染 re-render 。
3.componentWillReceiveProps(nextProps)
该钩子函数将会在已挂载组件(mounted component)接收到新的 props 之前调用。适用于更新state的值(重新渲染)
比较this.props和nextProps。有一个要注意的地方就是,props即使没有变化,也会调用这个钩子函数,所以,一般我们的
做法就是比较this.props和nextProps。
4.shouldComponentUpdate(nextProps, nextState)
当组件接收到新的 Props 或者 state时,要进行 rendering之前会调用 shouldComponentUpdate()
。该钩子函数用于告诉 React 组件是否需要重新渲染。
shouldComponentUpdate()
默认返回 true
。
shouldComponentUpdate()
在两种情况下不会被调用:1、初始化渲染;2、使用了forceUpdate()方法。
但是当 shouldComponentUpdate()
返回 false
的时候,此时 state 发生改变,并不能阻止 child component 进行重新渲染。
但是一旦 shouldComponentUpdate()
返回 false
,这就意味着 componentWillUpdate()
、 render()
和 componentDidUpdate()
将不再执行。
5.componentWillUpdate()
state or props 更新后re-render之前调用。
不能在这里调用 setState
,如果需要设置 state,应该在 componentWillReceiveProps()
中调用 setState()
.
6.componentDidUpdate
在组件更新之后马上调用。在该钩子函数内,你可以:1、操作DOM;2、发起网络请求
7.componentWillUnmount
在组件卸载和销毁前调用。在该钩子函数内可以做一些清除工作,比如:1、取消定时器;2、取消网络请求;3、绑定DOM事件。
随便扯扯React生命周期 --《爱看不看系列》的更多相关文章
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- React生命周期详解
React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...
- React生命周期简单详细理解
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- 22.1 、react生命周期(一)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...
- react 生命周期钩子里不要写逻辑,否则不生效
react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.
- react复习总结(2)--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- vue生命周期和react生命周期对比
一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...
- react生命周期知识点
react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2. ...
随机推荐
- jar包、jdk版本、兼容性
对jar包.jdk版本,以及不同jdk版本的jar包的兼容性有一些疑问,搜集一些资料于此 查看jar包的jdk版本 查看.jar包中的META-INF\MANIFEST.MF Build-Jdk: 1 ...
- isqlplus的使用
1 再安装Oracle的机器上开启服务[命令services.msc] 2 浏览器输入下面的网址: 虚拟机[安装orcale的机器]:http://localhost:5560/isqlplus/ 本 ...
- IBM Rational Appscan Part 1
By Rohit T|July 23rd, 2012 http://resources.infosecinstitute.com/ibm-rational-appscan/ IBM Rational ...
- centos6.5 源码编译 mysql5.6.21
1.yum安装各个依赖包 [root@WebServer ~]# yum -y install gcc gcc-devel gcc-c++ gcc-c++-devel autoconf* automa ...
- docker 摘要(入门版)
Docker 安装 macOS或者windows 下载boot2docker工具 CentOS yum install docker-io -y systemctl start docker dock ...
- 深入理解JavaScript系列(10):JavaScript核心(晋级高手必读篇)
本篇是ECMA-262-3 in detail系列的一个概述(本人后续会翻译整理这些文章到本系列(第11-19章).每个章节都有一个更详细的内容链接,你可以继续读一下每个章节对应的详细内容链接进行更深 ...
- python中操作列表
1.遍历列表 可以用for循环遍历打印非常实用 摸板: for 临时变量 in 列表 : print(临时变量) 注意缩进 , 注意冒号 2.创建数值列表 (1)使用range()函数 , 函数的范围 ...
- Spring课程 Spring入门篇 5-1 aop基本概念及特点
概念: 1 什么是aop及实现方式 2 aop的基本概念 3 spring中的aop 1 什么是aop及实现方式 1.1 aop,面向切面编程,比如:唐僧取经需要经过81难,多一难少一难都不行.孙悟空 ...
- SpringMvc Controller请求链接忽略大小写(包含拦截器)及@ResponseBody返回String中文乱码处理
SpringMvc Controller请求链接忽略大小写(包含拦截器)及@ResponseBody返回String中文乱码处理... @RequestMapping(value = "/t ...
- Linux 学习 一, useradd
安装好VMware 安装好Linux 在安装Linux时候,建立了一个用户,dragon, 和密码...这个用户不是root用户,没有root权限 可以切换dragon 到用户root,这个时候就有r ...