V2EX › React

2022 年 react 生态，大家都用啥

yuthelloworld · yuthelloworld · 14 小时 31 分钟前 · 4004 次点击

去看了一圈 React 的生态，光状态管理就有很多库，还有自己的 useRedcuer + useContext 可以做状态管理。数据请求相关的有 React Query 。

我自己还停留在 React + Ts + Redux 这一套。奥，react-router 6 也有不少更新点。

学不动了，譬如说 Rtk, Rtk query ，光看文档都需要投入不少时间，Recoil 倒是上手挺容易的。

大家现在都用啥？或者说公司都用啥？是跟上生态脚步，还是停留在老的？

78 条回复 • 2022-05-06 00:31:51 +08:00

Heymans 14 小时 6 分钟前

antdesign 大礼包

westoy 14 小时 5 分钟前

antd, useModel 又不是不能用

dengqing 13 小时 53 分钟前

rtk 太难用了，react-query 简单易用

isukkaw 13 小时 45 分钟前 1

状态管理用 jotai 、全局状态管理用 zustand 、网络请求用 swr 、UI 用 MUI 或者 Mantine 。

statumer 13 小时 42 分钟前 via iPhone

只用 mobx 和 context ，redux + redux toolkit 我感觉真的很难用，总是要把局部组件放到全局去考虑。

hjahgdthab750 13 小时 21 分钟前

太多名词了，像我这样脑子不好使的听着就迷糊，半天下来技术没学多少，光记单词和释义了

waising 13 小时 19 分钟前

antd, react-router 6, jotai, axios

bthulu 13 小时 9 分钟前

我这里大家都用 localStorage, 浏览器自带, 贼好用, 控制台跟踪也方便

nijjba 12 小时 44 分钟前 via iPhone

use-context-selector

FrankFang128 12 小时 43 分钟前

React 就是这样，千人千面

pigspy 12 小时 40 分钟前

就用到了一个 mobx ，说实话我连 mobx 都觉得没有用的必要

yuthelloworld 12 小时 39 分钟前

还有 css 相关，less\sass\css-module 是一直在用的。用过 jss ，比较火的 tailwind 没用过

liliclinton 12 小时 33 分钟前

状态管理用 jotai ，数据请求用 swr 和 urql

yuthelloworld 12 小时 31 分钟前

@liliclinton #13 @isukkaw #4 搜了下，看起来 jotai 挺香

> Jotai 和 Recoil 概念很相似，都是采用分散管理原子状态的设计模式

所以在用法上也比较相似，但相比之下，还有以下优点

Jotai 的 API 相对 Recoil 简洁很多，并且容易使用
Jotai 不需要用 RecoilRoot 或 Provider 等组件包裹，使得结构可以更简洁
Jotai 定义 Atom 时不用提供 key
Jotai 更小巧，大小仅 2.4 kB
Jotai 对 TypeScript 的支持更好

jin5354 12 小时 27 分钟前 1

@isukkaw 好家伙 4 个词全没听过，感觉自己要下岗了

rwecho 12 小时 21 分钟前 via Android

react next.js chakra ui redux toolkit

kangyan 12 小时 8 分钟前

我用 umi 的 useModel 。

刚才看了一下 jotai ，用法的确简单，就怕和 useState 混淆

um1ng 11 小时 35 分钟前 1

怎么感觉比 vue 生态还要乱...

现在 vue3 + vite + ts + pinia 真的挺香的

Jsonz 11 小时 31 分钟前

状态管理一直用 rematch...redux 衍生物，jotai 看起来不错

yuthelloworld 11 小时 30 分钟前

@um1ng #18 vue 生态，我还停留在 vue2+vuex+vue-router

SolidZORO 11 小时 28 分钟前 via iPhone

状态管理这块。喜欢分布式就 jotai ，喜欢中心化就 valtio 。目前所有项目已从 jotai 转到 valtio ，就只为了在 jsx 之外也能拿到 state ，感觉很好。体积从 2KB 变成 6KB ，基本上可以忽略不计。

yazoox 11 小时 23 分钟前

就多使用了一个 hooks
还是 redux & redux-saga

isukkaw 11 小时 17 分钟前

@jin5354 #15 该关注关注 React 生态圈的新玩意啦。
@kangyan #16 完全不怕混淆，jotai 的 API 就是照搬 useState 设计的。如果你没有局部状态必须 useState 的洁癖的话，完全无所谓。
@SolidZORO #21 如果需要中心化状态、又喜欢 immutable 的话，可以考虑 zustand 。valtio 、jotai 同作者出品，支持 vanilla ，支持状态中间件，支持 Reducer ，最大的优势是把 state 和 action 写在一起。

yuthelloworld 11 小时 15 分钟前

