[React] Call setState with null to Avoid Triggering an Update in React 16
Sometimes it’s desired to decide within an updater function if an update to re-render should be triggered. Calling .setState with null no longer triggers an update in React 16. This means we can decided if the state gets updated within our .setState method itself!
In this lesson we'll explore how this works by refactoring a city map app that updates even if you choose the same map twice.
selectCity = evt => {
const newValue = evt.target.value;
this.setState(state => {
if (state.city === newValue) {
return null;
}
return {
city: newValue
};
});
};
[React] Call setState with null to Avoid Triggering an Update in React 16的更多相关文章
- React的setState分析
前端框架层出不穷,不过万变不离其宗,就是从MVC过渡到MVVM.从数据映射到DOM,angular中用的是watcher对象,vue是观察者模式,react就是state了. React通过管理状态实 ...
- React中setState 什么时候是同步的,什么时候是异步的?
class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...
- React的setState执行机制
1. setState基本特点 1. setState是同步执行的 setState是同步执行的,但是state并不一定会同步更新 2. setState在React生命周期和合成事件中批量覆盖执行 ...
- React中setState同步更新策略
setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...
- 初学React,setState后获取到的thisstate没变,还是初始state?
问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: getInitialState(){ return {data:[]}; } ...
- React中setState学习总结
react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...
- React的setState学习及应用
React的setState学习及应用 一:作用: setState() 将对组件 state 的更改排入队列,并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件.这是用于更新 ...
- 「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)
运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...
- React中setState方法说明
setState跟新数据是同步还是异步? setState跟新数据是异步的. 如何用代码表现出来是异步的. 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Fa ...
随机推荐
- thinkphp里面使用原生php
thinkphp里面使用原生php Php代码可以和标签在模板文件中混合使用,可以在模板文件里面书写任意的PHP语句代码 ,包括下面两种方式: 使用php标签 例如: {php}echo 'Hello ...
- 异步Ajax
Ajax异步刷新应用在Web开发中经常用到,在过去WebForm中通常是使用JQuery和一般处理程序或者aspx页面来实现: 在MVC中,虽然依然可以使用一般处理程序,但是一般还是通过在Contro ...
- P1824 进击的奶牛
题目描述 Farmer John建造了一个有N(2<=N<=100,000)个隔间的牛棚,这些隔间分布在一条直线上,坐标是x1,...,xN (0<=xi<=1,000,000 ...
- CSS2.1(布局)
浏览器内核 Firefox : geckoIE: tirdentSafari: webkitChrome: 一开始使用webkit 后来基于webkit开发了Blinkopera: 一开始使用pres ...
- VS Code在本地进行调试和打开本地服务器
进行本地调试 1.在扩展中搜索插件 Debugger for Chrome 进行安装.我已经进行了安装,就没有出现安装字样. 2.配置launch.json文件,根据步骤来.file就是你在浏览器中需 ...
- Android的SQLite的增删查改
原创作品,允许转载,转载时请务必声明作者信息和本声明.http://www.cnblogs.com/zhu520/p/8343675.html 本人小白,那个大神看到有问题可指出,谢谢.... 一:s ...
- 【转】python的zipfile压缩、解压缩
网上搜索了很多关于python的zipfile压缩.解压缩.觉得讲述比较详细,例子也很明了.由于比较懒,就直接复制了. 以下内容大部分转于 http://blog.csdn.net/jgood/art ...
- SQL两表之间:依据一个表的字段更新还有一个表的字段
1. 写法轻松.更新效率高: update table1 set field1=table2.field1, field2=table2.field2 from table2 where table1 ...
- jquery20--animate() : 运动的方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 关于jquery的事件命名空间
在多人协作的前端开发中,或许会遇到一个问题:几个开发人员都给一个元素添加了同样的事件,但是又有开发人员想要解除掉元素身上的某个事件效果,这时候操作起来就有些麻烦,需要用到jquery给我们提供的事件命 ...