与 Vue 相伴四年，终究还是没抵住 React 的巨大诱惑

liuian 2025-05-11 17:04 125 浏览

Class 组件不看，只看 React Hooks

很多人在说既然 React Hooks 出了，那还有必要看以前那种 Class 组件吗？我觉得可以不看，优先看 React Hooks，要跟上时代，React 官方自己都说 “全面拥抱 Hooks” ，所以我觉得只看 React Hooks 就行，也就是 React16.8 起的版本，React Hooks 都推出好几年了，大部分 React 项目早就使用 React Hooks 了~

基本 Hooks 要学，高级 Hooks 先不学

一些比较基本的 React Hooks 可以先学（看视频、看文档都行），哪些基本的呢：

useState
useRef
useEffect
useMemo
useCallback
useContext

有了这些基本的 Hooks，可以保证最基本的页面各种逻辑的运行，至于其他的高级的 Hooks，可以先不学，等后面再按需学习（下面会讲到）

源码先不看

现阶段我不会选择去看 React 源码的，因为我觉得我还没将 React 用到极致~

按需学习 React

上面说了，很多 React 的高级知识点可以先不学，那什么时候学这些知识点呢？

其实光学理论是不足的，我们需要使用 React 去开发一些项目，这样能巩固我们的 React 知识，还能在实操的过程中去学习到一些高级的 React 知识点，这就是所谓的 按需学习，讲人话就是：碰到 React 问题，去学对应的 React 知识来解决问题

没项目咋办？

但是大部分人工作中都用不到 React 呀，咋办呢？其实私底下也有项目做呀，github 上不是一大把吗？所以我去 github 上找了一圈，发现 github 上的 React 项目分成两类：

项目类： 管理系统、官网、网页项目居多，但是这些仓库代码都很旧，一般都是 3-4 年前的仓库了

工具类： 状态管理库、组件库居多，这些仓库往往代码都比较新，而且更新很频繁

对于学习 React，我的建议是：先学怎么用，再学怎么造，所以正确路线是 项目类 -> 工具类，但是这些 项目类 的项目仓库都太老了，如果看这些仓库学习的话，你可能学不到最新的知识

所以我想到了一个好办法：用 React 复刻热门 Vue3 项目

用 React 复刻热门 Vue3 项目

React 的项目类仓库都太老了，但是 Vue3 的项目类仓库都很新啊！！！

那么我如果去 github 找一个 Vue3 的热门项目，把他从零到一，用 React 实现一遍，是不是就能按需学习 React 了？

因为在这个过程中会涉及到组件封装、状态管理、路由、权限管理、页面渲染、样式等实战知识点！！！而你要用 React 去将这些功能全部实现一遍，在这个过程中你可以不断地按需学习，不止能学 React，还能学一些额外的知识，比如 Typescript、pnpm、monorepo、tailwindcss 等等额外知识点

就拿我自己来举例，我最终是选了 vue-vben-admin 这个项目，因为它足够火，也足够复杂，我就是想挑战自我，还有一个重要的点是他用的组件库是ant-design-vue，而 React 也有 ant-design，它的技术栈是 Vue3 + Typescript + ant-design-vue + Pinia + pnpm + vite + tailwindcss

所以我使用 React18 + Typescript + ant-design + Zustand + pnpm + vite + tailwindcss 去复刻它

下面是 vue-vben-admin 的仓库代码和页面：

到目前为止我用 React 复刻了一半吧~我将他取名为 React-Sunshine-Admin，下面是我复刻的页面：