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>&nbsp;
                    <button onClick={this.increment}>+</button>
                    &nbsp;
                    <button onClick={this.decrement}>-</button>
                    &nbsp;
                    <button onClick={this.incrementIfOdd}>increment</button>
                    &nbsp;
                    <button onClick={this.incrementAsync}>increment async</button>
                    &nbsp;
                </div>
            </div>
        )
    }
}

38_redux_counter应用_react版本的更多相关文章

  1. React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...

  2. 【AR实验室】OpenGL ES绘制相机(OpenGL ES 1.0版本)

    0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...

  3. ABP入门系列(2)——通过模板创建MAP版本项目

    一.从官网创建模板项目 进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2015打开项目,还原Nuget包: 设置以Web结尾的项目,设置为启动项目: 打 ...

  4. 理解Maven中的SNAPSHOT版本和正式版本

    Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...

  5. MIP 官方发布 v1稳定版本

    近期,MIP官方发布了MIP系列文件的全新v1版本,我们建议大家尽快完成升级. 一. 我是开发者,如何升级版本? 对于MIP页面开发者来说,只需替换线上引用的MIP文件为v1版本,就可以完成升级.所有 ...

  6. 终于等到你:CYQ.Data V5系列 (ORM数据层)最新版本开源了

    前言: 不要问我框架为什么从收费授权转到免费开源,人生没有那么多为什么,这些年我开源的东西并不少,虽然这个是最核心的,看淡了就也没什么了. 群里的网友:太平说: 记得一年前你开源另一个项目的时候我就说 ...

  7. DBImport V3.7版本发布及软件稳定性(自动退出问题)解决过程分享

    DBImport V3.7介绍: 1:先上图,再介绍亮点功能: 主要的升级功能为: 1:增加(Truncate Table)清表再插入功能: 清掉再插,可以保证两个库的数据一致,自己很喜欢这个功能. ...

  8. Windows 7上执行Cake 报错原因是Powershell 版本问题

    在Windows 7 SP1 电脑上执行Cake的的例子 http://cakebuild.net/docs/tutorials/getting-started ,运行./Build.ps1 报下面的 ...

  9. 通过Jexus 部署 dotnetcore版本MusicStore 示例程序

    ASPNET Music Store application 是一个展示最新的.NET 平台(包括.NET Core/Mono等)上使用MVC 和Entity Framework的示例程序,本文将展示 ...

随机推荐

  1. python-闭包函数

    在函数编程中经常用到闭包.闭包是什么,它是怎么产生的及用来解决什么问题呢.给出字面的定义先:闭包是由函数及其相关的引用环境组合而成的实体(即:闭包=函数+引用环境)(想想Erlang的外层函数传入一个 ...

  2. springboot2.0 springcloud 断路器仪表盘支持

    springboot 1.5 的时候  springcloud 添加 断路器仪表盘  按照网上的方法是没有问题的  但是 springboot2.0的时候一直无法连接 所以需要添加 @Beanpubl ...

  3. 解决STM32 I2C接口死锁在BUSY状态的方法讨论

    关于STM32的I2C接口死锁在BUSY状态无法恢复的现象,网上已有很多讨论,看早几年比较老的贴子,有人提到复位MCU也无法恢复.只有断电才行的状况,那可是相当严重的问题.类似复位也无法恢复的情况是存 ...

  4. 关于memset的错误使用

    我们在使用memset进行初始化的时候,经常会使用这种方式,memset(a,0,sizeof(a)),这让我们误以为将其初始化其他值也可以,实际是错误的. void print_arr(unsign ...

  5. DiscuzX /source/function/function_core.php通用核心函数库文件分析

    ... <?php /** * [Discuz!] (C)2001-2099 Comsenz Inc. * This is NOT a freeware, use is subject to l ...

  6. HttpURLConnection 传输数据和下载图片

    一.传输字符串数据 在Android中HttpURLConnection传输数据是必不可少的,我们继续在“AsyncTask(异步任务)”案例的基础上添加. 案例: 首先我们做一个jsp的服务端,文件 ...

  7. kong api可视化管理工具konga安装

    说明:官网推荐: kong-dashboard,但对比界面高端程度和友好度,更推荐konga.[一个坑]kong版本问题:我在安装时目前kong最新版本已经到1.0.0, 对于konga和kong-d ...

  8. Scrapy实战篇(九)之爬取链家网天津租房数据

    以后有可能会在天津租房子,所以想将链家网上面天津的租房数据抓下来,以供分析使用. 思路: 1.以初始链接https://tj.lianjia.com/zufang/rt200600000001/?sh ...

  9. python with as的用法

    With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作.对于这种场景,Python的with语句提供了一种非常方便的处理方式.一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中读取 ...

  10. 巨坑– 膜BWV543

    我不是一个喜欢膜别人的人,我从来都不擅长去夸奖.当面对巴赫的作品时,我发现我的敬佩难以用语言表达.我决定用另一种方式来表达我的欣赏,那就是分析并背下这个谱子. http://music.163.com ...