《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>&lt;Route&gt;</code>s,{" "}
        <code>&lt;Outlet&gt;</code>s, <code>&lt;Link&gt;</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 <Outlet> 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 <Outlet> renders whatever child route is currently active,
          so you can think about this <Outlet> 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>
  );
}