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

[nzbin]

@beginor 招 JS 基础好的就行，我以前的邻居部门用 vue ，一个季度也说找不到人😂

[FightPig]

@um1ng react 一直没有官方统一的一套，不像 vue ，几乎全是官方统一好一套，拿来就用，react-router 以前更新着，就不兼容了，所以，我一直主要用 vue ，现在不清楚啥情况

[FightPig]

@dk7952638 svelte 的 ui 有推荐的吗

[pythonee]

这么复杂了吗

[mknightoy]

进来一看各种名词铺面而来，阿巴阿巴阿巴

[isukkaw]

@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 了。

[shabbyin]

不看这个帖子还不知道有这么多状态库
简单项目我都是 useContext 一把梭
复杂的上个 redux ，加上 useDispatch 、useState 。。

[Envov]

@isukkaw jotai 和 zustand 真是好爽，少写好多样板代码

[Valid]

什么叫生态脚步，个人觉得还是 class component 好用，代码看着清晰，怎么喜欢怎么来

[Leviathann]

@Valid 但是类组件没法或者很难抽象和状态相关的逻辑
hooks 的 useMemo/Callback 和 async 一样会传染的确有点烦

[Valid]

@Leviathann 按照 react 官方的说法是后续可以在 class 中使用 hooks ，fb 还有那么多类不可能全部重写

[yamedie]

一个 VUEer 进来看了眼评论区, 一堆千奇百怪的库名, 仿佛看到一帮 REACTer 在尬舞... 舞得好... 有空我还是继续学学 svelte 吧 [doge]

[yuthelloworld]

@yamedie #112 这不是广大 reacter 搞出来的。国内很多 reacter 还是用 antd 全家桶。轮子多了也很烦。

[junmoxiao]

@zzlatan 不然 kpi 跟不上了

[IvanLi127]

@CodingNaux Angular 挺好的，用着也很爽啊，就是跳槽后，没公司用了。。。

[serco]

省流小助手：
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 已经少得可怜，可自行选用工具解决

[DICK23]

mobx YYDS

[agileago]

@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>
}
}
```

[bthulu]

@agileago 装饰器语法被绝大多数 js 开发者视为洪水猛兽, 注定是不会流行的

[dcsuibian]

@yuthelloworld 我的感觉：
其实如果是公司项目的话，就 antd 全家桶、umi 、dva 啥的就好了。阿里怎么来我就怎么来，资料多、别人也好接手。跟不跟，用什么都无所谓，反正大厂选了，停止维护吃亏得也不止我。
但想写 React 个人项目的时候就比较纠结了，因为个人不做管理系统，antd 就不用了，用不上 umi 那一套。而且框架选择可以更激进，更注重开发体验，就很纠结用啥。

[agileago]

@bthulu 那 nestjs 和 typeorm 直接撞墙吧，还有 stencil ，angular 等一大堆

[bthulu]

@agileago 难道不是吗? 这些库, 在国内有几个人用? 你去看看 boss 直聘前端招聘, 有几个需要会这些的?

[agileago]

@bthulu 你不用不代表你用，据我所知后端 nodejs 新开项目大部分选择 nestjs

[sherryqueen]

Vite+React+React-router+tailwindcss 基本就这些了

[bthulu]

@agileago 前端呢? react 跟前后端八竿子打不着吧

[nzbin]

@bthulu js 的装饰器已经进入 stage 3 了

[keyrinrin]

以前用 react 的优势是可以方便配合 ts ，现在有了 vue3 ，还是跑去 vue 了，很喜欢三合一文件

[LiuJiang]

我好奇 Vue + JSX + TS 这玩意性能如何，有老哥用过吗

[demonzoo]

@isukkaw zustand 和 swr 真的好用，然后 webpack 我也不用了，改成 parcel 。UI 自己写，不用 antd 一身轻松

[LeslieWongH]

@Huelse 外网上的 Biran Holt 可以跟的。他的 React 完全入门课程都更新到了第 7 个版本了。 多年笔耕不辍紧磕 React 前沿。https://btholt.github.io/complete-intro-to-react-v7

[dk7952638]

@FightPig tailwindcss+daisyui

[agileago]

@LiuJiang 都是 vdom ，性能比 react 好点，但没模板高

[v23xowen]

umijs 全家桶

[lujiaosama]

@bthulu nodejs 选手表示装饰器是基操, 啥洪水猛兽. 纯写前端也是能用上场的, aop 用装饰器很常见.

[doommm]

进入 stage3 的装饰器提案，并非目前 ts 中使用的装饰器

[daokedao]

看上面的趋势图，是不是要学 xstate ？

[uni]

大家都是用 taiwind 的吗，windi 怎么样呀？

[Makabaka01]

语言毫无疑问：TypeScript
函数还是 class：函数组件
状态管理：
1. Redux 全家桶：redux + redux-thunk + reselector + immer
2. RxJS：rxjs-hooks + rxjs

[magicdawn]

只有我推荐 easy-peasy
https://easy-peasy.dev/

话说 pmndrs 家这么多状态管理，他们自己做个项目不得自己选半天

[yuthelloworld]

@magicdawn #139 我躺平了，懒得选了。直接捡起 redux 一把梭

[magicdawn]

在这里发现了 valtio 挺好用的,
写了一篇源码解析 https://magicdawn.fun/2022/05/31/valtio-source-guide/
嘿嘿~

[QKgf555H87Fp0cth]

不怕折腾，只用新的不用旧的。

[yuthelloworld]

最近半年都在写 vue3+vite+pinia 。 感觉 pinia 还挺好用的，比较省心。所以 react 的生态里有没有类似 pinia 的？

[dxhuii]

@christin #80
我们也在用，不过我已经把 dva 干掉了，换成了 valtio ， 舒服多了。