React的生命周期钩子
发布日期:2022-02-12 16:06:57 浏览次数:2 分类:技术文章

本文共 2392 字,大约阅读时间需要 7 分钟。

React的生命周期

  1. 挂载卸载过程
    1.1.constructor()
    1.2.componentWillMount()
    1.3.componentDidMount()
    1.4.componentWillUnmount ()
  2. 更新过程
    2.1. componentWillReceiveProps (nextProps)
    2.2.shouldComponentUpdate(nextProps,nextState)
    2.3.componentWillUpdate (nextProps,nextState)
    2.4.componentDidUpdate(prevProps,prevState)
    2.5.render()
    React的生命周期从广义上分为三个阶段:挂载、渲染、卸载

因此可以把React的生命周期分为两类:挂载卸载过程和更新过程。
React的生命周期图:
在这里插入图片描述

1. 挂载卸载过程

1.1.constructor()

constructor()中完成了React数据的初始化,它接受两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。
注意:只要使用了constructor()就必须写super(),否则会导致this指向错误。

1.2.componentWillMount()

componentWillMount()一般用的比较少,它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后,但是还未渲染DOM时。

1.3.componentDidMount()

组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染

1.4.componentWillUnmount ()

在此处完成组件的卸载和数据的销毁。

  1. clear你在组建中所有的setTimeout,setInterval
  2. 移除所有组建中的监听 removeEventListener
  3. 有时候我们会碰到这个warning:
Can only update a mounted or mounting component. This usually
  means you called setState() on an unmounted component. This is a   no-op. Please check the code for the undefined component.

原因:因为你在组件中的ajax请求返回setState,而你组件销毁的时候,请求还未完成,因此会报warning
解决方法:

componentDidMount() {

   this.isMount === true
axios.post().then((res) => {
   this.isMount && this.setState({
  // 增加条件ismount为true时
  aaa:res
})})}componentWillUnmount() {
   this.isMount === false}

2. 更新过程

2.1. componentWillReceiveProps (nextProps)

在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props,将nextProps的state为当前组件的state,从而重新渲染组件

componentWillReceiveProps (nextProps) {

   nextProps.openNotice !== this.props.openNotice&&this.setState({
   openNotice:nextProps.openNotice
},() => {
 console.log(this.state.openNotice:nextProps)
  //将state更新为nextProps,在setState的第二个参数(回调)可以打
 印出新的state  })}

2.2.shouldComponentUpdate(nextProps,nextState)

主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期,由于在react中,setState以后,state发生变化,组件会进入重新渲染的流程,在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,因此需要在子组件的该生命周期中做判断

2.3.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

2.4.componentDidUpdate(prevProps,prevState)

组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。

2.5.render()

render函数会插入jsx生成的dom结构,react会生成一份虚拟dom树,在每一次组件更新时,在此react会通过其diff算法比较更新前后的新旧DOM树,比较以后,找到最小的有差异的DOM节点,并重新渲染。

转载地址:https://blog.csdn.net/weixin_46663768/article/details/106185600 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:如何实现网站的防盗链
下一篇:Object.assign()的详解和用法

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.36.149.65]2022年06月20日 05时08分04秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

autowarid和resources_ÂÐÏØÈË´ó 2019-12-01 15:24:33
python函数的定义教程_Python函数定义、函数调用详解 2019-12-01 15:24:33
python合并相同索引列表_python – 按行和相同的索引pandas合并两个数据帧 2019-12-01 15:24:33
ssis抽MySQL数据_微软SSIS部署抽取数据的包报错 2019-12-01 15:24:34
whmcs 添加域名_WHMCS域名更换教程 2019-12-01 15:24:34
vue监听值有变化后调用接口_探索 Vue.js 响应式原理 2019-12-01 15:24:34
mysql数据库环境安装配置_windows环境安装配置MySQL数据库 2019-12-01 15:24:34
mysql 索引缓存_MySQL之变量、查询缓存和索引 2019-12-01 15:24:31
mysql建表规定年龄范围_MySQL建表规则 2019-12-01 15:24:32
mysql memcache 一键_NGINX + PHP + MySQL + Memcache 一键启动脚本(.bat + shell) 2019-12-01 15:24:32
mysql语法检查工具_sql语法分析器(sql语法分析工具) 2019-12-01 15:24:32
webpy mysql_webpy使用mysql数据库操作(web.database) 2019-12-01 15:24:33
golang mysql 简书_golang实现mysql数据库备份-Go语言中文社区 2019-12-01 15:24:33
近期你已授权登录过腾讯文档 自动登录中_JustAuth发布1.13.2版本,新增微信公众平台的授权登录... 2019-12-01 15:24:33
ai怎么标注尺寸_传统的正负公差好用吗?怎么用?探究一下正负尺寸公差的标注... 2019-12-01 15:24:30
execjs执行js出现window对象未定义时的解决_收好这份JS学习口诀干货,学习前端事半功倍~... 2019-12-01 15:24:30
mysql 强制排序_转!!mysql order by 中文排序 2019-12-01 15:24:31
mysql 8.0字符集_技术分享 | MySQL 8.0:字符集从 utf8 转换成 utf8mb4 2019-12-01 15:24:31
redis 数据备份MySQL_Redis数据备份与恢复 2019-12-01 15:24:31
mysql 导出整个库表结构图_mysql导出数据库数据及表结构 2019-12-01 15:24:31