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的更多相关文章

  1. React的setState分析

    前端框架层出不穷,不过万变不离其宗,就是从MVC过渡到MVVM.从数据映射到DOM,angular中用的是watcher对象,vue是观察者模式,react就是state了. React通过管理状态实 ...

  2. React中setState 什么时候是同步的,什么时候是异步的?

    class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...

  3. React的setState执行机制

    1. setState基本特点 1. setState是同步执行的 setState是同步执行的,但是state并不一定会同步更新 2. setState在React生命周期和合成事件中批量覆盖执行 ...

  4. React中setState同步更新策略

    setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...

  5. 初学React,setState后获取到的thisstate没变,还是初始state?

    问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: getInitialState(){ return {data:[]}; } ...

  6. React中setState学习总结

    react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...

  7. React的setState学习及应用

    React的setState学习及应用 一:作用: setState() 将对组件 state 的更改排入队列,并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件.这是用于更新 ...

  8. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...

  9. React中setState方法说明

    setState跟新数据是同步还是异步? setState跟新数据是异步的. 如何用代码表现出来是异步的. 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Fa ...

随机推荐

  1. C#中如何获得两个日期之间的天数差 ( c# 计算两个日期之间相差的天数 )

    DateTime dtLast = new DateTime(Convert.ToInt32(LastMenses.Year), Convert.ToInt32(LastMenses.Month), ...

  2. OpenSUSE42.3 leap 开启ssh登陆

    一.产看ssh是否安装 OpenSUSE:~ # rpm -qa | grep ssh libssh2-1-1.4.3-18.3.x86_64openssh-askpass-1.2.4.1-12.1. ...

  3. react-native flatlist setState修改数据视图不刷新解决方案

    给flatlist添加属性:handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems) ...

  4. SWFupload多图片上传入门教程

    本文为转载内容,但所讲内容亲身试验证明可用,转载过来希望能帮助到有需要的人. 转载地址:http://blog.csdn.net/kongjiea/article/details/24290373#c ...

  5. CSUOJ 1541 There is No Alternative

    There is No Alternative Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on Aiz ...

  6. spring在web.xml中的配置

    在实际项目中spring的配置文件applicationcontext.xml是通过spring提供的加载机制,自动加载的容器中去,在web项目中,配置文件加载到web容器中进行解析,目前,sprin ...

  7. 【Tika基础教程之中的一个】Tika基础教程

    一.高速入门 1.Tika是一个用于文本解释的框架.其本身并不提供不论什么的库用于解释文本,而是调用各种各样的库,如POI,PDFBox等. 使用Tika.能够提取文件里的作者.标题.创建时间.正文等 ...

  8. 彻查网络局部网段内Ping时断时续的问题

    前两天须要安装2台server,结果前期一直有问题的网络又来了,明明vlan内能ping通,可是与vlan外却ping不同. 这个现象非常像是arp病毒,于是周末的时间我们就进行了一次彻底的排查,一定 ...

  9. CodeForces 321 A - Ciel and Robot

    [题目链接]:click here~~ [题目大意]:一个robot 机器人 .能够依据给定的指令行动,给你四种指令,robot初始位置是(0,0).指令一出.robot会反复行动,推断是否能在无限行 ...

  10. OL记载Arcgis Server切片

    概述: 本文讲述怎样在OpenLayers中调用Arcgis Server切片并显示. 思路: 在OpenLayers中载入Arcgis Server切片用XYZ图层,Arcgis Server的切片 ...