2022 年 react 生态，大家都用啥

[yuthelloworld]

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

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

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

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

给大家去对比了下几个状态管理库的npm下载趋势

https://www.npmtrends.com/@reduxjs/toolkit-vs-jotai-vs-mobx-vs-recoil-vs-redux-vs-xstate-vs-zustand-vs-valtio

[Heymans]

antdesign 大礼包

[westoy]

antd, useModel 又不是不能用

[dengqing]

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

[isukkaw]

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

[statumer]

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

[qW7bo2FbzbC0]

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

[waising]

antd, react-router 6, jotai, axios

[bthulu]

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

[nijjba]

use-context-selector

[FrankFang128]

React 就是这样，千人千面

[pigspy]

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

[yuthelloworld]

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

[liliclinton]

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

[yuthelloworld]

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

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

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

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

[jin5354]

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

[rwecho]

react next.js chakra ui redux toolkit

[kangyan]

我用 umi 的 useModel 。

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

[um1ng]

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

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

[Jsonz]

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

[yuthelloworld]

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

[SolidZORO]

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

[yazoox]

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

[um1ng]

@yuthelloworld 大人 时代变了

[isukkaw]

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

[yuthelloworld]

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

[Ansen]

antdesign 一把梭

[xieren58]

solidjs

[putaozhenhaochi]

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

[dcsuibian]

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

[yuthelloworld]

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

[SolidZORO]

@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]

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

[SolidZORO]

推荐如果没有强烈的 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]

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

[SolidZORO]

而且选型最好还是看看是否通用，比如支不支持 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]

@bthulu 说笑了我的哥

[yuthelloworld]

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

[h1104350235]

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

[h1104350235]

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

[dk7952638]

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

[zhuangzhuang1988]

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

[Huelse]

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

[zzlatan]

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

[beisilu]

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

[windyboy]

没有人用 svelte 吗？

[MAGA2022]

vue 3 + ts 是真的香

[gogogo1203]

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]

轮子太多了，跟不上

[angrylid]

vue 现在可以写 tsx 吧

[sweetcola]

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

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

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

[um1ng]

@angrylid 可以 很丝滑

[xunjianxiang]

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

[reorx]

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

[SolidZORO]

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

[terranboy]

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

[isukkaw]

@SolidZORO #33

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

[bthulu]

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

[LiuJiang]

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

[LiuJiang]

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

[danhahaha]

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

[SolidZORO]

@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]

@LiuJiang https://krausest.github.io/js-framework-benchmark/2022/table_chrome_101.0.4951.41.html

[SolidZORO]

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

[charlie21]

如果不用 next.js ，如何做 ssr 服务器端渲染

[um1ng]

[wobuhuicode]

写了那么多年都是：React + Redux + react-router 一套下来。去哪都不吃亏。

[ccyu220]

vite + redux-toolkit + react-router 再加个 less 和 tailwindcss ，没有什么不能做的吧

[beginor]

我自己用这个组合 react-router ，react-bootstrap ，fetch ，rxjs

[magicdawn]

强推 easy-peasy, rtk 太繁琐了

[ruoxie]

我只知道 redux 最难用，最恶心

[TabGre]

在这里学来不少于 20 个的新名词

[FreshOldMan]

前端更新库这么快，真的对你们的项目有很大的提升吗？

[kingsleydon]

mui emotion next.js jotai swr

[Sain]

umi antdpro 一把梭

[me221]

@yuthelloworld 推荐 unocss+windicss

[lydhr]

nextJS + tailwindCSS

[m1911star]

umi + antd ，7 月打算切换到 vite

[stillsilly]

为什么要搞这么多东西…… 解决了什么问题

[ccyu220]

又重新看了这个贴，我发现我已经不会 React 了。

我把上面说的那些库的 GitHub 打开，每个都有那么多的 Star 。

到底是我我落伍了还是更新太快。

[christin]

公司还在用 dva ，想迁也没办法迁，之前的文件太多了

[bthulu]

@SolidZORO 抽出一个 store.js 专门与 localStorage 交互. 通过 store.js 取出所需状态初始化 state 后, 再将 setState 函数挂到这个状态的回调函数数组里, 组件销毁时再从这个数组里移除掉. 有任意组件想改变这个状态, 调用 store.js 里的修改方法, 这个修改方法负责将数据存在 localStorage 里, 并依次执行之前挂载的回调函数.

[yuthelloworld]

@ccyu220 #79 歪果仁造轮子的能力确实强

[ccyu220]

@yuthelloworld 算了 Web 端还是主 Vue3 吧，起码没有心智负担。

[yuthelloworld]

@ccyu220 #83 没写过 vue3 ，和 ts 兼容的好吗

[ccyu220]

@yuthelloworld 没什么问题

[Lancer777]

@um1ng 看 star 没有意义，看 npm 下载量才知道区别有多大。

[MartinAgerAdams]

react: react 17 or 18
router: react-router 6
ui framework: antd
state manager: zustand
api: axios + react-query
css: classnames + tailwindcss + styled-components
dev: vite

[MartinAgerAdams]

@ccyu220
> 算了 Web 端还是主 Vue3 吧，起码没有心智负担。

不太同意这个。
1. 单纯从相关概念来说，Vue 是编译时的。为了编译优化或者其他，造了一大堆语法和概念，虽然不难，但是我感觉增加了心智负担。
2. React 是运行时的。JSX 写法上就是 JS 一把梭，不用管那么多概念，当然这个也是相对的，肯定也会有人感觉它其其他地方增加心智负担（比如楼上的一些回答）

[nzbin]

@xunjianxiang react 和 vue 所有一套下来和 angular 也差不多了，但是开发体验还是 angular 丝滑

[wakaka]

前端卷得太厉害了

[yuthelloworld]

@MartinAgerAdams #88 vue 确实语法糖比较多。react 相对都是原生 js 的语法。心智负担感觉主要是百花齐放的各种库

[lolizeppelin]

换 angluar 全包不用想多好

[fyxtc]

前端真是终生学习。。。。

[guoliim]

nextjs react-query

[CodingNaux]

喜欢 vue?直接全部 vue3 composition api 还好
要是项目里同时有 option api, compositon api, 点 vue 文件，点 tsx 文件简直了。
vue 的 mixin 到现在还有人用，怎么维护，怎么重构
vue 的 this 漫天飞怎么维护，怎么重构
vue 还有人不知道怎么写 tsx ，复杂模版的冗余代码怎么维护

就学 react 吧，就是 js ，就那么几个 api
说 angular 好的，有几个真正深度用上

[Liam1997]

2022 年了，组里还在用 dva 那一套。。。

[sjhhjx0122]

@CodingNaux 你说的 vue 问题，angular 全能解决啊多好啊

[GiantHard]

再补充一个跟 mobx 、valtio 一个路子的状态管理库 reactivue ，在 react 里面用 vue3 的 Composition API

[nzbin]

@CodingNaux 我们就在用，确实省心省力

[beginor]

@CodingNaux 公司用 angular 做了几年项目，确实省心，但是奈何国内 vue 一边倒了，几乎招不到 angular 的人，新进的都是 vue