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

[ellipsisAI]

有优秀的资源推荐吗？当然官方文档算一个

[Zaen]

跟着 gpt 学习，很快的

[murmur]

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

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

[murmur]

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

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

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

[sgiyy]

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

[sgiyy]

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

[binaryify]

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

[EJW]

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

[Wxh16144]

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

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

[kinghly]

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

[zeromake]

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

[justdoit123]

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

[justdoit123]

@justdoit123
加个「狗头」

[bojackhorseman]

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

[angrylid]

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

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

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

[rocmax]

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

[lee88688]

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

[lee88688]

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

[DefoliationM]

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

[DefoliationM]

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

[lukeding9627]

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

[vanchKong]

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

[sgiyy]

@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 现在可以放心用了

[vanchKong]

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

[canvascat]

不用特别优化处理，相信后人的智慧😆

[weixiangzhe]

不管优化，用 react compiler 吧

[DOLLOR]

useState + useEffect 一把梭，哪有什么心智负担。
不要急着想什么优化，你先把东西做出来再考虑优化。🐶

[lerry]

https://juejin.cn/post/7344536653463207973
我之前也是只有 Vue 的经验，无意搜到这篇文章，看完就懂了

[visper]

初写 react 的时候，不要想性能，就认为你随便写它都足够快。否则写起来总感觉不舒服。

[sgiyy]

@vanchKong #23 nextjs 是一整套的工具都给你提供了，对第三方库支持也很完备，他也有内置支持的打包工具；没有用 Vite 的必要，Vite 说白了只是用来打包的，nextjs 新增支持的打包工具 Turbopack 据说比 Vite 还快，可以试试。

[vanchKong]

@sgiyy #29 感谢你的回复

[cookygg]

去开发呀 别先去看 直接上手写

[qinqiuxu]

接口请求尽量别用 useEffect 写，用 react-query 或者 use-swr

[mizuki9]

官方教程看一遍，大概理解怎么用。然后开始写，把坑踩满就会了。再好的教程也难面面俱到，自己搜索 debug 就是学习的过程。初学建议直接使用 react 官方的 hooks ，知道它们的特性，后期用三方封装的来效率开发

[moooooooo]

@lerry 好文章，我花了一点时间看完又配合 chatgpt 解答了几个问题，已经可以大言不惭的说已经学会了 react

[tsja]

coderwhy 的 react 教程挺好的, 几个 hooks 讲的挺好的