[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 ...
随机推荐
- aui-dialog改造,支持关闭
1.打开aui-dialog.js 添加关闭html代码 var headerHtml = params.title ? '<div class="aui-dialog-header ...
- C#中如何获得两个日期之间的天数差 ( c# 计算两个日期之间相差的天数 )
DateTime dtLast = new DateTime(Convert.ToInt32(LastMenses.Year), Convert.ToInt32(LastMenses.Month), ...
- excel2007去掉方括号及里面的
获取括号外面的 b2=LEFT(A1,FIND("[",A1)-1) 获取括号里面的 =MID(A2,FIND("(",A2)+1,(FIND(")& ...
- 光纤收发器TR-962D/932D的面板指示灯及开关代表的含义?
指示灯含义说明:POWER(绿色):“常亮”表明光纤收发器处于通电状态:LFP指示灯: “常亮”表明LFP功能开启,“常灭”表示LFP功能关闭:FX_LINK/ACT(绿色):“常亮”表明光纤端口连接 ...
- 在Windows上如何安装和彻底卸载Adobe Flash Player教程
很多小伙伴在安装水晶易表的时候,经常会遇到“Xcelsius2008需要使用Adobe Flash Player(9.151或者更高版本)”报错问题,如下图所示. 导致安装进程受阻,此时就需要安装高版 ...
- MySQL Pool
创建连接池 function SqlPool() { this.flag = true;//是否连接过 this.pool = mysql.createPool({ host : 'localhost ...
- 学习《Python金融实战》中文版PDF+英文版PDF+源代码
学习python处理金融数据,建议学习<Python金融实战>,比较实用,只不过Yahoo财经的API改了,书里的方法不再有效要改一改,还有就是会有一些代码缩进小问题,总体上对金融分析很实 ...
- openfire 开发遇到的些问题
openfire的 jid 账户名 + '@" + 你的域名 可是当你的账户名中 有大拼音的 时候 就会变成小写 比如 Test , jid = tes ...
- Android简单实现Socket通信,client连接server后,server向client发送文字数据
案例实现的是简单的Socket通信,当client(Androidclient)连接到指定server以后,server向client发送一句话文字信息(你能够拓展其他的了) 先看一下服务端程序的实现 ...
- Kinect 开发 —— 引言
自然人机交互设计技术 (全息三维投影,手势肢体识别,眼动跟踪 ...) 符合人类心理的交互方式 自然用户界面 —— Natural User Interface 有机用户界面 —— Organic U ...