去看了一圈 React 的生态，光状态管理就有很多库，还有自己的 useRedcuer + useContext 可以做状态管理。数据请求相关的有 React Query 。
我自己还停留在 React + Ts + Redux 这一套。奥，react-router 6 也有不少更新点。
学不动了，譬如说 Rtk, Rtk query ，光看文档都需要投入不少时间，Recoil 倒是上手挺容易的。
大家现在都用啥？或者说公司都用啥？是跟上生态脚步，还是停留在老的？
› React
This topic created in 1501 days ago, the information mentioned may be changed or developed.
Supplement 1 · May 6, 2022
给大家去对比了下几个状态管理库的npm下载趋势
https://www.npmtrends.com/@reduxjs/toolkit-vs-jotai-vs-mobx-vs-recoil-vs-redux-vs-xstate-vs-zustand-vs-valtio
 |
102
FightPig May 6, 2022
@um1ng react 一直没有官方统一的一套，不像 vue ，几乎全是官方统一好一套，拿来就用，react-router 以前更新着，就不兼容了，所以，我一直主要用 vue ，现在不清楚啥情况
|
 |
104
pythonee May 6, 2022
这么复杂了吗
|
 |
105
mknightoy May 6, 2022
进来一看各种名词铺面而来，阿巴阿巴阿巴
|
 |
106
isukkaw May 6, 2022
@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 May 6, 2022
不看这个帖子还不知道有这么多状态库
简单项目我都是 useContext 一把梭 复杂的上个 redux ，加上 useDispatch 、useState 。。 |
 |
109
Valid May 6, 2022
什么叫生态脚步，个人觉得还是 class component 好用，代码看着清晰，怎么喜欢怎么来
|
 |
110
Leviathann May 6, 2022
@Valid 但是类组件没法或者很难抽象和状态相关的逻辑
hooks 的 useMemo/Callback 和 async 一样会传染的确有点烦 |
|
111
Valid May 6, 2022
@Leviathann 按照 react 官方的说法是后续可以在 class 中使用 hooks ，fb 还有那么多类不可能全部重写
|
 |
112
yamedie May 6, 2022
一个 VUEer 进来看了眼评论区, 一堆千奇百怪的库名, 仿佛看到一帮 REACTer 在尬舞... 舞得好... 有空我还是继续学学 svelte 吧 [doge]
|
 |
113
yuthelloworld OP @yamedie #112 这不是广大 reacter 搞出来的。国内很多 reacter 还是用 antd 全家桶。轮子多了也很烦。
|
 |
115
IvanLi127 May 6, 2022
@CodingNaux Angular 挺好的，用着也很爽啊，就是跳槽后，没公司用了。。。
|
 |
116
serco May 6, 2022  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 May 6, 2022
mobx YYDS
|
 |
118
agileago May 6, 2022
@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 May 6, 2022
@yuthelloworld 我的感觉：
其实如果是公司项目的话，就 antd 全家桶、umi 、dva 啥的就好了。阿里怎么来我就怎么来，资料多、别人也好接手。跟不跟，用什么都无所谓，反正大厂选了，停止维护吃亏得也不止我。 但想写 React 个人项目的时候就比较纠结了，因为个人不做管理系统，antd 就不用了，用不上 umi 那一套。而且框架选择可以更激进，更注重开发体验，就很纠结用啥。 |
 |
124
sherryqueen May 6, 2022
Vite+React+React-router+tailwindcss 基本就这些了
|
 |
127
keyrinrin May 6, 2022
以前用 react 的优势是可以方便配合 ts ，现在有了 vue3 ，还是跑去 vue 了，很喜欢三合一文件
|
 |
128
jchencode May 6, 2022
我好奇 Vue + JSX + TS 这玩意性能如何，有老哥用过吗
|
 |
129
demonzoo May 7, 2022
@isukkaw zustand 和 swr 真的好用，然后 webpack 我也不用了，改成 parcel 。UI 自己写，不用 antd 一身轻松
|
 |
130
LeslieWongH May 7, 2022 1
@Huelse 外网上的 Biran Holt 可以跟的。他的 React 完全入门课程都更新到了第 7 个版本了。 多年笔耕不辍紧磕 React 前沿。https://btholt.github.io/complete-intro-to-react-v7
|
 |
133
v23xowen May 7, 2022
umijs 全家桶
|
 |
134
lujiaosama May 7, 2022 1
@bthulu nodejs 选手表示装饰器是基操, 啥洪水猛兽. 纯写前端也是能用上场的, aop 用装饰器很常见.
|
 |
135
doommm May 7, 2022 via Android
进入 stage3 的装饰器提案，并非目前 ts 中使用的装饰器
|
 |
136
daokedao May 7, 2022
看上面的趋势图，是不是要学 xstate ？
|
 |
137
uni May 7, 2022
大家都是用 taiwind 的吗，windi 怎么样呀？
|
 |
138
Makabaka01 May 9, 2022
语言毫无疑问：TypeScript
函数还是 class：函数组件 状态管理： 1. Redux 全家桶：redux + redux-thunk + reselector + immer 2. RxJS：rxjs-hooks + rxjs |
 |
139
magicdawn May 31, 2022 via Android
|
|
140
yuthelloworld OP @magicdawn #139 我躺平了，懒得选了。直接捡起 redux 一把梭
|
|
141
magicdawn Jun 2, 2022
|
 |
142
QKgf555H87Fp0cth Sep 6, 2022
不怕折腾，只用新的不用旧的。
|
|
143
yuthelloworld OP 最近半年都在写 vue3+vite+pinia 。 感觉 pinia 还挺好用的，比较省心。所以 react 的生态里有没有类似 pinia 的？
|
Select Language