Recoil & React official state management
Recoil & React official state management
Redux
Recoil.js
A state management library for React
$ npx create-react-app my-app
$ npm init react-app my-app
$ yarn create react-app my-app
$ yarn add recoil
https://github.com/facebook/create-react-app#creating-an-app
RecoilRoot
import React from 'react';
import {
RecoilRoot,
atom,
selector,
useRecoilState,
useRecoilValue,
} from 'recoil';
function App() {
return (
<RecoilRoot>
<CharacterCounter />
</RecoilRoot>
);
}
Atom
const textState = atom({
key: 'textState', // unique ID (with respect to other atoms/selectors)
default: '', // default value (aka initial value)
});
function CharacterCounter() {
return (
<div>
<TextInput />
<CharacterCount />
</div>
);
}
function TextInput() {
const [text, setText] = useRecoilState(textState);
const onChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={onChange} />
<br />
Echo: {text}
</div>
);
}
Selector
const charCountState = selector({
key: 'charCountState', // unique ID (with respect to other atoms/selectors)
get: ({get}) => {
const text = get(textState);
return text.length;
},
});
function CharacterCount() {
const count = useRecoilValue(charCountState);
return <>Character Count: {count}</>;
}
refs
https://mp.weixin.qq.com/s/EWcTOB08oU96OcQ-41FbPA
Recoil === 畏缩 / 后坐力
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Recoil & React official state management的更多相关文章
- angular2 学习笔记 ( 状态管理 state management )
更新 : 2017-12-29 ng5 移除 zone.js https://zhuanlan.zhihu.com/p/29577461 zone 的用途就是拦截游览器事件, 比如 click, a ...
- Web前端的状态管理(State Management)
背景 我相信很多朋友跟我一样,初次听到什么Flux, Redux, Vuex,状态管理的时候是一脸懵逼的.因为在外面之前前端大部分开发的时候,根本没有那么多的概念.自从ReactJS火爆后,什么Flu ...
- State management(状态管理)
State management https://en.wikipedia.org/wiki/State_management UI控件的状态管理, 例如按钮的灰化.只读.显示隐藏等. 特殊地一个控件 ...
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
- .NET:CLR via C# Exceptions and State Management
重点学习的个概念 unhandled exceptions constrained execution regions code contracts runtime wrapped exception ...
- [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 ca ...
- React给state赋值的两种写法
如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...
- React:Lifting State Up
在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的.在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西.只是 ...
- React & update state with props & Object.assign
React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...
随机推荐
- Intellij idea 报错:Error : java 不支持发行版本5
保证下面几个地方编译版本一致: 分两步: 第一步,进入Project Structure中设置Project JDK 以及Project Level ,高于JDK5版本 第二步,进入设置中将项目的JD ...
- UNIX DOMAIN SOCKETS IN GO unix域套接字
Unix domain sockets in Go - Golang News https://golangnews.org/2019/02/unix-domain-sockets-in-go/ pa ...
- 小步前进之WebService
WebService Web Service 什么是Web Service? 为什么使用Web Service XML 什么是XML? 为什么使用XML? SOAP(Simple Object Acc ...
- FridaHook框架学习(1)
FridaHook框架学习(1) 前言 本次学习过程参考https://bbs.pediy.com/thread-227232.htm Frida安装与使用 Windows端安装 pip instal ...
- linux系统rpm和yum软件包管理
软件安装方式总结 安装软件方式有如下几种: 方式1:编译安装 将源码程序按照需求进行先编译,后安装 缺点:装过程复杂,而且很慢 优点:安装过程可控,真正的按需求进行安装(安装位置.安装的模块都可以选择 ...
- 【STM32】PWM波中的时间问题
我们使用的TIM3定时器是挂载在APB1总线上的,APB1总线的时钟频率为72MHz. APB1总线的时钟频率通过PSC寄存器预分频,得到的频率为(72/(71+1))=1MHz. 定时器的自动重装载 ...
- Git轻松入门3:远程仓库篇
在第一讲中,我们有介绍过:Git是分布式版本控制系统.每个人的电脑上都有一份完整的版本库.当对项目作出了修改后,只要把修改推送给对方即可.但很有可能的情况是:两台电脑不在一个局域网内,无法互相访问:或 ...
- 从微信小程序到鸿蒙js开发【05】——tabs组件&每日新闻
目录: 1.tabs, tab-bar, tab-content 2.tabs的事件处理 3.tabs实现的每日新闻 1.tabs, tab-bar, tab-content 上章说到,鸿蒙的list ...
- POJ 2195 & HDU 1533 Going Home(最小费用最大流)
这就是一道最小费用最大流问题 最大流就体现到每一个'm'都能找到一个'H',但是要在这个基础上面加一个费用,按照题意费用就是(横坐标之差的绝对值加上纵坐标之差的绝对值) 然后最小费用最大流模板就是再用 ...
- 活动精彩实录 | 阿里云刘军民(米诺):Cassandra中文社区年度回顾
点击这里观看完整视频 大家好,我是刘军民,我是阿里云数据库的产品经理,目前负责云数据库的产品规划以及相关工作.曾在2019年和多位小伙伴一起发起了中文社区,我希望有更多的小伙伴能加入到社区建设中,这样 ...