2022 年 react 生态，大家都用啥
yuthelloworld · yuthelloworld · 2022-05-05 12:25:52 +08:00 · 21949 次点击这是一个创建于 967 天前的主题，其中的信息可能已经有所发展或是发生改变。
去看了一圈 React 的生态，光状态管理就有很多库，还有自己的 useRedcuer + useContext 可以做状态管理。数据请求相关的有 React Query 。
我自己还停留在 React + Ts + Redux 这一套。奥，react-router 6 也有不少更新点。
学不动了，譬如说 Rtk, Rtk query ，光看文档都需要投入不少时间，Recoil 倒是上手挺容易的。
大家现在都用啥？或者说公司都用啥？是跟上生态脚步，还是停留在老的？
第 1 条附言 · 2022-05-06 10:51:31 +08:00
给大家去对比了下几个状态管理库的npm下载趋势
https://www.npmtrends.com/@reduxjs/toolkit-vs-jotai-vs-mobx-vs-recoil-vs-redux-vs-xstate-vs-zustand-vs-valtio
 |
102
FightPig 2022-05-06 14:09:41 +08:00
@um1ng react 一直没有官方统一的一套，不像 vue ，几乎全是官方统一好一套，拿来就用，react-router 以前更新着，就不兼容了，所以，我一直主要用 vue ，现在不清楚啥情况
|
 |
104
pythonee 2022-05-06 14:14:45 +08:00
这么复杂了吗
|
 |
105
mknightoy 2022-05-06 14:31:25 +08:00
进来一看各种名词铺面而来，阿巴阿巴阿巴
|
 |
106
isukkaw 2022-05-06 15:11:46 +08:00
@SolidZORO #61
我知道你说的问题是啥，不用你再描述一遍。 const [isOpen, setIsOpen] = useAtom(atomA); const [isVisible, setIsVisible] = useAtom(atomA); 不论你的 getter 和 setter 是什么名字，你用的都是同一个 atomA 。并不是因为你 useAtom 两次，这俩 atomA 就不一样了。这两个 atomA 的引用是相同的。 所以你要通过 atomA 去找所有的 usage 。VSCode 就有提供寻找变量的声明和所有引用的功能。如果 IDEA 没有，说明 IDEA 并不适合拿来写 JavaScript ，说明你应该抛弃 IDEA 了。 |
 |
107
shabbyin 2022-05-06 15:28:07 +08:00
不看这个帖子还不知道有这么多状态库
简单项目我都是 useContext 一把梭 复杂的上个 redux ，加上 useDispatch 、useState 。。 |
 |
109
Valid 2022-05-06 16:02:57 +08:00
什么叫生态脚步，个人觉得还是 class component 好用，代码看着清晰，怎么喜欢怎么来
|
 |
110
Leviathann 2022-05-06 16:29:58 +08:00
@Valid 但是类组件没法或者很难抽象和状态相关的逻辑
hooks 的 useMemo/Callback 和 async 一样会传染的确有点烦 |
|
111
Valid 2022-05-06 16:38:14 +08:00
@Leviathann 按照 react 官方的说法是后续可以在 class 中使用 hooks ，fb 还有那么多类不可能全部重写
|
 |
112
yamedie 2022-05-06 16:52:28 +08:00
一个 VUEer 进来看了眼评论区, 一堆千奇百怪的库名, 仿佛看到一帮 REACTer 在尬舞... 舞得好... 有空我还是继续学学 svelte 吧 [doge]
|
 |
113
yuthelloworld OP @yamedie #112 这不是广大 reacter 搞出来的。国内很多 reacter 还是用 antd 全家桶。轮子多了也很烦。
|
 |
115
IvanLi127 2022-05-06 17:22:47 +08:00
@CodingNaux Angular 挺好的，用着也很爽啊，就是跳槽后，没公司用了。。。
|
 |
116
serco 2022-05-06 17:29:56 +08:00  3
省流小助手：
React 生态里其他的工具其实不重要，主要的变革在于状态管理库的变化，大致可分为 3 个阶段 1. 一开始由 Flux 架构的开源实现流行起来的 Redux ，令人烦躁的点在于模板代码太多，后续的 RTK （ Redux Tool Kit ）只能说是提供了一些类似语法糖 API 糖一样的做法来尽量减少模板代码，治标不治本。 2. 为了改进或者替代 Redux 的产品 mobx valtio(proxy state) zustand 等等，排名不分先后 3. Recoil/Jotai(Atom state) 主张状态从底往上组合，区别于 Redux 等工具的中心化然后再通过 reducer 自顶往下的做法； react-query 提出不应该是 global state ，应该是 server state + client state ，它负责解决 server state ，剩下的 client state 已经少得可怜，可自行选用工具解决 |
 |
117
DICK23 2022-05-06 17:38:17 +08:00
mobx YYDS
|
 |
