React 常用库/依赖项指南

React 是一个灵活的前端框架，它本身专注于 View 层，因此开发过程中经常需要配合多个社区库和工具使用。本页整理了常见的 React 项目依赖库及其代码使用示例。

---

🔁 状态管理类

Zustand

npm install zustand

import { create } from 'zustand'

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Count: {count}</button>
}

Redux Toolkit

npm install @reduxjs/toolkit react-redux

// store.ts
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 }
  }
});

export const { increment } = counterSlice.actions;
export const store = configureStore({ reducer: { counter: counterSlice.reducer } });

import { useDispatch, useSelector } from 'react-redux';
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();

---

🌍 路由库 - React Router

npm install react-router-dom

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

---

🌐 请求库 - Axios / SWR / React Query

Axios

npm install axios

import axios from 'axios';
axios.get('/api/user').then(res => console.log(res.data));

SWR

npm install swr

import useSWR from 'swr';
const fetcher = (url) => fetch(url).then(res => res.json());
const { data, error } = useSWR('/api/user', fetcher);

React Query

npm install @tanstack/react-query

import { useQuery } from '@tanstack/react-query';
const { data, isLoading } = useQuery(['user'], () => fetch('/api/user').then(res => res.json()));

---

🎨 UI 库

MUI (Material UI)

npm install @mui/material @emotion/react @emotion/styled

import { Button } from '@mui/material';
<Button variant="contained">按钮</Button>

Ant Design

npm install antd

import { Button } from 'antd';
<Button type="primary">按钮</Button>

Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

<button class="bg-blue-500 text-white px-4 py-2">按钮</button>

---

⚙️ 表单处理库

React Hook Form

npm install react-hook-form

import { useForm } from 'react-hook-form';
const { register, handleSubmit } = useForm();

Formik + Yup

npm install formik yup

import { useFormik } from 'formik';
import * as Yup from 'yup';

---

🔍 其他常用依赖

npm install clsx              # className 合并
npm install dayjs             # 日期格式化
npm install lodash            # 工具函数
npm install zustand           # 状态管理
npm install react-icons       # 图标库

---

✅ 总结

类型	推荐库
状态管理	Zustand, Redux Toolkit
路由	React Router
请求	Axios, SWR, React Query
UI	MUI, AntD, Tailwind CSS
表单	React Hook Form, Formik
工具	clsx, lodash, dayjs, react-icons

---

📚 推荐链接

• Awesome React Libraries
• React Router 文档
• React Query 文档
• Zustand 状态管理