React 后台管理系统开发全攻略：从零开始搭建高效应用

最新推荐文章于 2025-06-13 11:30:40 发布

原创最新推荐文章于 2025-06-13 11:30:40 发布 · 1.6k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #javascript #SET数据结构 #Axios #Fetch API #字符串操作 #信息可视化

1️⃣ 使用 Vite 创建 React 项目

2️⃣ 使用 Ant Design 搭建基础 UI

1️⃣ 使用 React Query 缓存数据

📌 React 后台管理系统开发指南

后台管理系统通常用于管理数据，比如用户、订单、商品等。它一般包括数据展示、增删改查（CRUD）、权限管理、数据可视化等功能。

一、初步搭建React 后台管理系统

📌 第一步：技术选型

✅ 前端框架：React（基于 Vite 创建项目）

✅ UI 组件库：Ant Design（企业级 UI 组件库）

✅ 路由管理：React Router

✅ 状态管理：Zustand（轻量）或 Redux（复杂应用）

✅ 数据请求：Axios（封装 API 请求）

✅ 权限管理：基于用户角色控制页面访问

✅ 数据可视化：ECharts / Recharts（用于统计图表）

📌 第二步：搭建 React 后台项目

1️⃣ 使用 Vite 创建 React 项目

npm create vite@latest admin-panel --template react
cd admin-panel
npm install

2️⃣ 安装必要依赖

npm install react-router-dom axios antd zustand echarts

📌 第三步：项目结构

admin-panel
│── src
│   ├── api/               # API 请求封装
│   ├── assets/            # 静态资源（图片、图标等）
│   ├── components/        # 复用组件
│   ├── hooks/             # 自定义 Hooks
│   ├── pages/             # 各个页面
│   │   ├── Dashboard/     # 仪表盘
│   │   ├── UserManage/    # 用户管理
│   │   ├── ProductManage/ # 商品管理
│   ├── router/            # 路由管理
│   ├── store/             # 状态管理
│   ├── App.jsx            # 入口文件
│   ├── main.jsx           # 渲染根组件
│── public/                # 公共资源
│── package.json
│── vite.config.js

📌 第四步：实现基础功能

1️⃣ 路由管理

在 router/index.jsx 中配置后台管理系统的路由：

import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import Dashboard from "../pages/Dashboard";
import UserManage from "../pages/UserManage";
import ProductManage from "../pages/ProductManage";
import NotFound from "../pages/NotFound";
function AppRouter() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate to="/dashboard" />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/users" element={<UserManage />} />
        <Route path="/products" element={<ProductManage />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}
export default AppRouter;

2️⃣ 使用 Ant Design 搭建基础 UI

安装 Ant Design：

npm install antd

在 App.jsx 中引入 Ant Design 组件：

import { Layout, Menu } from "antd";
import { Link } from "react-router-dom";
import AppRouter from "./router";
const { Header, Sider, Content } = Layout;
function App() {
  return (
    <Layout style={{ minHeight: "100vh" }}>
      {/* 侧边栏 */}
      <Sider>
        <Menu theme="dark" mode="inline">
          <Menu.Item key="1">
            <Link to="/dashboard">仪表盘</Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to="/users">用户管理</Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to="/products">商品管理</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      {/* 主内容 */}
      <Layout>
        <Header style={{ background: "#fff", padding: 0 }}>后台管理系统</Header>
        <Content style={{ margin: "16px" }}>
          <AppRouter />
        </Content>
      </Layout>
    </Layout>
  );
}
export default App;

3️⃣ 用户管理（CRUD 操作）

在 pages/UserManage.jsx 文件中，展示用户数据并支持增删改查：

