2022 年 react 生态,大家都用啥

2022-05-05 12:25:52 +08:00
 yuthelloworld

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

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

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

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

20911 次点击
所在节点    React
144 条回复
SolidZORO
2022-05-05 15:28:50 +08:00
状态管理这块。喜欢分布式就 jotai ,喜欢中心化就 valtio 。目前所有项目已从 jotai 转到 valtio ,就只为了在 jsx 之外也能拿到 state ,感觉很好。体积从 2KB 变成 6KB ,基本上可以忽略不计。
yazoox
2022-05-05 15:34:05 +08:00
就多使用了一个 hooks
还是 redux & redux-saga
um1ng
2022-05-05 15:36:06 +08:00
@yuthelloworld 大人 时代变了
isukkaw
2022-05-05 15:40:39 +08:00
@jin5354 #15 该关注关注 React 生态圈的新玩意啦。
@kangyan #16 完全不怕混淆,jotai 的 API 就是照搬 useState 设计的。如果你没有局部状态必须 useState 的洁癖的话,完全无所谓。
@SolidZORO #21 如果需要中心化状态、又喜欢 immutable 的话,可以考虑 zustand 。valtio 、jotai 同作者出品,支持 vanilla ,支持状态中间件,支持 Reducer ,最大的优势是把 state 和 action 写在一起。
yuthelloworld
2022-05-05 15:42:33 +08:00
@um1ng #23 学不动了。项目用啥我就学啥。在做的项目,ts 还没用上,也不可能重构上 vue3 。
Ansen
2022-05-05 15:47:21 +08:00
antdesign 一把梭
xieren58
2022-05-05 15:55:28 +08:00
solidjs
putaozhenhaochi
2022-05-05 15:56:20 +08:00
zustand ,valtio 、jotai 国外开发者是不是都财务自由啦。 造轮子凶的一笔
dcsuibian
2022-05-05 15:58:20 +08:00
React 就是这样的,吐槽的都累了。
yuthelloworld
2022-05-05 15:59:38 +08:00
@dcsuibian #29 有时候想想真的有必要紧跟这些新的工具库么?回过头看过去 5 年用的,很多库已经停止维护。
SolidZORO
2022-05-05 16:01:03 +08:00
@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
2022-05-05 16:02:39 +08:00
@SolidZORO #31 别打住,给大家推荐下,哈哈
SolidZORO
2022-05-05 16:10:15 +08:00
推荐如果没有强烈的 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
2022-05-05 16:21:09 +08:00
UI: evergreen-ui
Router: react-router-dom
State: @rematch/core
Network: axios
Date/time: dayjs
SolidZORO
2022-05-05 16:23:44 +08:00
而且选型最好还是看看是否通用,比如支不支持 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
2022-05-05 16:25:57 +08:00
@bthulu 说笑了我的哥
yuthelloworld
2022-05-05 16:27:00 +08:00
@SolidZORO #35 通用性确实是之前没考虑过的
h1104350235
2022-05-05 16:28:56 +08:00
react 对新手太远了,因为太多选择
h1104350235
2022-05-05 16:29:10 +08:00
react 对新手太难了,因为太多选择
dk7952638
2022-05-05 16:37:34 +08:00
已转 svelte 生态,老码农面向养生编程

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/850921

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX