《2023 年 React 生态》
大家好，我是 Chocolate。
前不久看到一篇不错的内容，来自于 The React Ecosystem in 2023，也结合自己今年使用的 React 生态总结一下。
本文并非视频演讲稿，和视频内容还是有一点点区别，视频内容相对来说会更加详细一点，这里放一下视频传送门：
b 站: https://www.bilibili.com/video/BV1Zh4y1G78R/
youtube: https://www.youtube.com/watch?v=VvSIM1XKuIA
选择你喜欢的平台即可，如果可以的话留下你的点赞和关注就是对我更新最大的鼓励！
前言
React 不知不觉到 23 年已经有 10 年之久了，下面是来自于网图，关于 10 周年的生日蛋糕：
关于这个生态方面，也有挺多内容，去年下半年到今年上半年，这一年时间，我也逐渐接触了一些新的工具，有些非常好用，就是那种一旦使用了，在任何项目中都必须要安装了，不用就顺手，那我们就快速进入正文吧：
开始使用
我记得我在接触前端的时候，那会还在大三阶段，还只是懵懂的学了一些 html 和 js，css 都没怎么用，说实在一点，还只是使用 java + jsp 实现一些非常简单的逻辑，可是那会还是觉得很有成就感，能自己做点表单页面出来。
再到之后大三课程设计了解到了 Vue 和 React 框架，最开始其实还是接触 Vue，不过还是 Vue2 的时代。
后来因为工作需要，开始接触了 react，接触了 hooks 语法之后，感觉就很棒，可惜 Vue3 慢了那么一点点，当时还不够稳定，但现阶段 Vue 也挺香的，跟着 antfu 大佬学就是了，很多工具也是从他那里了解的。
环境问题
过去学编程总是会遇到环境问题，学生时代主要是 windows 电脑，有时候找到了不对的教程， npm run 一跑就报错，但是正因为解决了这些问题，能力也不断提升了。
现在我们也可以使用一些云端 IDE，比如 CodeSandbox 与 StackBlitz，国内的话比如 cloudstudio 等，对于初学者来说可以直接跟随文档教程去写代码了，而无需考虑环境问题，有时候就是环境老是报错，一下就劝退了。
现如今的一些官方文档也比以前好了不少，提供在线 demo，不会的跟着教程手写一遍完全就可以上手了，非常方便。
当然，等你熟悉了语法以后，最好还是自己能配置一下项目，从零搭建起来，提升动手能力。
借助工具
在过去其实一般都是以 CRA（Create React App）为主，现在（23 年 6 月中旬）看这个仓库是有 100k star 了。
但是呢， cra 这玩意也讨论了挺久，关键还是修改 webpack 配置问题，不过社区里面也有解决方案：
CRACO - Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app.
其次，就是使用 Vite，提升开发体验！地址在这：Vite Getting Started
pnpm create vite
不过，自从我开始接触了 Next.js 之后，就用着那一套了，也很方便自己做全栈方面。
可以使用如下脚手架工具去配置一个 Next.js 项目：
npx create-next-app@latest
当然，这个配置出来的只是很简单的项目，许多配置还需要开发人员自己去弄，我在学的时候是用的这个模版：
Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features
下文我也会提到这里面具体的一些技术栈。
不过，现阶段我更喜欢用 t3-app（The best way to start a full-stack, typesafe Next.js app）
非常好用！
路由
提到路由，一般会想到 React Router，下面是 6.8 版本简单示例代码：
import { Routes, Route, Outlet, Link } from "react-router-dom";
export default function App() {
return (
<div>
<h1>Basic Example</h1>
<p>
This example demonstrates some of the core features of React Router
including nested <code><Route></code>s,{" "}
<code><Outlet></code>s, <code><Link></code>s, and using a
"*" route (aka "splat route") to render a "not found" page when someone
visits an unrecognized URL.
</p>
{/* Routes nest inside one another. Nested route paths build upon
parent route paths, and nested route elements render inside
parent route elements. See the note about below. */ }
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />} />
{/* Using path="*"" means "match anything", so this route
acts like a catch-all for URLs that we don't have explicit
routes for. */}
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>
</div>
);
}
function Layout() {
return (
<div>
{/* A "layout route" is a good place to put markup you want to
share across all the pages on your site, like navigation. */}
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
<li>
<Link to="/nothing-here">Nothing Here</Link>
</li>
</ul>
</nav>
<hr />
{/* An renders whatever child route is currently active,
so you can think about this as a placeholder for
the child routes we defined above. */ }
<Outlet />
</div>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
function NoMatch() {
return (
<div>
<h2>Nothing to see here!</h2>
<p>
<Link to="/">Go to the home page</Link>
</p>
</div>
);
}
使用 React Router 的话需要自己去配置一遍，而我的话更喜欢文件路由的形式，所以我也就更喜欢直接使用 Next.js 的 Pages Router，新版的 App Router 依旧还是有点不习惯，需要嵌套使用。
关于路由的话还有一个 TanStack Router，TanStack 里还是有一些提升开发体验的工具库。
客户端状态管理
提到状态管理，你也许会想到 Redux，不过它还是存在一些问题的，比较推荐的是使用 Redux Toolkit，以下是简单的示例代码：
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
value: 0,
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.value += 1
},
decrement: (state) => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
},
},
})
// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
不过我除开工作上没办法，项目已经做成这样了，能不用也就不用，目前更喜欢使用 Zustand，以下是示例代码：
import { create } from 'zustand'
type Store = {
count: number
inc: () => void
}
const useStore = create<Store>()((set) => ({
count: 1,
inc: () => set((state) => ({ count: state.count + 1 })),
}))
function Counter() {
const { count, inc } = useStore()
return (
<div>
<span>{count}</span>
<button onClick={inc}>one up</button>
</div>
)
}
上述是使用了 ts 语法，可以看到，你完全可以像 hooks 一样去使用，而不需要一些模板代码，上手起来也很快速。
类似地还有一个 jotai，这个和我之前使用的 recoil 看起来语法挺像，都有 atom 的概念。
服务端状态管理
上文提到的 tanstack，里面就有一个 query，名字叫 tanstack query ，示例代码如下：
import {
QueryClient,
QueryClientProvider,
useQuery,
} from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
function Example() {
const { isLoading, error, data } = useQuery({
queryKey: ['repoData'],
queryFn: () =>
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
(res) => res.json(),
),
})
if (isLoading) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong> {data.subscribers_count}</strong>{' '}
<strong>✨ {data.stargazers_count}</strong>{' '}
<strong> {data.forks_count}</strong>
</div>
)
}
其实去年的时候，我就有了解过 SWR
“SWR” 这个名字来自于 stale-while-revalidate：一种由 HTTP RFC 5861(opens in a new tab) 推广的 HTTP 缓存失效策略。这种策略首先从缓存中返回数据（过期的），同时发送 fetch 请求（重新验证），最后得到最新数据。
也在项目中集成过，不过今后我应该会考虑用一用 tanstack query。
以及我在过去的视频也有提到过 GraphQL，不过在我了解了 tRPC 了之后，我又更喜欢使用 tRPC 带来的编程体验了。
Form
在过去使用 form，我其实都是使用组件库里面的，比如 antd 里面的，它确实也挺好用的，如果是要做后台的话直接用 antd pro 一把梭哈就完事了。
不过如果我们要单独使用 form 的话，react-hook-form 是我使用起来比较舒适的，社区里面还有一个 formik，可以了解一下，个人觉得 react-hook-form 够用了。
react-hook-form 的示例代码如下：
import { useForm, SubmitHandler } from "react-hook-form";
type Inputs = {
example: string,
exampleRequired: string,
};
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = data => console.log(data);
console.log(watch("example")) // watch input value by passing the name of it
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}
测试
测试是构建高质量 React 应用程序的重要组成部分。在测试 React 应用程序时，需要考虑的两个很好的选择是用于单元测试的 Vitest 和 React 测试库，以及用于端到端测试的 Playwright 或 Cypress。
Vitest 在去年好像还上了一个榜单来着，当时没有记录，看来以后得多记录一些动态。
不过本人目前还没使用过，工作中需求进度比较赶，也没人集成这些，倒是见到开源社区里会有，工作中的话也有专门的人去写自动化测试，所以得看场景。
CSS
这一年内，我最喜欢的还是 tailwindcss，也正是有 tailwindcss 这个文档网站，也让我了解了一些 css 语法知识，原来有些效果属性可以这样那样使用。
在过去旧的项目，我看到挺多都是使用 Styled Components，还有的非常老的项目就直接行内样式一把梭哈，不过写着写着你会发现，原来写行内样式还越写越爽了， tailwindcss 使用体验还是挺棒的。
类似的还有 UnoCSS，也很棒，看个人选择。
而 Styled Components 的话我见的比较多的是 Emotion，也是 CSS-in-JS 的形式。
UI 库
日常使用我主要是以 antd 和 antd pro 为主，不过了解了 tailwindcss 后，shadcn/ui 也不错，配合 tailwindcss 还是挺香的。
动画
依旧还是以 react-spring 和 Framer Motion 为主。
不过我还了解有 GSAP，我在去年用的时候犹记得还没有对应 react 版本，在那次录制的时候发现是有的：
其它
因为有些是挺常见的，基本上一段时间也不怎么会改变的，比如国际化、数据可视化、类型安全方面，这些都是用的比较主流的库，而且是一直在持续维护和更新的。
文档的话，挺早就在关注着 Docusaurus，如今 2.0 版本已经比较稳定了：
以及 Next.js 团队做的文档工具 nextra，这个仓库在只有几百 star 的时候我就关注着的，因为之前 SWR 文档网站就是用这个构建的，之后貌似独立出来了出了文档工具：
也是因为这两个网站，让我了解到原来不只有 md，还有 MDX！
当然，要细说 React 肯定还有很多很多，比如 umi，dumi 以及其他一些非常好用的库。
这里就再提一点 Dev Tools，其实让我想到 Nuxt 之前出的 devtools 以及 studio，个人感觉很棒，对开发者来说真的太好了，这也是为什么我很喜欢 js 的一点吧。
之前倒是看到一些消息，貌似 Next.js 也在做 devtools 相关的事情，我感觉他们也应该要做，还是蛮期待的。
总结
很高兴能和各位分享自己所使用的 React 生态，以及通过那篇文章了解了大概的生态内容，本文也还有许多不足，比如也许了解的框架还不够，部分内容并未提及到，主要是以我当前水平视角去说，带有一些个人体验感受，可谓是美中不足吧。