[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) ...
随机推荐
- 洛谷 P1032 字符变换
洛谷 P1032 字符变换 题目描述 已知有两个字串 A,B 及一组字串变换的规则(至多 6 个规则): A1 -> B1 A2 -> B2 规则的含义为:在 A 中的子串 A1 ...
- 【Codeforces Round #429 (Div. 2) A】Generous Kefa
[Link]:http://codeforces.com/contest/841/problem/A [Description] [Solution] 模拟,贪心,每个朋友尽量地多给气球. [Numb ...
- 上传excel数据到数据库中
上传excel表格数据到数据库 导入固定路径下的excel数据到数据库 <form id="disposeFlightDataForm" action="../up ...
- ASP.Net MVC Filter验证用户登录
一.Filter是什么 ASP.NetMVC模式自带的过滤器Filter,是一种声明式编程方式,支持四种过滤器类型,各自是:Authorization(授权),Action(行为),Result(结果 ...
- CView::OnPreparePrinting
http://technet.microsoft.com/zh-cn/subscriptions/a59dff1e(v=vs.71).aspx CView::OnPreparePrinting Cal ...
- How to Rotate Tomcat catalina.out
If catalina.out becomes 2GB in size, tomcat crashes and fails to start without any error message. To ...
- Nginx分发服务
nginx配置分发tomcat服务 http://blog.csdn.net/yan_chou/article/details/53265775 http://www.cnblogs.com/deng ...
- 洛谷——P1179 数字统计
https://www.luogu.org/problem/show?pid=1179 题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 ...
- (转) 设置sqlplus中的退格键
转自:http://blog.itpub.net/26110315/viewspace-717249/ 有些时候当你使用sqlplus登录到数据库中的时候,敲错了命令想要删除修改的时候,发现以前敲入的 ...
- 11.4 Android显示系统框架_APP与SurfaceFlinger内部机制分析
4.1 APP跟SurfaceFlinger之间的重要数据结构 一个应用程序有一个或者多个surface(一般只有一个),一个surface有一个或者多个buffer,这些buffer需要应用向sur ...