import { useEffect, useState } from "react";
import { Table, Button, Modal, Form, Input, message } from "antd";
import axios from "axios";
function UserManage() {
  const [users, setUsers] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [form] = Form.useForm();
  useEffect(() => {
    fetchUsers();
  }, []);
  const fetchUsers = async () => {
    const { data } = await axios.get("https://jsonplaceholder.typicode.com/users");
    setUsers(data);
  };
  const handleAddUser = async () => {
    const values = await form.validateFields();
    setUsers([...users, { id: users.length + 1, ...values }]);
    setIsModalOpen(false);
    message.success("用户添加成功！");
  };
  return (
    <div>
      <Button type="primary" onClick={() => setIsModalOpen(true)}>添加用户</Button>
      <Table dataSource={users} rowKey="id" columns={[
        { title: "ID", dataIndex: "id" },
        { title: "姓名", dataIndex: "name" },
        { title: "邮箱", dataIndex: "email" },
      ]} />
      <Modal
        title="添加用户"
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        onOk={handleAddUser}
      >
        <Form form={form}>
          <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="email" label="邮箱" rules={[{ required: true, type: "email" }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
export default UserManage;

4️⃣ 数据可视化（ECharts）

安装 ECharts：

npm install echarts

在 pages/Dashboard.jsx 中添加一个折线图：

import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
function Dashboard() {
  const chartRef = useRef(null);
  useEffect(() => {
    const chartInstance = echarts.init(chartRef.current);
    chartInstance.setOption({
      title: { text: "销售数据" },
      tooltip: {},
      xAxis: { data: ["1月", "2月", "3月", "4月", "5月"] },
      yAxis: {},
      series: [{ type: "line", data: [5, 20, 36, 10, 10] }],
    });
  }, []);
  return <div ref={chartRef} style={{ width: "100%", height: 400 }} />;
}
export default Dashboard;

二、进一步完善 React 后台管理系统

我们可以从用户权限、数据管理、API 优化、界面美化等方面提升系统的可用性和安全性。

✅ 第一部分：用户权限管理

目标： 实现用户登录、角色权限控制，不同角色可访问不同页面。

1️⃣ 添加登录页面

在 pages/Login.jsx 中创建一个登录表单：

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Input, Button, message } from "antd";
function Login() {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const handleLogin = (values) => {
    setLoading(true);
    setTimeout(() => {
      localStorage.setItem("user", JSON.stringify(values)); // 模拟存储用户信息
      message.success("登录成功！");
      navigate("/dashboard");
    }, 1000);
  };
  return (
    <div style={{ width: 300, margin: "100px auto" }}>
      <h2>用户登录</h2>
      <Form onFinish={handleLogin}>
        <Form.Item name="username" rules={[{ required: true, message: "请输入用户名！" }]}>
          <Input placeholder="用户名" />
        </Form.Item>
        <Form.Item name="password" rules={[{ required: true, message: "请输入密码！" }]}>
          <Input.Password placeholder="密码" />
        </Form.Item>
        <Button type="primary" htmlType="submit" loading={loading} block>
          登录
        </Button>
      </Form>
    </div>
  );
}
export default Login;

2️⃣ 保护后台路由

在 router/index.jsx 添加路由守卫，未登录用户跳转到登录页：

import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import Dashboard from "../pages/Dashboard";
import UserManage from "../pages/UserManage";
import ProductManage from "../pages/ProductManage";
import Login from "../pages/Login";
function PrivateRoute({ children }) {
  const user = localStorage.getItem("user");
  return user ? children : <Navigate to="/login" />;
}
function AppRouter() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
        <Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
        <Route path="/users" element={<PrivateRoute><UserManage /></PrivateRoute>} />
        <Route path="/products" element={<PrivateRoute><ProductManage /></PrivateRoute>} />
      </Routes>
    </Router>
  );
}
export default AppRouter;

✅ 第二部分：API 请求优化

目标： 统一管理 API 请求，优化代码结构。

1️⃣ 封装 Axios

在 api/request.js 创建一个 Axios 实例：

import axios from "axios";
import { message } from "antd";
const request = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com",
  timeout: 5000,
});
// 请求拦截器（加上 token）
request.interceptors.request.use((config) => {
  const user = localStorage.getItem("user");
  if (user) {
    config.headers.Authorization = 
Bearer ${JSON.parse(user).token}
;
  }
  return config;
}, (error) => Promise.reject(error));
// 响应拦截器（错误处理）
request.interceptors.response.use((response) => response.data, (error) => {
  message.error("请求失败，请稍后重试");
  return Promise.reject(error);
});
export default request;

2️⃣ 统一管理 API

在 api/user.js 中管理用户 API：

import request from "./request";
export const getUsers = () => request.get("/users");
export const addUser = (data) => request.post("/users", data);
export const deleteUser = (id) => request.delete(/users/${id});

在 pages/UserManage.jsx 直接使用：

import { useEffect, useState } from "react";
import { Table, Button, message } from "antd";
import { getUsers, deleteUser } from "../api/user";
function UserManage() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    getUsers().then(setUsers);
  }, []);
  const handleDelete = async (id) => {
    await deleteUser(id);
    message.success("删除成功");
    setUsers(users.filter(user => user.id !== id));
  };
  return (
    <Table dataSource={users} rowKey="id" columns={[
      { title: "ID", dataIndex: "id" },
      { title: "姓名", dataIndex: "name" },
      { title: "操作", render: (_, record) => <Button onClick={() => handleDelete(record.id)}>删除</Button> },
    ]} />
  );
}
export default UserManage;

