React生命周期函数理解
一、组件挂载阶段
1. componentWillMount()
该方法在首次渲染之前调用,在一个组件挂载到卸载的过程中,仅仅执行这一次。该函数内可以state初始化的工作,与constructor的作用类似。这里也是在render方法调用前最后一次修改state的方法。
这里不建议使用Ajax获取接口数据,因为是异步的,所以在接下来的第一次render中根本接收不到响应数据。
willMount中setState还是会多一次渲染
2. render()
该方法创建一个虚拟dom,表示组件的输出。(输出可以应用到react-dom,react-native)
3.componentDidMount()
该方法调用时,表明已经渲染出真实的dom,可以在该方法中获取任意节点。
二、组件更新阶段
2.1 父组件状态改变,触发子组件更新(简单说是获取到了新的props)
2.1.1 componentWillReceiveProps(nextProps)
当父级组件state或者props发生改变时,子组件会调用该方法。这里的nextProps和this.props需要我们自己判断是否相同来做出相应的操作。比如根据新的props来setState
2.1.2 shouldComponentUpdate(nextProps, nextState)
当确定组件的props或者state的某种改变不需要重新渲染时,可以通过这个方法返回false来阻止渲染。
2.1.3 componentWillUpdate(nextProps, nextState)
组件得到新的props或者state时,在render前调用该函数。(不要在此方法中更新state)
如果需要相应props的改变时,可以在componentWillReceiveProps中做出响应操作
2.1.4 render
2.1.5 componentDidUpdate(prevProps, prevState)
可以对更新后的dom进行操作
2.2 组件内部状态更新
少了componentWillMount,其他与上面一致
三、卸载
componentWillUnmount()
清除定时器,网络请求等
引用:https://moeover.com/2017/01/17/understand-react-lifecycle.html
React生命周期函数理解的更多相关文章
- React生命周期函数详解
React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...
- 十二、React 生命周期函数
React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
- react生命周期函数使用箭头函数,导致mobx-react问题
最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...
- 2.React 生命周期函数
什么是生命周期函数:在某一时刻组件会自动调用执行的函数. import React,{ Component,Fragment } from 'react' class Note extends Com ...
- react生命周期函数的应用-----1性能优化 2发ajax请求
知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...
- react 生命周期函数介绍
constructor():构造函数 执行:组件加载钱最先调用一次,仅调用一次. 作用:定义状态机变量. 注意:第一个语句必须为super(), 否则会报错:'this' is not allowed ...
- react生命周期函数
如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组 ...
- react 生命周期函数的一些心得体会
一.理论 组件本质上是状态机,输入确定,输出一定确定 生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类: 二.初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实 ...
- 说一说我了解的react生命周期函数
我了解的几个阶段 Mounting 挂载 Updating 更新 Unmounting 卸载 我说几个我常用的钩子函数 1.挂载阶段Mounting 1)constructor():函数构造器 执行次 ...
随机推荐
- MyBatis在Spring环境下的事务管理
MyBatis的设计思想很简单,可以看做是对JDBC的一次封装,并提供强大的动态SQL映射功能.但是由于它本身也有一些缓存.事务管理等功能,所以实际使用中还是会碰到一些问题--另外,最近接触了JFin ...
- Redis的HelloWorld
1.安装完成的Redis: linux安装的应用默认会在:usr/local/bin. 1.redis-benchmark:性能测试工具,是redis提供的一个高并发程序,可以在自己本机运行,看看自己 ...
- 【Android】Failed to convert @drawable/picture into a drawable
刚使用 eclipse 遇到了这个问题,图片的效果未显示出来,上网查找后发现这其实不算是问题:重启下工程或 eclipse 就行了. PS: 直接运行工程也可以,不影响效果.
- java8中用流收集数据
用流收集数据 汇总 long howManyDishes = menu.stream().collect(Collectors.counting()); int totalCalories = men ...
- ceph 初始化函数解析
global_pre_init 预初始化函数,解析ceph.conf配置文件, 初始化定义global_context 和 config的全局变量. 全局预初始化函数 CINIT_FLAG_UNPRI ...
- java常见面试题目(三)
1.jsp的内置对象. JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page. ...
- 【简洁易懂】CF372C Watching Fireworks is Fun dp + 单调队列优化 dp优化 ACM codeforces
题目大意 一条街道有$n$个区域. 从左到右编号为$1$到$n$. 相邻区域之间的距离为$1$. 在节日期间,有$m$次烟花要燃放. 第$i$次烟花燃放区域为$a_i$ ,幸福属性为$b_i$,时间为 ...
- hadoop学习(一)----概念和整体架构
程序员就得不停地学习啊,故步自封不能满足公司的业务发展啊!所以我们要有搞事情的精神.都说现在是大数据的时代,可以我们这些码农还在java的业务世界里面转悠呢.好不容易碰到一个可能会用到大数据技术的场景 ...
- QT动画时间轴控制 QTimeLine
QTimeLine类提供用于控制动画的时间轴 比如控制进度条的增长,图片,窗口的旋转,平移等等 QTimeLine有一个frameChanged(int)信号 当调用QTimeLine::start( ...
- 从零开始学习springboot之热部署的配置
各位看官大家好,博主之前因为毕业设计以及毕业旅游耽搁了好长一段时间没有更新博客了,从今天起又会慢慢开始学习啦. 今天主要是来学习springboot热部署的配置. 一. 热部署 我们通常在修改某些文件 ...