[React] Update State in React with Ramda's Evolve
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 evolve
function 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的更多相关文章
- React & update state with props & Object.assign
React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...
- [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 ...
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- [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. ...
- [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 ...
- [React] React Fundamentals: State Basics
State is used for properties on a component that will change, versus static properties that are pass ...
- React中state与props介绍与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- [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 ...
- React给state赋值的两种写法
如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...
随机推荐
- H5+混合移动app
H5+混合移动app 前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多.... ...
- 淘宝的css初始化代码
;; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h ...
- 企业网管软件实战之看视频学装Cisco Works 2000
650) this.width=650;" border="0" alt="125711349.jpg" src="http://img1. ...
- Spring源码分析专题 —— 阅读指引
阅读源码的意义 更深入理解框架原理,印象更深刻 学习优秀的编程风格.编程技巧.设计思想 解决实际问题,如修复框架中的bug,或是参考框架源码,结合实际业务需求编写一个独有的框架 阅读源码的方法 首先是 ...
- 解决ListCtrl控件第一列文字不能居中显示的问题/修改网格线
把CListCtrl设置为Report风格,但是插入第一列的时候(InsertColumn)的时候会发现文字不能居中.即使使用了LVCFMT_CENTER,其他列都可以正常居中,但第一列仍然靠左显示. ...
- Method of address space layout randomization for windows operating systems
A system and method for address space layout randomization ("ASLR") for a Windows operatin ...
- 洛谷——P3819 松江1843路
https://www.luogu.org/problem/show?pid=3819 题目描述 涞坊路是一条长L米的道路,道路上的坐标范围从0到L,路上有N座房子,第i座房子建在坐标为x[i]的地方 ...
- java位运算应用
位移动运算符: <<表示左移, 左移一位表示原来的值乘2. 比如:3 <<2(3为int型) 1)把3转换为二进制数字0000 0000 0000 0000 0000 000 ...
- Qt之模型/视图(自己定义button)
简述 衍伸前面的章节,我们对QTableView实现了数据显示.自己定义排序.显示复选框.进度条等功能的实现.本节主要针对自己定义button进行解说.这节过后,也希望大家对自己定义有更深入的了解.在 ...
- vue 自定义分页组件
vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...