In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolvefunction to make our updater function a reusable utility that isn't tied to the React API.

//@flow

import React from 'react';
import {inc, dec, lensProp, over, evolve, multiply} from 'ramda'; // Using Lense
const countLens = lensProp('count');
const increase = over(countLens, inc);
const decrease = over(countLens, dec);
const doubleCount = evolve({count: multiply(2)}); export default class Counter extends React.Component { state = {
count: 0
}; increase = () => this.setState(increase); decrease = () => this.setState(decrease); double = () => this.setState(doubleCount); render() {
return (
<div>
<button onClick={this.increase}>+</button>
{this.state.count}
<button onClick={this.decrease}>-</button>
<button
disabled={this.state.count === 0}
onClick={this.double}
>*2</button>
</div>
);
} }

[React] Update State in React with Ramda's Evolve的更多相关文章

  1. React & update state with props & Object.assign

    React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...

  2. [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

    getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...

  3. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  4. [React] Update Component State in React With Ramda Lenses

    In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. ...

  5. [React Native] State and Touch Events -- TextInput, TouchableHighLight

    In React, components manage their own state. In this lesson, we'll walk through building a component ...

  6. [React] React Fundamentals: State Basics

    State is used for properties on a component that will change, versus static properties that are pass ...

  7. React中state与props介绍与比较

    一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...

  8. [Mobx] Using mobx to isolate a React component state

    React is great for diffing between Virtual-DOM and rendering it to the dom. It also offers a naïve s ...

  9. React给state赋值的两种写法

    如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...

随机推荐

  1. 1.java soap api操作和发送soap消息

    转自:https://blog.csdn.net/lbinzhang/article/details/84721359 1. /** * soap请求 * * @return * @throws Ex ...

  2. ELK之日志查询、收集与分析系统

    项目由来 (1)开发人员不能登录线上服务器查看详细日志,经过运维周转费时费力 (2)日志数据分散在多个系统,难以查找与整合 (3)日志数据量巨大,查询速度太慢,无法满足需求 (4)无法全局掌控项目运行 ...

  3. Ajax : $. get()和$.post() $.getScript $.getJSON

    <body> <input type="button" value="Ajax" /> <div id="box&quo ...

  4. [MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试

    原贴:http://imysql.cn/node/313 [MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试 周二, 2007/06/19 - 22:10 - yejr ...

  5. 洛谷 P1626 象棋比赛

    P1626 象棋比赛 题目描述 有N个人要参加国际象棋比赛,该比赛要进行K场对弈.每个人最多参加两场对弈,最少参加零场对弈.每个人都有一个与其他人不相同的等级(用一个正整数来表示). 在对弈中,等级高 ...

  6. 2.1 使用eclipse4.4 搭建 maven简单结构项目。

    1.前言 1.本博客面向0基础开发人员. 2.本博客为系列博客.<1.X>系列为服务器数据库相关技术,前几章为简单搭建linux+tomcat+mysql+nginx+redis.< ...

  7. VPS 的 CentOS6 升级 Python 的方法

    VPS 的 CentOS6 升级 Python 的方法 centos默认安装python2.6.由于python和centos关联紧密,所以不建议卸载,进行编译升级 1.新开的VPS务必系统更新 yu ...

  8. 1.1 Introduction中 Putting the Pieces Together官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Putting the Pieces Together 拼在一起 This comb ...

  9. Windows Forms 窗体篇

    1,显示窗体 非模式: Form form = new Form(); form.Show(); 模式: Form form = new Form(); form.Show(); 2,拥有者窗体与附属 ...

  10. MyBatis学习总结(14)——Mybatis使用技巧总结

    1. 区分 #{} 和 ${}的不同应用场景 1)#{} 会生成预编译SQL,会正确的处理数据的类型,而${}仅仅是文本替换. 对于SQL: select * from student where x ...