118
agileago 2022-05-06 17:47:33 +08:00
@MartinAgerAdams 看了上面那么多名词，感觉好累啊， 不如来用我写的 vue3-oop( https://github.com/agileago/vue3-oop) vue3 + tsx + di(类似 angular)的，完全没有任何选择困难症，需要共享状态了，就直接从上层服务注入状态，我都没明白为啥会出现这么多状态管理库？ 共享状态本质上不就是要解决 2 个问题么，
1. 跨组件使用同一状态 2. 状态与状态之间有依赖 - 针对第一个问题无非就是下层组件要使用上层组件的状态，直接依赖注入进去 - 第二个问题，解决依赖关系最经典的就是依赖注入容器了，把容器加进去不就解决了？ 贴个简单的代码： ```tsx // 共享状态以及状态依赖 @Injectable() class S extends VueService { constructor(private s2: S2) { super() } @Mut() count = 1 removeAge() { this.s2.age-- } } // 被依赖服务 class S2 extends VueService { @Mut() age = 18 } // 父组件 @Component() class Parent extends VueComponent { constructor(private s: S) { super() } render() { const { s } = this return ( <div onClick={() => s.count++}> {s.count} <Child></Child> </div> ) } } // 子组件 @Component() class Child extends VueComponent { constructor(@SkipSelf() private s: S) { super() } render() { const { s } = this return <div onClick={() => s.count++}>{s.count}</div> } } ``` |
 |
120
dcsuibian 2022-05-06 17:56:57 +08:00
@yuthelloworld 我的感觉：
其实如果是公司项目的话，就 antd 全家桶、umi 、dva 啥的就好了。阿里怎么来我就怎么来，资料多、别人也好接手。跟不跟，用什么都无所谓，反正大厂选了，停止维护吃亏得也不止我。 但想写 React 个人项目的时候就比较纠结了，因为个人不做管理系统，antd 就不用了，用不上 umi 那一套。而且框架选择可以更激进，更注重开发体验，就很纠结用啥。 |
 |
124
sherryqueen 2022-05-06 18:12:40 +08:00
Vite+React+React-router+tailwindcss 基本就这些了
|
 |
127
keyrinrin 2022-05-06 18:44:36 +08:00
以前用 react 的优势是可以方便配合 ts ，现在有了 vue3 ，还是跑去 vue 了，很喜欢三合一文件
|
 |
128
LiuJiang 2022-05-06 21:22:04 +08:00
我好奇 Vue + JSX + TS 这玩意性能如何，有老哥用过吗
|
 |
129
demonzoo 2022-05-07 01:22:36 +08:00
@isukkaw zustand 和 swr 真的好用，然后 webpack 我也不用了，改成 parcel 。UI 自己写，不用 antd 一身轻松
|
 |
130
LeslieWongH 2022-05-07 03:23:45 +08:00 1
@Huelse 外网上的 Biran Holt 可以跟的。他的 React 完全入门课程都更新到了第 7 个版本了。 多年笔耕不辍紧磕 React 前沿。https://btholt.github.io/complete-intro-to-react-v7
|
 |
133
v23xowen 2022-05-07 09:32:32 +08:00
umijs 全家桶
|
 |
134
lujiaosama 2022-05-07 09:33:25 +08:00 1
@bthulu nodejs 选手表示装饰器是基操, 啥洪水猛兽. 纯写前端也是能用上场的, aop 用装饰器很常见.
|
 |
135
doommm 2022-05-07 09:49:46 +08:00 via Android
进入 stage3 的装饰器提案，并非目前 ts 中使用的装饰器
|
 |
136
daokedao 2022-05-07 10:05:57 +08:00
看上面的趋势图，是不是要学 xstate ？
|
 |
137
uni 2022-05-07 11:28:49 +08:00
大家都是用 taiwind 的吗，windi 怎么样呀？
|
 |
138
Makabaka01 2022-05-09 16:09:35 +08:00
语言毫无疑问：TypeScript
函数还是 class：函数组件 状态管理： 1. Redux 全家桶：redux + redux-thunk + reselector + immer 2. RxJS：rxjs-hooks + rxjs |
 |
139
magicdawn 2022-05-31 14:53:07 +08:00 via Android
|
|
140
yuthelloworld OP @magicdawn #139 我躺平了，懒得选了。直接捡起 redux 一把梭
|
|
141
magicdawn 2022-06-02 12:31:58 +08:00
|
 |
142
QKgf555H87Fp0cth 2022-09-06 16:34:24 +08:00
不怕折腾，只用新的不用旧的。
|
|
143
yuthelloworld OP 最近半年都在写 vue3+vite+pinia 。 感觉 pinia 还挺好用的，比较省心。所以 react 的生态里有没有类似 pinia 的？
|
Select Language