react 生命周期详解
2024-08-29 22:41:02
state有时候很不听话,在某些时候,我不想他渲染,偏偏react非常智能的帮我们重复渲染。
比如最常见的就是传递的对象为空,组件依旧渲染了一次或者多次。
更多场景不举例了,对症下药。
shouldComponentUpdate是react提供的生命周期函数,他发生在接收到新的props的时候。简单介绍一下各个生命周期函数。
componentWillMount:组件挂载之前执行,只执行一次 componentDidMount: 组件渲染完成,只执行一次 ======================================================= componentWillRecevieProps: 组件将要接收新的props执行 shouldComponentUpdate: 判断组件是否应该重新渲染,默认是true(首次渲染时不会被调用,接受2个参数,新的props和新的state) componentWillUpdate: 组件将要重新渲染 componentDidUpdate: 组件重新渲染完成 ======================================================= componentWillUnmount: 卸载组件
组件生命周期是有顺序的,首先挂载组件,挂载成功完成第一次渲染,然后传递新的props,则会触发componentWillRecevieProps,执行重新渲染的周期,直至渲染完成。
shouldComponentUpdate: function(nextProps, nextState) {
return true;
}
在你的组件内部加上这段代码
component.js
shouldComponentUpdate(nextProps, nextState) {
if (_.isEqual(this.props, nextProps) || !_.isEmpty(this.props)) {
return false
}
return true
}
这里用到了_.isEqual和_.isEmpty,_.isEqual判断当前传进来的值和下一次传递的值是不是相等,是则返回true,_.isEmpty判断当前传递进来的对象是不是为空,为空则返回true。
_.isEqual和_.isEmpty是 lodash 插件里面的函数,这是个轻巧的JavaScript函数插件,可以处理多种常见的数据操作,当然还有一个更多功能的插件。
在你的react项目的入口js导入lodash,因为lodash函数是全局的,所以只需要在入口导入一次即可。
安装
npm install --save lodash
app.js
import ‘lodash’
最新文章
- crontab介绍
- PHP那些非常有用却鲜有人知的函数
- C语言的time.h解释python的time
- 最近火到不行的微信小程序的常识
- POJ 2828-Buy Tickets(线段树)
- Node.js中的ORM
- webstorm卡、闪退以及win10中jdk配置
- php递归json类实例代码
- Scrapy选择器的用法
- UOJ#185. 【ZJOI2016】小星星 容斥原理 动态规划
- 初识KNN
- C++编译变更stlport到使用g++的stl经验总结
- SSL证书读取
- 各种uml图
- Zynq开发之HLS
- CSS3实现小黄人动画
- 2018.09.26 洛谷P2464 [SDOI2008]郁闷的小J(map+vector)
- 2018.07.12 atcoder Choosing Points(数学分析好题)
- Swift要点:从Objective-C开发者的角度看Swift
- TP5.1 查看具体版本
热门文章
- JWT (JSON WEB Token)正确使用场景
- Python基础教程2-3:以正确的宽度在居中的“盒子”内打印一个句子
- Docker系列一:Docker的介绍和安装
- ActiveXObject
- R-barplot()
- (转)iOS平台UDID方案比较
- Running OOM killer script for process 32248 for Solr on port 8983
- UVa - 1593 代码对齐(STL)
- JS页面快捷键库hotkeys.js
- day05 模块以及内置常用模块用法