@um1ng #23 学不动了。项目用啥我就学啥。在做的项目，ts 还没用上，也不可能重构上 vue3 。

Ansen 11 小时 10 分钟前

antdesign 一把梭

xieren58 11 小时 2 分钟前

solidjs

putaozhenhaochi 11 小时 1 分钟前 via Android

zustand ，valtio 、jotai 国外开发者是不是都财务自由啦。造轮子凶的一笔

dcsuibian 10 小时 59 分钟前

React 就是这样的，吐槽的都累了。

yuthelloworld 10 小时 58 分钟前

@dcsuibian #29 有时候想想真的有必要紧跟这些新的工具库么？回过头看过去 5 年用的，很多库已经停止维护。

SolidZORO 10 小时 56 分钟前 via iPhone

@isukkaw v 站没有引用特指回复 #24 ，z 虽然也好但是写法相对于 v 太复杂了。

其实可以这么理解 p 家的几个 state lib 。jotai 其实是一切的桥梁，是一个大平台，你想要的 z ，v ，甚至是 localstore 、RQ 什么的，都可以在 jotai 中实现桥接！他就是 p 家的万精油，但是可惜，valtio 实在太好用太简洁了，是一个 mobx-like 的小 lib ，使用上非常先进，也没有 mobx 这种包一层入侵你代码的 observer ，就是纯粹，状态就在哪里了，你想什么读怎么改都行！特别适合某些项目五六层深度的组件忽然想改爸爸的爸爸的爷爷组件中的某个 flag……

诶，打住不多说了，让大家自己选择吧，valtio 比起 jotai 实在太小众太不出名了。但是却很够用。

yuthelloworld 10 小时 55 分钟前

@SolidZORO #31 别打住，给大家推荐下，哈哈

SolidZORO 10 小时 47 分钟前 via iPhone 1

推荐如果没有强烈的 immutable 需求还真的就只推 valtio 。

jotai 很好，但有个问题（也可能不是），就是你用一个 atom ，比如 [a, setA] = useAtom(aAtom)，你写 100 个组件里面的 a 名字就都不一样，但是用的 aAtom 是一个，这样在重构的时候很容易发生疏漏。当然回到我之前说也可能不是问题的问题那句话，可能这就是分布式应有的风格，所以我也无法过多评论。

状态总体分为 api state 也可以说是 data state 。还有一些 global state ，这个保存一些 token 啊全局 setting 啊（也来自 api ）。

react-query 解决了 data state ，是没错，但是其实还要一个 state lib 来存放其他 global state ，并且理想状态这些 global 可以被观察 effect 。如果没有这个需求，那你大可存在 window 。

所以，基于上面的前提，我是觉得 RQ + valtio 是够用且好用的。

ck65 10 小时 36 分钟前

UI: evergreen-ui
Router: react-router-dom
State: @rematch/core
Network: axios
Date/time: dayjs

SolidZORO 10 小时 34 分钟前 via iPhone

而且选型最好还是看看是否通用，比如支不支持 SSR 啦，支不支持 Taro 啊什么的。

我开始用 valtio 的时候发现没有 next.js 方案，或者说这个 lib 他妈的太小众了，根本没有同时用 valtio 又用 next.js 的人。结果我看了一下，发现很好解决啊，server 那边注水了放在 window ，然后 client 这边让 valtio 初始化加载 window 上的 INIT_STATE 就好了嘛。

不过也可能因为官方不支持，所以用的人很好，毕竟 SSR 这种原理大部分人都不明白为什么，会用 next.js 就行了。

之前用 recoil 的时候其实是因为不支持 Taro 而弃坑的，没明白为什么一个 state lib 要写那么复杂用那么多 api 。

再就是，泛用性的 lib 比如 mobx 这种，本身 mobx 性能是很好的，或者说极其好！但是一架上 mobx-react 就 gg 了，性能断崖式下跌，当然一般人不处理那种一个 page 几万个 nodes 的应该也不会有什么感觉。但优先选择我还是会选 react ONLY 的 lib ，毕竟针对 render 是有优化的。

yaphets666 10 小时 31 分钟前

@bthulu 说笑了我的哥

yuthelloworld 10 小时 30 分钟前

@SolidZORO #35 通用性确实是之前没考虑过的

h1104350235 10 小时 28 分钟前

react 对新手太远了，因为太多选择

h1104350235 10 小时 28 分钟前

react 对新手太难了，因为太多选择

dk7952638 10 小时 20 分钟前

已转 svelte 生态，老码农面向养生编程

zhuangzhuang1988 9 小时 50 分钟前

已经放弃了用 vue 了
react 给牛逼的用的。

Huelse 9 小时 43 分钟前

像外网评论的那样，react 最好需要个深耕其中的人来带领，不然就库选择上都要踩坑好久

zzlatan 9 小时 42 分钟前