✅ 第三部分：用户权限管理

目标： 不同角色（管理员/普通用户）可访问不同页面。

1️⃣ 在本地存储角色

在 Login.jsx 里模拟不同角色：

localStorage.setItem("user", JSON.stringify({ username: values.username, role: "admin" }));

2️⃣ 根据角色控制页面访问

在 router/index.jsx 添加权限验证：

const user = JSON.parse(localStorage.getItem("user"));
const role = user?.role;
<Route path="/users" element={role === "admin" ? <UserManage /> : <Navigate to="/dashboard" />} />
<Route path="/products" element={role ? <ProductManage /> : <Navigate to="/dashboard" />} />

🔹 普通用户 访问 /users 时，会被重定向到 /dashboard。

✅ 第四部分：界面优化

1️⃣ 主题切换

用 useContext 管理主题：

import { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}
export function useTheme() {
  return useContext(ThemeContext);
}

在 App.jsx 里应用主题：

import { useTheme } from "./theme";
function App() {
  const { theme, setTheme } = useTheme();
  return (
    <Layout style={{ background: theme === "dark" ? "#333" : "#fff" }}>
      <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>切换主题</Button>
    </Layout>
  );
}

💡 你最想优先优化哪一部分？或者有其他想法？ 😊

三、进一步优化 React 后台管理系统

接下来，我们将继续优化系统，重点关注用户管理、商品管理、日志系统、数据导出等功能。

✅ 第一部分：用户管理优化

目标： 添加分页、搜索、编辑功能，提升用户管理体验。

1️⃣ 添加分页

在 Table 组件中启用分页：

<Table
  dataSource={users}
  rowKey="id"
  pagination={{ pageSize: 5 }}
  columns={[...]} 
/>

2️⃣ 添加搜索功能

在 UserManage.jsx 组件中，实现用户搜索：

import { Input } from "antd";
const [searchText, setSearchText] = useState("");
const filteredUsers = users.filter(user =>
  user.name.toLowerCase().includes(searchText.toLowerCase())
);
return (
  <>
    <Input
      placeholder="搜索用户"
      onChange={(e) => setSearchText(e.target.value)}
      style={{ marginBottom: 10, width: 200 }}
    />
    <Table dataSource={filteredUsers} rowKey="id" columns={columns} />
  </>
);

3️⃣ 添加编辑用户功能

用户信息支持编辑：

const handleEdit = async (record) => {
  form.setFieldsValue(record);
  setIsModalOpen(true);
};
<Table
  columns={[
    { title: "姓名", dataIndex: "name" },
    {
      title: "操作",
      render: (_, record) => <Button onClick={() => handleEdit(record)}>编辑</Button>,
    },
  ]}
/>

✅ 第二部分：商品管理优化

目标： 上传图片、库存管理、分类筛选，让商品管理更完善。

1️⃣ 上传图片

在 pages/ProductManage.jsx 添加 Ant Design 的 Upload 组件：

import { Upload, Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";
<Upload action="/api/upload">
  <Button icon={<UploadOutlined />}>上传图片</Button>
</Upload>;

2️⃣ 商品库存管理

在商品表格中动态调整库存：

const handleStockChange = (id, value) => {
  setProducts(products.map(p => (p.id === id ? { ...p, stock: value } : p)));
};
<Table
  columns={[
    { title: "商品名称", dataIndex: "name" },
    { title: "库存", dataIndex: "stock", render: (_, record) => (
      <InputNumber min={0} value={record.stock} onChange={value => handleStockChange(record.id, value)} />
    )},
  ]}
/>

3️⃣ 商品分类筛选

在 ProductManage.jsx 里添加分类筛选：

import { Select } from "antd";
const categories = ["电子产品", "服饰", "食品"];
<Select
  placeholder="选择分类"
  onChange={(value) => setCategory(value)}
  options={categories.map(c => ({ value: c, label: c }))}
  style={{ width: 200, marginBottom: 10 }}
/>;

✅ 第三部分：日志系统

目标： 记录用户在系统内的操作，如增删改查，并展示日志信息。

1️⃣ 记录用户操作

创建 store/logStore.js 进行日志存储：

import { create } from "zustand";
const useLogStore = create((set) => ({
  logs: [],
  addLog: (message) => set((state) => ({ logs: [...state.logs, { id: Date.now(), message }] })),
}));
export default useLogStore;

在 UserManage.jsx 记录日志：

import useLogStore from "../store/logStore";
const { addLog } = useLogStore();
const handleDelete = async (id) => {
  await deleteUser(id);
  addLog(
用户 ID: ${id} 被删除
);
};

2️⃣ 展示操作日志

在 pages/Log.jsx 里展示日志：

import useLogStore from "../store/logStore";
import { List } from "antd";
const Log = () => {
  const { logs } = useLogStore();
  return (
    <List
      header={<b>操作日志</b>}
      dataSource={logs}
      renderItem={(item) => <List.Item>{item.message}</List.Item>}
    />
  );
};
export default Log;

✅ 第四部分：数据导出（Excel）

目标： 将用户数据导出为 Excel 文件。

1️⃣ 安装 xlsx

npm install xlsx file-saver

2️⃣ 实现导出功能

在 UserManage.jsx 添加导出按钮：

import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
const exportToExcel = () => {
  const worksheet = XLSX.utils.json_to_sheet(users);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "用户数据");
  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
  const blob = new Blob([excelBuffer], { type: "application/octet-stream" });
  saveAs(blob, "用户数据.xlsx");
};
<Button onClick={exportToExcel}>导出 Excel</Button>;

