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 ...
随机推荐
- POJ 2386 Lake Counting DFS水水
http://poj.org/problem?id=2386 题目大意: 有一个大小为N*M的园子,雨后积起了水.八连通的积水被认为是连接在一起的.请求出院子里共有多少水洼? 思路: 水题~直接DFS ...
- P2P网贷-借款与发标
P2P网贷-借款与发标 关于借款,我想说,需要资金的人真的很多.贷款利率不太高的情况下,借款客户相对而言还是比较好开发的, 比较难的是,确保客户能按时还款.目前,信用还是比较混乱的. 借款来源,客户 ...
- Linux下设置MySQL不区分大写和小写
MySQL在Linux下数据库名.表名.列名.别名大写和小写规则: 1.数据库名与表名是严格区分大写和小写 2.表的别名是严格区分大写和小写 3.列名与列的别名在全部的情况下均是 ...
- c++11 多线程 -- 基本使用
c++11 多线程 – 基本使用 前言:这篇文章仅针对没有使用过c++11线程库的童鞋来高速入门,也是自己的一个简单记录,内容比較基础. 1.线程的基本使用 2.相互排斥量 3.条件变量 4.原子变量 ...
- Linux下的lds链接脚本简介(四)
十一. 表达式 lds中表达式的文法与C语言的表达式文法一致,表达式的值都是整型,如果ld的运行主机和生成文件的目标机都是32位,则表达式是32位数据,否则是64位数据. 以下是一些常用的表达式: _ ...
- QT5.5
QT创建空项目时,会有报错“无法解析的外部符号”,方法是在 .pro文件中添加 以下,即可QT+=core gui widgets
- __block 双下划线定义block变量可在内部修改其值
//如果外部的变量用了__block关键字,就可以在block内部修改这个变量的值. //block可访问外面定义的变量 int (^Num)(int, int)= ^(int a, int b){ ...
- [RxJS] AsyncSubject: representing a computation that yields a final value
This lesson will teach you about AsyncSubject, another type of Subject with some replaying logic ins ...
- 解决linux下cocos2dx不能播放声音
cocos2dx2.2.1在linux下引用#include "SimpleAudioEngine.h".报错找不到该文件. 改动makefile文件,加入 SHAREDLIBS ...
- ScrollView ViewPager ListView三者共存的问题
随喜结佛缘 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlueXVueWluZw==/font/5a6L5L2T/fontsize/400/fill/ ...