import React from 'react'

class Demo extends React.Component{
constructor(props){
super(props)
this.state={count:1}
this.handleClick=this.handleClick.bind(this)
}
handleClick(){
this.setState({count:this.state.count+1})
}
shouldComponentUpdate(){
if(this.state.count%5==0){ return true
}
return false
}
render(){
return (
<div>
{this.state.count}<br />
<button onClick={this.handleClick}>点击</button>
</div> )
}
}
export default Demo

只有当count等于5时,视图上才会更新数据

react之shouldComponentUpdate简单定制数据更新的更多相关文章

  1. react UI交互 简单实例

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  2. 【Python044--魔法方法:简单定制】

    一.简单定制 基本要求: -- 定制一个计时器的类 -- start和stop代表开始计时和停止计时 -- 假设计时器对象t1,print(t1)和直接调用t1均显示结果 -- 当计时器未启动或停止计 ...

  3. React的一个简单示例

    首发:个人博客,更新&纠错&回复 React的核心是定义组件类,组件有三个要素:状态.行为.界面. 1.渲染状态到界面:状态由组件对象的state属性持有,从状态到界面的渲染工作由组件 ...

  4. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  5. 混合开发的大趋势之一React Native之简单的登录界面

    转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...

  6. TypeScript + React + Redux 实战简单天气APP全套完整项目

    下载链接:https://www.yinxiangit.com/171.html 目录: 从面向过程的js到面向对象的js,让web前端更加高大尚.让你的前端步步日上,紧跟技术发展的前沿.让你构建更加 ...

  7. react做的简单的选项卡

    ### 首先安装react的脚手架 cnpm    install   create-react-app   -g    只需要在电脑下载安装一次即可  ###创建项目 create-react-ap ...

  8. react做的简单的购物车

    ###第一步 :首先电脑上已经安装react的脚手架 cnpm  install    create-react-app   -g ###第二步 :创建项目 creact-react-app   项目 ...

  9. react入门及简单配置

    直接script引入的不说了 1.npm i -g create-react-app 2.create-react-app my-app (其中my-app为项目名称) 3.进入项目cd my-app ...

随机推荐

  1. (string find) 亲和串 hdu2203

    亲和串 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  2. 【tools】vim删除命令

    x 删除当前光标下的字符dw 删除光标之后的单词剩余部分.d$ 删除光标之后的该行剩余部分.dd 删除当前行. c 功能和d相同,区别在于完成删除操作后进入INSERT MODEcc 也是删除当前行, ...

  3. ubuntu14.04上java jdk & mvn安装

    这些常用工具的安装步骤还是自己记录下,以后再次用到时就会方便许多. 系统:ubuntu14.04 jdk安装. 1.从官网下载好jdk安装包 jdk-8u111-linux-x64.tar.gz 2. ...

  4. 对于nginx配置文件中的fastcgi_param的配置错误

    在centos中搭建LNMP的时候,遇到了一个问题 在浏览器中访问.php文件的时候,nginx不能正常解析,页面返回404,后来百度了一下,发现了问题 在nginx的配置文件nginx.conf中的 ...

  5. Elasticsearch入门篇

    推荐博客: 阮一峰大神:http://www.ruanyifeng.com/blog/2017/08/elasticsearch.html ElasticSearch 权威指南(中文版):https: ...

  6. vue中extend/component/mixins/extends的区别

    vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸

  7. IoC之Ninject

    一.Ninject安装 Ninject是一个轻量级的开源的DI容器,可以通过Nuget直接安装: 二.Ninject的简单使用 模型代码: //计算器接口 public interface ICalc ...

  8. UVALive 7143 Room Assignment(组合数学+DP)

    题目链接 参考自:http://www.cnblogs.com/oyking/p/4508260.html 题意 n个人,其中有k对双胞胎.现有m间房间,每间房间有容量ci问分配房间的方案数. 分析 ...

  9. "飞机大战"游戏_Java

    1 package cn.xiaocangtian.Util; import java.awt.Frame; import java.awt.Graphics; import java.awt.Ima ...

  10. .Net进阶系列(11)-异步多线程(委托BeginInvoke)(被替换)

    一. BeginInvoke最后两个参数的含义 倒数第二个参数:指该线程执行完毕后的回调函数:倒数第一个参数:可以向回调函数中传递参数. 下面以一段代码说明: /// <summary> ...