四、继续优化 React 后台管理系统

本次优化将重点关注用户体验、权限管理、系统性能优化等内容。

✅ 第一部分：优化用户体验

目标： 提高系统的交互体验，使界面更加流畅、美观。

1️⃣ 添加加载状态

在 UserManage.jsx 中，使用 loading 状态来显示加载效果：

const [loading, setLoading] = useState(true);
useEffect(() => {
  getUsers().then(data => {
    setUsers(data);
    setLoading(false);
  });
}, []);
<Table loading={loading} dataSource={users} rowKey="id" columns={columns} />;

2️⃣ 增加页面动画

安装 Framer Motion：

npm install framer-motion

在 Dashboard.jsx 添加页面进入动画：

import { motion } from "framer-motion";
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
  <h2>欢迎来到后台管理系统</h2>
</motion.div>;

3️⃣ 添加主题切换

在 App.jsx 里使用 useContext 实现黑暗模式：

import { createContext, useContext, useState } from "react";
import { Button } from "antd";
const ThemeContext = createContext();
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div style={{ background: theme === "dark" ? "#333" : "#fff", minHeight: "100vh" }}>
        {children}
        <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
          切换主题
        </Button>
      </div>
    </ThemeContext.Provider>
  );
}
export function useTheme() {
  return useContext(ThemeContext);
}

✅ 第二部分：权限管理优化

目标： 提供更细粒度的权限控制，确保不同角色访问不同功能。

1️⃣ 角色与权限定义

在 store/authStore.js 中管理角色：

import { create } from "zustand";
const useAuthStore = create((set) => ({
  user: JSON.parse(localStorage.getItem("user")) || null,
  setUser: (user) => {
    localStorage.setItem("user", JSON.stringify(user));
    set({ user });
  },
}));
export default useAuthStore;

2️⃣ 根据角色控制访问

在 router/index.jsx 限制访问：

const user = JSON.parse(localStorage.getItem("user"));
const role = user?.role;
<Route path="/users" element={role === "admin" ? <UserManage /> : <Navigate to="/dashboard" />} />;

✅ 第三部分：系统性能优化

目标： 提升页面响应速度，减少不必要的 API 请求。

1️⃣ 使用 React Query 缓存数据

安装：

npm install @tanstack/react-query

创建 useUsers.js：

import { useQuery } from "@tanstack/react-query";
import { getUsers } from "../api/user";
export function useUsers() {
  return useQuery(["users"], getUsers, { staleTime: 5 * 60 * 1000 });
}

在 UserManage.jsx 里使用：

import { useUsers } from "../hooks/useUsers";
const { data: users, isLoading } = useUsers();
<Table loading={isLoading} dataSource={users} rowKey="id" columns={columns} />;

2️⃣ 代码拆分，按需加载

使用 React lazy 和 Suspense：

import { lazy, Suspense } from "react";
const UserManage = lazy(() => import("../pages/UserManage"));
<Suspense fallback={<div>加载中...</div>}>
  <UserManage />
</Suspense>;

五、继续优化 React 后台管理系统

本次优化将聚焦于提升 UI 交互（拖拽、动态表单）、优化权限管理（按钮级权限控制）、提升系统性能（WebSocket 实时更新、PWA 支持）。

