首页 > TAG信息列表 > Recoil
React-Redux、Recoil、useContext 做个简单的对比
关注公众号： 微信搜索 前端工具人 ; 收货更多的干货 文章来源： 自己掘金文章 https://juejin.cn/post/7073035305430810637/ React 生态丰富衍生了许多 状态管理 轮子； 开发时如何选择状态管理，也有些犯难； 在这把我所理解的、项目中用到过的（React-Redux, Recoil, useContext）做个简单的Facebook 新一代 React 状态管理库 Recoil
Facebook 新一代 React 状态管理库 Recoil 抖音前端安全 2020年10月09日 13:50 · 阅读 15495 关注 ConardLife @ 字节跳动（大量HC 欢迎来撩） 在 React Europe 2020 Conference 上， Facebook 软件工程师 Dave McCabe 介绍了一个新的状态管理库 Recoil。 Recoil如何在recoil中主动刷新seloctor中缓存的值
假设一个很常见的应用场景：有一个用户未读消息列表，我们希望在某一时刻主动刷新这个列表。 我们使用seloctor来实现这个功能： const uuid = () => Math.random(); // 生成一个唯一的id即可 const forceUpdateState = atom({ key: "forceUpdateState", default: uuid(), }); conRecoil 中多级数据联动及数据重置的合理做法
前情回顾 书接上回，前面引出了在数据存在级联的情况下，各下拉框之间的默认值及值变化的处理。简单回顾一下： 场景是： 地域下拉决定可选的可用区 默认选中第一个地域，通过设置 atom 的 default 字段 默认选中该地域下第一个可用区，通过设置 atom 的 default 字段 问题： 手动选择一Recoil 默认值及数据级联的使用
Recoil 中默认值及数据间的依赖 通过 Atom 可方便地设置数据的默认值， const fontSizeState = atom({ key: 'fontSizeState', default: 14, }); 而 Selector 可方便地设置数据的级联依赖关系，即，另一个数据可从现有数据进行派生。 const fontSizeLabelState = selector({Recoil 的使用
通过简单的计数器应用来展示其使用。先来看没有 Recoil 时如何实现。 首先创建示例项目 $ yarn create react-app recoil-app --template typescript 计数器 考察如下计数器组件： Counter.tsx import React, { useState } from "react"; export const Counter = () => {