两三年 vue 开发经验，如何快速掌握 react 开发呀，感觉好多优化技巧需要自己去处理

35 条回复 • 2024-11-30 10:39:07 +08:00

1

Zaen

2 天前

跟着 gpt 学习，很快的

2

murmur

2 天前

react hooks 是这样的，都 2024 年的框架还要开发者去写依赖关系还一堆人吹

我宁可用 component class ，还没那么多心智负担，除了语法麻烦点没啥不好

3

murmur

2 天前

react 就跟一个高级计算器一样，编程能力贼 jb 强

但是当你需要计算 3x2 的时候，你需要自己写[3, 3, 3].reduce

这只是个比喻，用来形容 react 在 jsx 这缺乏优雅的 for 和 if 支持

4

sgiyy

2 天前

1

新文档看一遍就行了，Vue 转 React ，我觉得比 Vue 心智负担低，没那么多概念。
写法上如果不喜欢 useCallback 要手动加依赖，就用 ahooks 里的 useMemoizedFn 替代。
如果没性能问题，也不用过早去优化。
其他的，用到了再查即可。

5

sgiyy

2 天前

你用 React 写一个 Todo 项目，就大致了解语法了；剩下的就是 router 、状态管理工具、Css 方案...

6

binaryify

2 天前

3

为啥会有人说 react 心智负担低, 概念一点也不少, 需要开发者自己优化,从 class component 的 shouldComponentUpdate 到现在的 useMemo,以及 hooks 手动传依赖...
状态管理工具个个都说自己是下一代最佳状态管理工具
nextJS 开发体验也越来越差, 然后另一个框架,Remix 更着更着居然跟 React Router 合并了
React Router 也不好用, 一个版本一个样,还有人说 vue 2 到 3 更新变化大, 咋没人说 react router
我就不明白了,你一个 router 库为啥还要做成框架( https://reactrouter.com/upgrading/router-provider)

7

EJW

2 天前

可以直接试试 nextjs 这种，路由管理简单很多。

8

Wxh16144

2 天前

官方文档 react.dev 过一遍，然后启动一个 vite-react-demo 写一个 todo list 。

然后把国内 antd 那那些东西看一遍，比如 antd-admin ，随便修修改改，多看看 GitHub issue 和 discussion 就入门了

9

kinghly

2 天前 via Android

理解函数式编程。思维要转变，没有其他了。

10

zeromake

2 天前

@binaryify #6 因为都是做小工具的，什么优化都不存在的，直接 useSate 一把梭，useMemo 什么的不存在的，然后当然没有心智负担咯

11

justdoit123

2 天前

去重新配一副眼镜就能掌握了。

12

justdoit123

2 天前

@justdoit123
加个「狗头」

13

bojackhorseman

2 天前 via iPhone

@binaryify 这两天看 react-router v7 已经发布了，就试着升级一下，我一顿折腾，最后发现尼玛不支持 hash router 了，气晕了。
在官方 discord 搜到说 remix 没法用 hash router 。
以前没用过 react-router ，没想到这此更新非常这么大

14

angrylid

2 天前

有两年开发经验的前提下，看官网文档上手 React 两周足矣。

提高 React 组件的性能，说白话就是需要手动控制颗粒度，削减不必要的 re-render

前端界面库没一个省心的，或多或少都要了解他的响应式原理，抽象泄露不可避

15

rocmax

2 天前 via Android

1.页面上有几百个组件之前不要担心性能问题，先实现功能
2.等 react compiler 稳定就自动处理了
3.直接上手 nextjs ，rsc 的范式跟以前的 react 不一样，ssr 会减少页面 state 变化

16

lee88688

2 天前

@murmur 我觉得还是千万不要这么想，虽然 react 的 hooks 设计在现在看来没这么好，但理念还是很先进的，不然后面的 vue API 设计有受到影响。整体上 hooks 还是比较先进的逻辑封装方式，比 class 还是先进。更不要说 react compiler 出现会抹平这些差距。

17

lee88688

2 天前

1

@binaryify 每个人理解不太一样，我也觉得 react 心智负担还是低，hooks 那些坑确实也存在（我也被坑过不少）。现在基本告别 class components ，相关的优化也可以在一开始不去管它，但默认性能确实不如 vue 等新框架好。
我觉得 vue 也有自己的问题，proxy 对象在复杂的依赖关系和数据结构上让调试和依赖追逐变得复杂很多。模板相对于 jsx 概念太多，指令这种既有编译器也有运行时的东西全是黑箱。vue 的组件创建大多都是但文件，相对函数式组件定义方式创建成本更高，会让开发者更倾向于减少封装。
总的来说毕竟是出来多年的框架或多或少有些问题，如果你想要都爽的可以去看看新框架（例如 solidjs ），但是生态嘛🤣。按照自己开发需求选择就好了。

18

DefoliationM

2 天前 via Android

@binaryify 比写 jQuery 负担低多了，jQuery 不支持双向绑定，所有变化都得自己手动 find document 去改。

19

DefoliationM

2 天前 via Android

@DefoliationM vue 的话，代码结构太乱了，感觉和直接写 HTML 差不多，不好维护。

20

lukeding9627

2 天前

react 需要从函数的角度来思考问题，真正理解函数式后写起来还是比较舒服

21

vanchKong

2 天前

@sgiyy #5 这几个能稍微详细讲讲，一般主流采用什么方案吗？

22

sgiyy

2 天前

@vanchKong
- 路由：react-router-dom v6 （ v7 暂时不考虑）
- 状态管理：zustand 、jotai 、recoil 、redux ，自带的 useReducer 等...目前非常（只）推荐 zustand ，简单好用
- CSS 方案：Css 、Scss 、css-modules 、css-in-js 、Less 等... 推荐 Scss + Tailwind CSS
- 构建：vite 现在可以放心用了

23

vanchKong

2 天前

@sgiyy #22 如果是直接使用 nextjs ，是不是就没法用 vite 了，社区好像没找到相关的项目； nextjs 配套一般是什么呢