大家都知道生命周期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的后果的更多相关文章

  1. spring mvc 避免IE执行AJAX时,返回JSON出现下载文件

    <!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" c ...

  2. SpringMVC 避免IE执行AJAX时,返回JSON出现下载文件

    <?xml version="1.0" encoding="UTF-8"?> <!-- SpringMVC配置文件 --> <be ...

  3. php fopen函数返回false

    使用yum安装的apache2.4.6   php 7.2.2  正确安装后使用fopen()函数打开文件时返回false 百度一下又三种原因 1.目录或者文件夹权限原因 (可以用   chmod - ...

  4. vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效解决方法

    我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-uplo ...

  5. 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 ...

  6. react如何通过shouldComponentUpdate来减少重复渲染

    转自:https://segmentfault.com/a/1190000016494335 在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件 ...

  7. 悟透Javascript undefined,null,"",0这四个值转换为逻辑值时就是false &this关键字

    话题一:undefined,null,"",0这四个值转换为逻辑值时就是false 也就是在if判断时会把上面的五个作为false来判断.但是它们的类型确是不尽相同的,如下所示. ...

  8. Python第七天 函数 函数参数 函数里的变量 函数返回值 多类型传值 函数递归调用 匿名函数 内置函数

    Python第七天   函数  函数参数   函数里的变量   函数返回值  多类型传值     函数递归调用   匿名函数   内置函数 目录 Pycharm使用技巧(转载) Python第一天   ...

  9. 【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

随机推荐

  1. WCF REST (二)

    今天主要写下  POST等其他方式 发送请求 以及 流方式 文件的上传与下载 一.Post 提交数据 先来想下 POST和Get 的不同   Get 方式 我们直接通过 url  来传递参数   先来 ...

  2. 每天自动备份MySQL数据库的shell脚本

    经常备份数据库是一个好习惯,虽然数据库损坏或数据丢失的概率很低,但一旦发生这种事情,后悔是没用的.一般网站或应用的后台都有备份数据库的功能按钮,但需要去手工执行.我们需要一种安全的,每天自动备份的方法 ...

  3. DB2学习总结(1)——DB2数据库基础入门

    DB2的特性 完全Web使能的:可以利用HTTP来发送询问给服务器. 高度可缩放和可靠:高负荷时可利用多处理器和大内存,可以跨服务器地分布数据库和数据负荷:能够以最小的数据丢失快速地恢复,提供多种备份 ...

  4. POJ 3278 Catch That Cow(BFS 剪枝)

    题目链接:http://poj.org/problem?id=3278 这几次都是每天的第一道题都挺顺利,然后第二道题一卡一天. = =,今天的这道题7点40就出来了,不知道第二道题在下午7点能不能出 ...

  5. jtag引脚

    如果不能下载,可能原因也许是电量不足了... 在电力不足的时候,仿真也不能进行... ///////////////////////////////////////////////////////// ...

  6. SQLITE3 使用总结(直接使用C函数)

    转载网址:http://blog.chinaunix.net/uid-8447633-id-3321394.html 前序: Sqlite3 的确很好用.小巧.速度快.但是因为非微软的产品,帮助文档总 ...

  7. 【p092】分数线划定

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 世博会志愿者的选拔工作正在A市如火如荼地进行.为了选拔最合适的人才,A市对所有报名的选手进行了笔试,笔 ...

  8. 使用Perl分割文件

    使用Perl分割文件 特性 使用换行作为分界 忽略注释行# 分割存入新指定的文件中 待分割的文件test.lst wwdg/prescaler syscfg/test1 syscfg/test2 ua ...

  9. [SCSS] Loop Over Data with the SCSS @each Control Directive

    The SCSS @for directive is great when we know how many iterations are required and we only need 1 va ...

  10. WP8.1:onedrive操作

    小梦今天给大家分享一下windows phone 8.1开发 onedrive中的一些操作: Windows phone 8.1 中 onedrive 登录 Windows phone 8.1 中 o ...