react里执行shouldComponentUpdate时返回false的后果
大家都知道生命周期shouldComponentUpdate返回false时,不会进行后续的渲染,那这个时候state是什么情况呢。我们看一下demo
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {number: 1}; // 这边绑定是必要的,这样 `this` 才能在回调函数中使用
this.handleClick = this.handleClick.bind(this);
} handleClick() {
this.setState(prevState => ({
number: this.state.number + 1
}));
} shouldComponentUpdate(nextProps, nextState) {
if(this.state.number == 4) {
return false
}
return true
} render() {
return (
<button onClick={this.handleClick}>
{this.state.number}
</button>
);
}
} ReactDOM.render(
<Toggle />,
document.getElementById('example')
);
number是4的时候,我们返回false。运行结果表明,当按钮的数字是4的时候,再点击,数字不变化,接着点击,数字由4变成了6。表明,shouldComponentUpdate返回false不会影响state的改变,只是不接着进行渲染了而已。
接下来,应该把生命周期里每个阶段里调用setState会有什么后果,深入搞明白,深入React技术栈30页,还有更多的书籍先看一看。
react里执行shouldComponentUpdate时返回false的后果的更多相关文章
- spring mvc 避免IE执行AJAX时,返回JSON出现下载文件
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" c ...
- SpringMVC 避免IE执行AJAX时,返回JSON出现下载文件
<?xml version="1.0" encoding="UTF-8"?> <!-- SpringMVC配置文件 --> <be ...
- php fopen函数返回false
使用yum安装的apache2.4.6 php 7.2.2 正确安装后使用fopen()函数打开文件时返回false 百度一下又三种原因 1.目录或者文件夹权限原因 (可以用 chmod - ...
- vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效解决方法
我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-uplo ...
- file_put_contents执行返回false,file_put_contents false(linux服务器httpd)
file_put_contents执行返回false,file_put_contents false(linux服务器httpd) 默认下selinux是开启的查看SELinux状态:1./usr/s ...
- react如何通过shouldComponentUpdate来减少重复渲染
转自:https://segmentfault.com/a/1190000016494335 在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件 ...
- 悟透Javascript undefined,null,"",0这四个值转换为逻辑值时就是false &this关键字
话题一:undefined,null,"",0这四个值转换为逻辑值时就是false 也就是在if判断时会把上面的五个作为false来判断.但是它们的类型确是不尽相同的,如下所示. ...
- Python第七天 函数 函数参数 函数里的变量 函数返回值 多类型传值 函数递归调用 匿名函数 内置函数
Python第七天 函数 函数参数 函数里的变量 函数返回值 多类型传值 函数递归调用 匿名函数 内置函数 目录 Pycharm使用技巧(转载) Python第一天 ...
- 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性
凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...
随机推荐
- 关于python的拷贝
https://blog.csdn.net/koukehui0292/article/details/82993958 Python的 深度拷贝: import copy d=copy.deepcop ...
- ViewPage第二课为ViewPage加入标题
在第一课 学前准备:掌握ViewPage第一课http://blog.csdn.net/wei_chong_chong/article/details/50468832 为ViewPage加入标题: ...
- spark源码解析之scala基本语法
1. scala初识 spark由scala编写,要解析scala,首先要对scala有基本的了解. 1.1 class vs object A class is a blueprint for ob ...
- Scala在挖财的应用实践--转载
原文地址:http://www.infoq.com/cn/articles/scala-architecture-wacai 编者按:本文是根据ArchSummit大会上挖财资深架构师王宏江的演讲&l ...
- jtag引脚
如果不能下载,可能原因也许是电量不足了... 在电力不足的时候,仿真也不能进行... ///////////////////////////////////////////////////////// ...
- ZOJ 2770 Burn the Linked Camp 差分约束 ZOJ排名第一~
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1770 题目大意: 陆逊为了火烧连营七百里,派出了间谍刺探敌情,得之刘备的军营以 ...
- 3、Unicode\UTF-8\GBK 区别和联系
字符编码:Unicode和UTF-8之间的关系 可以参考下面blog:https://blog.csdn.net/xiaolei1021/article/details/52093706/ 这篇文章写 ...
- SDWebImage使用
SDWebImage这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. 将SDWebImage类库添加入工程时,一定 ...
- Snail—Hibernate之自写固定组件
Hibernate的存储都是在session中进行的,此session非彼session 以下就是从生成的Hibernate配置文件获得连接数据库,然后再得到session等等 package com ...
- hadoop的关键进程 分类: A1_HADOOP 2015-06-06 11:37 52人阅读 评论(0) 收藏
hadoop集群中主要进程有 master: NameNode, ResourceManager, slaves: DataNode, NodeManager, RunJar, MRAppM ...