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页，还有更多的书籍先看一看。

转载于:https://www.cnblogs.com/zhansu/p/10294496.html

react里执行shouldComponentUpdate时返回false的后果相关推荐

mysql的过程返回执行成功与失败_mysqli_query函数执行成功返回一个结果标识符，失败时返回false...
数执识符失二醇纳米制备脂E丙烯维素丁酯聚乙聚乳基纤氰基粒的.磷.乙材料酸异酸D. 行成二醇片的凝胶骨架.甘棕榈纤维可用为A.单聚乙甲基于亲油酯油E.乙材料水性酸甘素D. 墨客古代文人往往寄情山水,功返 ...
mysql 查询false_mysql_affected_rows在成功查询时返回False？
我在排序这个PHP / MySQL问题时遇到困难.让我告诉你我的数据库,并解释我的情况: 创建表格: CREATE TABLE IF NOT EXISTS `users` ( `id` int(50) ...
php fopen函数失败,php fopen函数返回false
使用yum安装的apache2.4.6 php 7.2.2 正确安装后使用fopen()函数打开文件时返回false 百度一下又三种原因 1.目录或者文件夹权限原因 (可以用 chmod - ...
ajax 阻止默认提交,jQuery验证插件：在对ajax调用servlet时，submitHandler不会阻止默认提交-返回false无效...
我有一个使用jquery和servlet的简单表单.jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果.我不希望表单进行默认 ...
单值二叉树：如果二叉树每个节点都具有相同的值，那么该二叉树就是单值二叉树。只有给定的树是单值二叉树时，才返回 true；否则返回 false。
前言: 二叉树刷题是有固定思维的,请移步 README]二叉树刷题框架单值二叉树题目点击跳转:LeetCode 根据框架描述,我只需判断一个结点,如果这个节点是null就返回true,不是的话, ...
react如何通过shouldComponentUpdate来减少重复渲染
在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化 render什么时候会触发首先, ...
React里里面试准备
文章目录项目描述 1.生命周期 2.Hook 3.hook包装函数优化 4.Redux 5.自己封装的组件 6.图片懒加载 7.说一下 connect 怎么使用 8.flex 布局 9.rem 布局 ...
yii2 设置的缓存无效，返回false，不存在
为了那些因为标题点进来的小伙伴,我直接把问题解决方案写在开头: 问题描述, $cache->add($key,'value',1800);这样设置了值后,后面无论怎么取这个$key,取出来的结果 ...
【转】React 16 中从 setState 返回 null 的妙用
概述在 React 16 中为了防止不必要的 DOM 更新,允许你决定是否让 .setState 更来新状态.在调用 .setState 时返回 null 将不再触发更新. 我们将通过重构一个 mo ...
Pytorch安装教程及解决 torch.cuda.is_available() 返回 False 的问题
Pytorch安装教程及解决 torch.cuda.is_available() 返回 False 的问题有NVIDIA显卡的可以先去看CUDA安装教程,pytorch可以搭配CUDA10.0~ ...

react里执行shouldComponentUpdate时返回false的后果

react里执行shouldComponentUpdate时返回false的后果相关推荐

最新文章

热门文章