前端真特么瞎折腾。。。这库那库的

beisilu 9 小时 37 分钟前

其实可以尝试弄个像 Flutter Favorites 的栏目，挑选一些人气、文档和 demo 都比较好的库

windyboy 9 小时 29 分钟前

没有人用 svelte 吗？

MAGA2022 9 小时 26 分钟前

vue 3 + ts 是真的香

gogogo1203 9 小时 22 分钟前

animation: framer-motion + Three.js
Router: react-router-dom
form: formik+yup
api: axios+react query
state manager : zustand
utility:lodash+immer
css: classnames+tailwind+marco.twin+styled-components+@emotion
UX\UI : react-hot-toast react-spinners-kit @heroicons/react react-dnd timeago-react

vite\typescript\ eslint prettier\ eslint-config-airbn eslint-config-airbnb-typescript

dany813 9 小时 19 分钟前

轮子太多了，跟不上

angrylid 9 小时 18 分钟前 via Android

vue 现在可以写 tsx 吧

sweetcola 9 小时 14 分钟前

我自己的话是所有库都更新到最新的，React v18 ，React-Redux v8 ，RTK (Redux toolkit)，TypeScript ，UI 是自己写不用任何库。

库选自己熟悉的就可以了，存在那么多库的意思就是“都可以”。如果在烦恼这一点，那说明是想整最佳实践，既然想整最佳实践，花点时间来选择不才是正确的吗？

另外就是 Redux 原来的写法已经是官方不建议了，具体可以看这篇文章 https://redux.js.org/introduction/why-rtk-is-redux-today

um1ng 9 小时 11 分钟前

@angrylid 可以很丝滑

xunjianxiang 9 小时 5 分钟前

Angular 可能是你最后的归宿！！

reorx 8 小时 57 分钟前 via iPhone

mobx 挺好，最近简单看过 swr ，ReactQuery ，zustand ，Jotai ，感觉都不能替代 mobx

SolidZORO 8 小时 53 分钟前

@reorx 代替 mobx 的只可能是 valtio 这类 Proxy-like 的 lib ，别的 lib 出发点就不是去代替 mobx 的。

terranboy 8 小时 47 分钟前

用了 REMIX 没必要用这些乱七八糟的状态管理库了

isukkaw 8 小时 46 分钟前

@SolidZORO #33

你觉得用 jotai 时重构会出疏漏说明你对 jotai 的理解不到位。
和 Recoil 基于字面量的 key 索引状态不同，jotai 是基于引用的。所以如果你要重构基于 jotai 的状态，正确做法是找到声明的 atom ，然后 IDE 中右键寻找所有引用；而不是试图去根据名字去找。

bthulu 8 小时 44 分钟前

@yaphets666 不要看不起 localStorage, jotai 不也有提供 localStorage 的桥接么. 你就把它当成后端的数据库. 抽出一个 js 文件处理与 localStorage 的交互, 其余组件里需要共享状态的引入这个文件就行了. 简单方便快捷, 是个人就能马上上手, 不比这库那库的强?

LiuJiang 8 小时 31 分钟前

svelte 就是一个"杂交物"，当然，这里的"杂交物"是一个褒义词，吸收各大框架的优点，整出来的玩意，也挺有意思的，我没在生产中用过

LiuJiang 8 小时 24 分钟前

@SolidZORO mobx-react 有性能数据吗？

danhahaha 8 小时 23 分钟前

生态已经有了，就缺化反了

SolidZORO 8 小时 17 分钟前

@isukkaw #56

这么 nb 的吗？我刚试了下，貌似不行，用的 JB IDEA ，可否指教一下这种重构操作是怎么实现的？ IDEA 会根据 atom 找到 useAtom 前面 [a, setA] 的中 a ？然后全部重命名。

我再描述一下问题吧，比如我有 2 个 comp：

```
// A-Comp

const [isOpen, setIsOpen] = useAtom(atomA);

```

```
// B-Comp

const [isVisible, setIsVisible] = useAtom(atomA);

```

假如 isOpen 在代码中用了，不过我觉得不够好，想改成 isVisible ，这个时候其实 isVisible 和 isOpen 做了同样的事情，也引用了同样的一个 atomA ，但是他们两并不能互相知道，也没必要知道。

但是作为开发者来说，我希望他们应该一样才对，因为都是引用同一个 atomA ，即便是他们名字不一样但是只要 atomA 变了，他们两都要变。

我不知道这样描述是否妥当，我就是自身没办法规避和解决这个问题，所以换成了中心化的 valtio 。

SolidZORO 8 小时 13 分钟前

@bthulu hhhh ，LS 是好的，但是怎么观察 LS 已经改了呢？事实上，state 存哪里不重要，重要的是 state 发生变化了，其他组件要能知道，以便做出响应的变化。