38_redux_counter应用_react版本
redux的核心API
使用非redux创建:
项目结构:
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/app'; ReactDOM.render(<App/>, document.getElementById('root'));
app.jsx
import React, {Component} from 'react' export default class App extends Component { state = { count: 0 }; increment = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.得到原本的count状态 const count = this.state.count; //3.更新状态 this.setState({count: count + number}); }; decrement = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.得到原本的count状态 const count = this.state.count; //3.更新状态 this.setState({count: count - number}); }; incrementIfOdd = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.得到原本的count状态 const count = this.state.count; //3.判断,满足条件再更新状态 if (count % 2 === 1) { //更新状态 this.setState({count: count + number}) } }; incrementAsync = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.得到原本的count状态 const count = this.state.count //启动延时定时器 setTimeout(() => { this.setState({count: count + number}) }, 1000) }; render() { const {count} = this.state return ( <div> <p>click {count} times</p> <div> <select ref={select => this.select = select}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>increment</button> <button onClick={this.incrementAsync}>increment async</button> </div> </div> ) } }
38_redux_counter应用_react版本的更多相关文章
- React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...
- 【AR实验室】OpenGL ES绘制相机(OpenGL ES 1.0版本)
0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...
- ABP入门系列(2)——通过模板创建MAP版本项目
一.从官网创建模板项目 进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2015打开项目,还原Nuget包: 设置以Web结尾的项目,设置为启动项目: 打 ...
- 理解Maven中的SNAPSHOT版本和正式版本
Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...
- MIP 官方发布 v1稳定版本
近期,MIP官方发布了MIP系列文件的全新v1版本,我们建议大家尽快完成升级. 一. 我是开发者,如何升级版本? 对于MIP页面开发者来说,只需替换线上引用的MIP文件为v1版本,就可以完成升级.所有 ...
- 终于等到你:CYQ.Data V5系列 (ORM数据层)最新版本开源了
前言: 不要问我框架为什么从收费授权转到免费开源,人生没有那么多为什么,这些年我开源的东西并不少,虽然这个是最核心的,看淡了就也没什么了. 群里的网友:太平说: 记得一年前你开源另一个项目的时候我就说 ...
- DBImport V3.7版本发布及软件稳定性(自动退出问题)解决过程分享
DBImport V3.7介绍: 1:先上图,再介绍亮点功能: 主要的升级功能为: 1:增加(Truncate Table)清表再插入功能: 清掉再插,可以保证两个库的数据一致,自己很喜欢这个功能. ...
- Windows 7上执行Cake 报错原因是Powershell 版本问题
在Windows 7 SP1 电脑上执行Cake的的例子 http://cakebuild.net/docs/tutorials/getting-started ,运行./Build.ps1 报下面的 ...
- 通过Jexus 部署 dotnetcore版本MusicStore 示例程序
ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...
随机推荐
- python-闭包函数
在函数编程中经常用到闭包.闭包是什么,它是怎么产生的及用来解决什么问题呢.给出字面的定义先:闭包是由函数及其相关的引用环境组合而成的实体(即:闭包=函数+引用环境)(想想Erlang的外层函数传入一个 ...
- springboot2.0 springcloud 断路器仪表盘支持
springboot 1.5 的时候 springcloud 添加 断路器仪表盘 按照网上的方法是没有问题的 但是 springboot2.0的时候一直无法连接 所以需要添加 @Beanpubl ...
- 解决STM32 I2C接口死锁在BUSY状态的方法讨论
关于STM32的I2C接口死锁在BUSY状态无法恢复的现象,网上已有很多讨论,看早几年比较老的贴子,有人提到复位MCU也无法恢复.只有断电才行的状况,那可是相当严重的问题.类似复位也无法恢复的情况是存 ...
- 关于memset的错误使用
我们在使用memset进行初始化的时候,经常会使用这种方式,memset(a,0,sizeof(a)),这让我们误以为将其初始化其他值也可以,实际是错误的. void print_arr(unsign ...
- DiscuzX /source/function/function_core.php通用核心函数库文件分析
... <?php /** * [Discuz!] (C)2001-2099 Comsenz Inc. * This is NOT a freeware, use is subject to l ...
- HttpURLConnection 传输数据和下载图片
一.传输字符串数据 在Android中HttpURLConnection传输数据是必不可少的,我们继续在“AsyncTask(异步任务)”案例的基础上添加. 案例: 首先我们做一个jsp的服务端,文件 ...
- kong api可视化管理工具konga安装
说明:官网推荐: kong-dashboard,但对比界面高端程度和友好度,更推荐konga.[一个坑]kong版本问题:我在安装时目前kong最新版本已经到1.0.0, 对于konga和kong-d ...
- Scrapy实战篇(九)之爬取链家网天津租房数据
以后有可能会在天津租房子,所以想将链家网上面天津的租房数据抓下来,以供分析使用. 思路: 1.以初始链接https://tj.lianjia.com/zufang/rt200600000001/?sh ...
- python with as的用法
With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作.对于这种场景,Python的with语句提供了一种非常方便的处理方式.一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中读取 ...
- 巨坑– 膜BWV543
我不是一个喜欢膜别人的人,我从来都不擅长去夸奖.当面对巴赫的作品时,我发现我的敬佩难以用语言表达.我决定用另一种方式来表达我的欣赏,那就是分析并背下这个谱子. http://music.163.com ...