正文

Recoil & React official state management

IP云
IP云V管理员/0 阅读
09/03
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Recoil & React official state management

Redux

Recoil.js

https://recoiljs.org/

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的更多相关文章

  1. angular2 学习笔记 &lpar; 状态管理 state management &rpar;

    更新 : 2017-12-29  ng5 移除 zone.js https://zhuanlan.zhihu.com/p/29577461 zone 的用途就是拦截游览器事件, 比如 click, a ...

  2. Web前端的状态管理（State Management）

    背景 我相信很多朋友跟我一样,初次听到什么Flux, Redux, Vuex,状态管理的时候是一脸懵逼的.因为在外面之前前端大部分开发的时候,根本没有那么多的概念.自从ReactJS火爆后,什么Flu ...

  3. State management（状态管理）

    State management https://en.wikipedia.org/wiki/State_management UI控件的状态管理, 例如按钮的灰化.只读.显示隐藏等. 特殊地一个控件 ...

  4. react 中state与props

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

  5. &period;NET：CLR via C&num; Exceptions and State Management

    重点学习的个概念 unhandled exceptions constrained execution regions code contracts runtime wrapped exception ...

  6. &lbrack;React&rsqb; Update State in React with Ramda&&num;39&semi;s Evolve

    In this lesson we'll take a stateful React component and look at how we can refactor our setState ca ...

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

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

  8. React&colon;Lifting State Up

    在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的.在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西.只是 ...

  9. React &amp&semi; update state with props &amp&semi; Object&period;assign

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

随机推荐

  1. 使用BusyBox制作根文件系统【转】

    本文转载自:http://www.cnblogs.com/lidabo/p/5300180.html 1.BusyBox简介 BusyBox 是很多标准 Linux 工具的一个单个可执行实现.Busy ...

  2. android 设置默认启动network mode

    network mode常见类型 WCDMA preferred : 0 GSM only : 1 WCDMA only : 2 GSM UMTS : 3 CDMA : 4 ... (参考RILCon ...

  3. RobotFramework自动化测试框架-移动手机自动化测试Open Application关键字的使用

    在AppiumLibrary库中,Open Application关键字用来打开一个待测试移动APP. 示例1:连接本机已经打开的appium服务端,打开一个待测试的安卓APP,指定测试平台为Andr ...

  4. jquery checkbox radio 标签 选中的3种方法

    张映 发表于 2013-07-16 分类目录: js/jquery 标签:checkbox, jquery, radio, 选中 jquery 很灵活,checkbox radio标签选中的方法有很多 ...

  5. Spinner的简单使用

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  6. OpenCV&lowbar;&lowbar;type&lpar;&rpar;返回的数字

    OpenCV中的类型以宏定义的形式给出 type_c.h中片段 #define CV_CN_MAX 512 #define CV_CN_SHIFT 3 #define CV_DEPTH_MAX (1 ...

  7. makefile 中 foreach

    四.foreach 函数 foreach函数和别的函数非常的不一样.因为这个函数是用来做循环用的,Makefile中的foreach函数几乎是仿照于Unix标准Shell(/bin/sh)中的for语 ...

  8. PowerShell管理SCOM2007R2

    get-operationsmanagercommand #定义RMS服务器名称(SCOM管理控制台所在服务器名称)#Connect to the RMS server and initialize ...

  9. Smarty中section的使用

     在smarty的使用过程中,有很多时候需要将一个数组输出到模板中来处理,以下将演示如何将一个索引(index)数组和关联(assocaite)数组在页面中展现出来. 本文中假设有如下一个索引数组 1 ...

  10. kali配置ip&comma;更新源&comma;更新签名

    以下是我在简单玩kali时候碰到的一些问题,然后找到的解决办法,能成功解决我当时碰到的问题,如果你有疑问或者碰到不能解决的问题可以在下面评论 ############################# ...