✅ 第一部分：提升 UI 交互

目标： 让界面更加流畅，支持拖拽排序和动态表单。

1️⃣ 添加拖拽排序

使用 react-beautiful-dnd 实现拖拽：

npm install react-beautiful-dnd

在 UserManage.jsx 里实现：

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const onDragEnd = (result) => {
  if (!result.destination) return;
  const reorderedUsers = [...users];
  const [movedItem] = reorderedUsers.splice(result.source.index, 1);
  reorderedUsers.splice(result.destination.index, 0, movedItem);
  setUsers(reorderedUsers);
};
<DragDropContext onDragEnd={onDragEnd}>
  <Droppable droppableId="users">
    {(provided) => (
      <Table
        {...provided.droppableProps}
        ref={provided.innerRef}
        dataSource={users}
        rowKey="id"
        columns={[
          {
            title: "姓名",
            dataIndex: "name",
            render: (text, record, index) => (
              <Draggable draggableId={record.id.toString()} index={index}>
                {(provided) => (
                  <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                    {text}
                  </div>
                )}
              </Draggable>
            ),
          },
        ]}
      />
    )}
  </Droppable>
</DragDropContext>;

2️⃣ 动态表单

在 UserForm.jsx 里支持动态增删字段：

import { Form, Input, Button } from "antd";
const DynamicForm = () => {
  const [form] = Form.useForm();
  return (
    <Form form={form}>
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <div key={key} style={{ display: "flex", alignItems: "center" }}>
                <Form.Item {...restField} name={[name, "username"]} rules={[{ required: true }]}>
                  <Input placeholder="用户名" />
                </Form.Item>
                <Button onClick={() => remove(name)}>删除</Button>
              </div>
            ))}
            <Button type="dashed" onClick={() => add()}>
              添加用户
            </Button>
          </>
        )}
      </Form.List>
    </Form>
  );
};

✅ 第二部分：优化权限管理

目标： 细化权限控制，支持按钮级权限管理。

1️⃣ 定义权限配置

在 permissions.js 里定义权限：

const permissions = {
  admin: ["view_users", "edit_users", "delete_users"],
  editor: ["view_users", "edit_users"],
  viewer: ["view_users"],
};
export default permissions;

2️⃣ 控制按钮权限

在 UserManage.jsx 里检查用户权限：

import permissions from "../permissions";
const userRole = JSON.parse(localStorage.getItem("user")).role;
const hasPermission = (action) => permissions[userRole]?.includes(action);
<Table
  columns={[
    {
      title: "操作",
      render: (_, record) => (
        <>
          {hasPermission("edit_users") && <Button>编辑</Button>}
          {hasPermission("delete_users") && <Button danger>删除</Button>}
        </>
      ),
    },
  ]}
/>;

✅ 第三部分：提升系统性能

目标： 通过 WebSocket 实现实时数据更新，并支持 PWA 提高加载速度。

1️⃣ WebSocket 实时数据更新

使用 socket.io：

npm install socket.io-client

在 UserManage.jsx 里监听用户变更：

import { io } from "socket.io-client";
const socket = io("http://localhost:4000");
useEffect(() => {
  socket.on("userUpdated", (updatedUser) => {
    setUsers((prev) => prev.map((user) => (user.id === updatedUser.id ? updatedUser : user)));
  });
  return () => socket.off("userUpdated");
}, []);

2️⃣ 添加 PWA 支持

安装 workbox：

npm install workbox-core workbox-precaching workbox-routing

在 public/service-worker.js 里添加：

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("app-cache").then((cache) => {
      return cache.addAll(["/", "/index.html", "/static/js/bundle.js"]);
    })
  );
});
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => response || fetch(event.request))
  );
});

在 index.js 里注册：

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js");
}

后续可优化方向

✅ 进一步增强 UI 交互（可视化数据分析、拖拽上传文件） ✅ 强化权限管理（动态权限控制，基于 API 的权限管理） ✅ 优化性能（代码拆分、服务器端渲染 SSR）

扩展阅读

React：构建高效、可复用用户界面的首选框架	https://blog.youkuaiyun.com/moton2017/article/details/146182091
React进阶之路：从入门知识到项目实战精通	https://blog.youkuaiyun.com/moton2017/article/details/146182664
React 后台管理系统开发全攻略：从零开始搭建高效应用	https://blog.youkuaiyun.com/moton2017/article/details/146183066
React开发实战：从常见问题到高级进阶全解析	https://blog.youkuaiyun.com/moton2017/article/details/146184295