前端与跨端 on 扎塔-Zata

flutter_tutorial

Thu, 14 Aug 2025 03:58:16 +0800

从零开始的fultter之路

好的，非常乐意！从零开始学习一门新技术是令人兴奋的。我们将一步一步来，从你电脑上什么都没有，一直到运行起你的第一个 Flutter 应用。

这个过程分为几个关键阶段：

环境搭建：安装所有必要的工具。
创建项目：使用命令行创建一个新的 Flutter 应用。
运行应用：在模拟器或真实设备上把应用跑起来。
理解代码：弄懂项目中最重要的文件和代码是什么意思。
动手修改：亲手改动代码并立即看到变化。

第 1 步：环境搭建 (最重要的一步)

这是最关键也是最容易遇到问题的一步，请务必保持耐心。

1. 安装 Flutter SDK

前往 Flutter 官方网站：https://flutter.dev
点击 “Get Started” 按钮。
根据你的操作系统 (Windows, macOS, or Linux) 选择相应的安装指南。官方文档是最新、最权威的，请严格按照上面的步骤操作。
- 核心操作：下载 Flutter SDK 压缩包 -> 解压到你电脑上一个固定的位置 (例如，Windows 的 C:\src\flutter 或 Mac 的 ~/development/flutter) -> 将 Flutter 的 bin 目录添加到系统的环境变量 (PATH) 中。这一步至关重要，否则后续命令会无法识别。

2. 安装代码编辑器 (IDE)

我强烈推荐 Visual Studio Code (VS Code)，它轻量且功能强大。

下载并安装 VS Code。
打开 VS Code，点击左侧的扩展图标 (Extensions)。
搜索并安装两个最重要的扩展：
- Dart
- Flutter

3. 安装目标平台的工具

你需要告诉 Flutter 在哪里运行你的应用。

如果要开发 Android 应用:
- 安装 Android Studio。
- 安装完成后，打开 Android Studio，根据向导完成设置。它会自动安装最新的 Android SDK、Android SDK 命令行工具和 Android SDK Build-Tools。
- 在 Android Studio 中，打开 Virtual Device Manager (AVD Manager) 并创建一个安卓模拟器 (Emulator)。
如果要开发 iOS 应用 (仅限 macOS):
- 从 Mac App Store 安装 Xcode。
- 安装后，打开一次 Xcode 接受许可协议。
- Xcode 会自带 iOS 模拟器 (Simulator)。

4. 运行 flutter doctor

这是 Flutter 的“诊断医生”。打开你的终端 (Terminal) 或命令行 (Command Prompt)，运行以下命令：

flutter doctor

这个命令会检查你的环境是否准备就绪。第一次运行时，它可能会显示很多错误 (用 [X] 表示)。别担心，这是正常的。flutter doctor 会清晰地告诉你缺少什么，以及如何修复它。

你的目标是让 flutter doctor 的所有项目都打上绿色对勾 [✓]。 (至少 “Flutter”, “Android toolchain” 或 “Xcode”, 以及 “VS Code” 这几项要满足)。

第 2 步：创建你的第一个 Flutter 项目

当 flutter doctor 显示一切就绪后，就可以创建项目了。

打开你的终端/命令行。
使用 cd 命令进入一个你想要存放代码的目录，例如 Desktop 或 Documents。
运行以下命令来创建项目：
```
flutter create my_first_app
```
- my_first_app 是你的项目名称，请使用小写字母和下划线。
- Flutter 会自动为你生成一个包含示例代码的项目文件夹。
进入项目目录并用 VS Code 打开它：
```
cd my_first_app
code .
```
(命令 code . 会用 VS Code 打开当前文件夹)

第 3 步：运行你的第一个应用

选择设备：在 VS Code 的右下角，你会看到一个状态栏。点击 <no device> 区域，VS Code 会在顶部显示一个可选设备列表 (包括你已经启动的模拟器或连接的真机)。选择一个设备。
启动调试：
- 最简单的方式：按 F5 键。
- 或者，点击顶部菜单的 “Run” -> “Start Debugging”。

Flutter 会开始编译代码并安装应用到你选择的设备上。第一次启动会需要几分钟时间。成功后，你会在模拟器上看到 Flutter 的默认计数器应用。

恭喜你！你已经成功运行了你的第一个 Flutter 应用！

第 4 步：理解项目结构和核心概念

现在我们来看看项目里有什么。在 VS Code 的左侧文件浏览器中，最重要的两个东西是：

lib/main.dart: 这是你的应用入口文件，几乎你所有的 Dart 代码都会写在 lib 文件夹里。默认的计数器应用代码就在这里。
pubspec.yaml: 这是项目配置文件。你可以用它来管理项目依赖 (比如添加网络请求、图片缓存等第三方库) 和资源 (比如图片、字体)。

Flutter 核心概念：

一切皆为 Widget (组件)：在 Flutter 中，按钮、文本、布局、甚至整个应用页面，都是 Widget。你通过像搭积木一样组合这些 Widget 来构建用户界面。
Widget 树：你的应用是由一个 Widget 嵌套另一个 Widget 构成的树状结构。例如，一个 Center Widget 里面可以包含一个 Text Widget。

第 5 步：动手修改 (体验 Hot Reload)

现在，我们将默认的计数器应用修改成我们之前那个简单的 “Hello, World” 应用。

打开 lib/main.dart 文件。
删除里面的所有代码。

将我们第一个回答中的 “Hello, World” 代码完整地粘贴进去。

import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Welcome to Flutter',
 home: Scaffold(
 appBar: AppBar(
 title: const Text('My First App'),
 ),
 body: const Center(
 child: Text('Hello, World!'),
 ),
 ),
 );
 }
}

保存文件 (Ctrl + S 或 Cmd + S)。

神奇的事情发生了！你几乎不需要等待，模拟器里的应用界面会瞬间从计数器更新为你刚刚编写的 “Hello, World” 页面。这就是 Hot Reload (热重载)，Flutter 的王牌特性，它极大地提升了开发效率。

下一步该做什么？

你已经迈出了最坚实的一步。接下来：

学习 Dart 语言：Flutter 是框架，Dart 是编程语言。花点时间学习 Dart 的基本语法（变量、函数、类等）。
探索常用 Widget：尝试使用更多的基础 Widget，例如 Container (容器), Row (水平布局), Column (垂直布局), ListView (列表), Image (图片) 等。
跟着官方文档学习：Flutter 官方的 Codelabs 提供了非常棒的引导式教程。
犯错和搜索：遇到问题时，学会复制错误信息到 Google 或 Stack Overflow 搜索，这是每个开发者必备的技能。

编程之路就是不断学习、实践和解决问题的过程。祝你在 Flutter 的世界里玩得开心！

Refine: 当 API 即界面，CRUD 不再是体力活

Thu, 05 Jun 2025 10:00:00 +0800

问题：后台管理界面，为什么总是重复劳动？

你有没有发现，每次写后台管理界面，都在做同样的事情：

项目列表页：表格 + 分页 + 搜索 + 排序 + 新建按钮 + 编辑按钮 + 删除按钮

项目详情页：表单 + 字段校验 + 提交按钮 + 错误提示

用户管理页：表格 + 分页 + 搜索 + 排序 + 新建按钮 + …

这些页面长得几乎一样，但你还是要：

写表格组件
写分页逻辑
写搜索过滤
写表单校验
写 API 调用
写错误处理
写乐观更新
写权限控制

一个 CRUD 页面，至少 200 行代码。10 个资源就是 2000 行。

而且这些代码有个特点：业务逻辑和 UI 混在一起。

// 典型的后台页面代码
const ProjectList = () => {
 const [projects, setProjects] = useState([]);
 const [loading, setLoading] = useState(false);
 const [page, setPage] = useState(1);
 const [search, setSearch] = useState("");

 useEffect(() => {
 setLoading(true);
 fetch(`/api/projects?page=${page}&search=${search}`)
 .then(res => res.json())
 .then(data => {
 setProjects(data.items);
 setLoading(false);
 })
 .catch(err => {
 toast.error("加载失败");
 setLoading(false);
 });
 }, [page, search]);

 // ... 还有 100 行
};

这段代码的问题：

数据获取逻辑（fetch、loading、error）和 UI 逻辑（表格、分页）混在一起
换一个资源（tasks、users），这段代码几乎要重写一遍
后端 API 改了，前端要改 N 个地方

这就是 Refine 要解决的问题。

Refine 是什么？

Refine 不是 UI 库，不是组件库，而是一个 元框架（meta-framework）。

它的核心思想：

你的后端 API 长什么样，前端 CRUD 就长什么样。

用一张图说明：

┌─────────────────────────────────────────────────────────────┐
│ 后端 API 结构 │
│ GET /api/projects → 列表页（表格 + 分页 + 搜索） │
│ GET /api/projects/:id → 详情页（表单展示） │
│ POST /api/projects → 新建页（表单 + 校验） │
│ PUT /api/projects/:id → 编辑页（表单 + 校验） │
│ DELETE /api/projects/:id → 删除功能 │
└─────────────────────────────────────────────────────────────┘
 ↓
 Refine 自动映射
 ↓
┌─────────────────────────────────────────────────────────────┐
│ 前端页面结构 │
│ /projects → ProjectList 组件 │
│ /projects/:id → ProjectShow 组件 │
│ /projects/create → ProjectCreate 组件 │
│ /projects/edit/:id → ProjectEdit 组件 │
└─────────────────────────────────────────────────────────────┘

你只需要告诉 Refine：

你的 API 在哪里（Data Provider）
你有哪些资源（Resource）
用什么 UI（shadcn/ui、Material UI、Ant Design…）

Refine 会帮你生成：

数据获取逻辑
路由配置
侧边栏菜单
权限控制
表单校验
错误处理

核心概念 1：Headless（无头）

这是 Refine 最关键的设计决策：业务逻辑和 UI 完全分离。

Refine 提供什么？

// Refine 提供的核心能力
import {
 useList, // 列表数据获取
 useOne, // 单条数据获取
 useCreate, // 新建
 useUpdate, // 更新
 useDelete, // 删除
 useForm, // 表单状态管理
 useNavigation,// 路由跳转
 useCan, // 权限判断
} from "@refinedev/core";

这些 hooks 不依赖任何 UI 库。它们只负责：

发 API 请求
管理请求状态（loading、error、data）
缓存数据
乐观更新

你用什么 UI？

完全自由。Refine 官方提供了集成：

@refinedev/mui — Material UI
@refinedev/antd — Ant Design
@refinedev/mantine — Mantine
@refinedev/chakra — Chakra UI

或者用你自己的组件：

// 用 shadcn/ui 的 Table
import { Table } from "@/components/ui/table";
import { useList } from "@refinedev/core";

const ProjectList = () => {
 const { data, isLoading } = useList({
 resource: "projects",
 });

 return (
 <Table>
 {data?.data.map(project => (
 <TableRow key={project.id}>
 <TableCell>{project.name}</TableCell>
 </TableRow>
 ))}
 </Table>
 );
};

对比 Ant Design Pro：

维度	Ant Design Pro	Refine
UI 库	强绑定 Ant Design	任意 UI 库
业务逻辑	和 UI 耦合	完全分离
自定义	要覆盖 Pro 组件	直接用自己的组件
学习成本	要学 Pro 组件体系	只学 Refine hooks

核心概念 2：Resource（资源）

Refine 把一切后台对象抽象成 Resource。

资源的定义

<Refine
 resources={[
 {
 name: "projects", // API 路径
 list: "/projects", // 列表页路由
 create: "/projects/create", // 新建页路由
 edit: "/projects/edit/:id", // 编辑页路由
 show: "/projects/:id", // 详情页路由
 meta: {
 label: "项目", // 侧边栏显示名称
 icon: <ProjectIcon />, // 侧边栏图标
 }
 },
 {
 name: "tasks",
 list: "/tasks",
 create: "/tasks/create",
 edit: "/tasks/edit/:id",
 },
 {
 name: "users",
 list: "/team", // 路由可以自定义
 },
 ]}
/>

这段配置做了什么？

1. 自动生成侧边栏菜单

┌──────────────┐
│ 📁 项目 │
│ ✅ 任务 │
│ 👥 团队 │
└──────────────┘

2. 自动生成路由表

/projects → 项目列表
/projects/create → 新建项目
/projects/edit/123 → 编辑项目 123
/projects/123 → 项目详情
/tasks → 任务列表
...

3. 自动关联 Data Provider

当你调用 useList({ resource: "projects" })，Refine 知道要去 /api/projects 取数据。

对比传统方式：

// 传统方式：每个页面单独写
<Route path="/projects" element={<ProjectList />} />
<Route path="/projects/create" element={<ProjectCreate />} />
<Route path="/projects/edit/:id" element={<ProjectEdit />} />
<Route path="/tasks" element={<TaskList />} />
<Route path="/tasks/create" element={<TaskCreate />} />
// ... 重复 N 次

用 Refine，配置一次，路由、菜单、数据源全部搞定。

核心概念 3：Data Provider（数据提供者）

这是 Refine 最有价值的设计。

Data Provider 的接口

const dataProvider = {
 // 获取列表（带分页、过滤、排序）
 getList: async ({ resource, pagination, filters, sorters }) => {
 const { current, pageSize } = pagination;
 const response = await fetch(
 `/api/${resource}?` +
 `_start=${(current - 1) * pageSize}&` +
 `_end=${current * pageSize}&` +
 filters.map(f => `${f.field}=${f.value}`).join('&')
 );
 const data = await response.json();
 const total = parseInt(response.headers.get('x-total-count'));

 return { data, total };
 },

 // 获取单条
 getOne: async ({ resource, id }) => {
 const response = await fetch(`/api/${resource}/${id}`);
 const data = await response.json();
 return { data };
 },

 // 新建
 create: async ({ resource, variables }) => {
 const response = await fetch(`/api/${resource}`, {
 method: 'POST',
 body: JSON.stringify(variables),
 });
 const data = await response.json();
 return { data };
 },

 // 更新
 update: async ({ resource, id, variables }) => {
 const response = await fetch(`/api/${resource}/${id}`, {
 method: 'PUT',
 body: JSON.stringify(variables),
 });
 const data = await response.json();
 return { data };
 },

 // 删除
 deleteOne: async ({ resource, id }) => {
 await fetch(`/api/${resource}/${id}`, { method: 'DELETE' });
 return { data: { id } };
 },
};

这个接口的意义

一次实现，所有页面复用。

// 项目列表页
const ProjectList = () => {
 const { data } = useList({ resource: "projects" });
 // 自动调用 dataProvider.getList({ resource: "projects" })
};

// 任务列表页
const TaskList = () => {
 const { data } = useList({ resource: "tasks" });
 // 自动调用 dataProvider.getList({ resource: "tasks" })
};

// 项目编辑页
const ProjectEdit = () => {
 const { data } = useOne({ resource: "projects", id: 123 });
 // 自动调用 dataProvider.getOne({ resource: "projects", id: 123 })
};

你不用在每个页面写 fetch。Refine 帮你：

拼接 URL
处理分页参数
处理过滤参数
处理排序参数
缓存响应
处理错误

内置的 Data Provider

Refine 提供了 15+ 开箱即用的 Data Provider：

Provider	用途
`@refinedev/simple-rest`	标准 REST API
`@refinedev/graphql`	GraphQL API
`@refinedev/strapi`	Strapi CMS
`@refinedev/supabase`	Supabase
`@refinedev/hasura`	Hasura GraphQL
`@refinedev/nestjs-crud`	NestJS CRUD
`@refinedev/airtable`	Airtable
`@refinedev/firebase`	Firebase

如果你的后端是 FastAPI，写一个自定义 Data Provider 即可：

// customDataProvider.ts
import dataProvider from "@refinedev/simple-rest";

export const customDataProvider = {
 ...dataProvider("https://your-fastapi.com/api"),

 // 自定义 getList，适配你的 FastAPI 分页格式
 getList: async ({ resource, pagination, filters, sorters }) => {
 const response = await fetch(
 `/api/${resource}?` +
 `page=${pagination.current}&` +
 `size=${pagination.pageSize}`
 );
 const { items, total } = await response.json();
 return { data: items, total };
 },
};

核心概念 4：Auth Provider（认证提供者）

认证逻辑也抽象成 Provider：

const authProvider = {
 // 登录
 login: async ({ email, password }) => {
 const response = await fetch("/api/auth/login", {
 method: "POST",
 body: JSON.stringify({ email, password }),
 });

 if (response.ok) {
 const { token } = await response.json();
 localStorage.setItem("token", token);
 return { success: true };
 }

 return { success: false, error: { message: "登录失败" } };
 },

 // 登出
 logout: async () => {
 localStorage.removeItem("token");
 return { success: true };
 },

 // 检查登录状态
 check: async () => {
 const token = localStorage.getItem("token");
 return token
 ? { authenticated: true }
 : { authenticated: false, redirectTo: "/login" };
 },

 // 获取当前用户
 getIdentity: async () => {
 const response = await fetch("/api/auth/me");
 const user = await response.json();
 return user;
 },

 // 权限检查
 can: async ({ action, resource }) => {
 const user = await authProvider.getIdentity();
 return user.role === "admin" || user.permissions.includes(`${action}:${resource}`);
 },
};

使用方式

// 包裹整个应用
<Refine
 authProvider={authProvider}
 // ...
>
 <App />
</Refine>

// 在组件中使用
import { useCan } from "@refinedev/core";

const DeleteButton = ({ projectId }) => {
 const { data: canDelete } = useCan({
 action: "delete",
 resource: "projects",
 params: { id: projectId },
 });

 return canDelete ? <Button>删除</Button> : null;
};

Refine 会自动处理：

未登录跳转到 /login
登录后跳回原页面
侧边栏根据权限显示/隐藏菜单项
按钮根据权限显示/隐藏

核心概念 5：Inferencer（自动生成 CRUD 页面）

这是最惊艳的功能。

使用方式

# 安装 Inferencer
npm install @refinedev/inferencer

# 运行
npx @refinedev/cli@latest inferencer

Inferencer 做了什么？

读取你的 API Schema（通过 Data Provider）
分析字段类型：
- string → 文本输入框
- number → 数字输入框
- boolean → 开关
- date → 日期选择器
- enum → 下拉选择
- relation → 关联选择器
生成完整的 CRUD 页面代码

生成的代码示例

// Inferencer 生成的列表页（简化版）
import { List, useTable } from "@refinedev/antd";
import { Table } from "antd";

export const ProjectList = () => {
 const { tableProps } = useTable({
 resource: "projects",
 });

 return (
 <List>
 <Table {...tableProps}>
 <Table.Column dataIndex="id" title="ID" />
 <Table.Column dataIndex="name" title="名称" />
 <Table.Column dataIndex="status" title="状态" />
 <Table.Column dataIndex="created_at" title="创建时间" />
 <Table.Column
 title="操作"
 render={(record) => (
 <>
 <EditButton hideText recordItemId={record.id} />
 <DeleteButton hideText recordItemId={record.id} />
 </>
 )}
 />
 </Table>
 </List>
 );
};

这个代码你可以：

直接使用（功能完整）
作为起点修改（符合你的需求）
保留核心逻辑，换 UI（用 shadcn/ui 替换 Ant Design）

实战：用 Refine + shadcn/ui 搭建后台

步骤 1：创建项目

npm create refine-app@latest my-admin -- \
 --preset next \
 --ui shadcn

步骤 2：配置 Data Provider

// src/dataProvider.ts
import dataProvider from "@refinedev/simple-rest";

export const dataProvider = {
 ...dataProvider("https://your-fastapi.com/api"),

 // 适配 FastAPI 的分页格式
 getList: async ({ resource, pagination, filters, sorters }) => {
 const params = new URLSearchParams({
 page: String(pagination.current),
 size: String(pagination.pageSize),
 });

 const response = await fetch(`/api/${resource}?${params}`);
 const { items, total } = await response.json();

 return { data: items, total };
 },
};

步骤 3：配置资源

// src/app.tsx
import { Refine } from "@refinedev/core";
import { dataProvider } from "./dataProvider";

export default function App() {
 return (
 <Refine
 dataProvider={dataProvider}
 resources={[
 {
 name: "projects",
 list: "/projects",
 create: "/projects/create",
 edit: "/projects/edit/:id",
 meta: { label: "项目" },
 },
 {
 name: "tasks",
 list: "/tasks",
 create: "/tasks/create",
 edit: "/tasks/edit/:id",
 meta: { label: "任务" },
 },
 {
 name: "users",
 list: "/team",
 meta: { label: "团队" },
 },
 ]}
 >
 {/* 你的路由配置 */}
 </Refine>
 );
}

步骤 4：用 Inferencer 生成页面

npx @refinedev/cli@latest inferencer

这会在 src/pages/ 下生成：

pages/
 projects/
 list.tsx
 show.tsx
 create.tsx
 edit.tsx
 tasks/
 list.tsx
 show.tsx
 create.tsx
 edit.tsx
 users/
 list.tsx

步骤 5：美化 UI

生成的代码用的是 shadcn/ui 组件。你可以直接修改：

// src/pages/projects/list.tsx
import { Table } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { useList } from "@refinedev/core";

export const ProjectList = () => {
 const { data, isLoading } = useList({ resource: "projects" });

 if (isLoading) return <div>加载中...</div>;

 return (
 <div className="p-6">
 <div className="flex justify-between mb-4">
 <h1 className="text-2xl font-bold">项目列表</h1>
 <Button>新建项目</Button>
 </div>

 <Table>
 <TableHeader>
 <TableRow>
 <TableHead>名称</TableHead>
 <TableHead>状态</TableHead>
 <TableHead>创建时间</TableHead>
 </TableRow>
 </TableHeader>
 <TableBody>
 {data?.data.map((project) => (
 <TableRow key={project.id}>
 <TableCell>{project.name}</TableCell>
 <TableCell>{project.status}</TableCell>
 <TableCell>{project.created_at}</TableCell>
 </TableRow>
 ))}
 </TableBody>
 </Table>
 </div>
 );
};

对比：Refine vs 传统开发

假设你要开发一个包含 5 个资源的后台（projects、tasks、users、teams、settings）：

能力	传统开发	用 Refine
列表分页	每个页面手写（5 × 50 行）	自动
搜索过滤	每个页面手写（5 × 30 行）	自动
排序	每个页面手写（5 × 20 行）	自动
新建表单	每个页面手写（5 × 100 行）	自动生成
编辑表单	每个页面手写（5 × 100 行）	自动生成
API 错误处理	每个调用手写（N × 10 行）	统一处理
乐观更新	手写（复杂）	内置
权限控制	每个按钮判断（N × 5 行）	Provider 统一
侧边栏菜单	手写配置（50 行）	自动生成
路由配置	手写（5 × 4 × 5 行）	自动生成
总代码量	约 3000 行	约 300 行（主要是 Data Provider + UI 美化）

开发时间对比：

阶段	传统开发	用 Refine
搭建框架	2 天	0.5 天
写 CRUD 页面	5 天	0.5 天（Inferencer）
美化 UI	2 天	2 天
处理边界情况	3 天	1 天
总计	12 天	4 天

Refine 的局限

1. 后端 API 要规范

Refine 的核心假设：API 即界面。

如果你的 API 是标准的 RESTful：

GET /api/projects
GET /api/projects/:id
POST /api/projects
PUT /api/projects/:id
DELETE /api/projects/:id

Refine 可以零成本对接。

但如果你的 API 比较随意：

GET /api/get_project_list
POST /api/create_new_project
GET /api/project_detail?id=123

你就得写很多自定义 Data Provider，优势减弱。

建议：用 Refine 之前，先规范后端 API。

2. 学习成本

Refine 的概念：

Data Provider
Auth Provider
Resource
Access Control
Live Mode（实时更新）
Audit Log（操作日志）

学习曲线：中等。比从头写低，比用 Ant Design Pro 高。

3. 复杂场景还是要手写

如果你的页面：

有复杂的图表
有拖拽排序
有复杂的联动逻辑
有非 CRUD 的业务

Refine 帮不了你。它只解决 CRUD 部分。

但好消息是：Refine 不妨碍你手写。你可以在 Refine 项目里混用手写页面。

总结：Refine 的价值

Refine 解决了一个真实痛点：后台管理界面的重复劳动。

它的核心价值：

API 驱动界面：后端 API 结构决定前端页面结构
Headless 设计：业务逻辑和 UI 完全分离
Provider 抽象：数据、认证、权限统一管理
Inferencer：自动生成 CRUD 页面代码

适合的场景：

后台管理系统
Admin Panel
Dashboard
B2B 应用
内部工具

不适合的场景：

面向 C 端的产品（UI 要求高）
非 CRUD 为主的业务
API 非常不规范的后端

我的建议：

如果你的项目符合以下条件，强烈推荐尝试 Refine：

后端是 RESTful API（或者可以改成 RESTful）
大部分页面是 CRUD
愿意接受新的架构方式
用 React 技术栈

Refine + shadcn/ui 是一个很好的组合：Refine 负责业务逻辑，shadcn/ui 负责美观 UI。

这样既享受了 Refine 的开发效率，又不会变成 Ant Design 那种"一眼模板"的 UI。

参考

React框架使用教程

Thu, 29 May 2025 13:46:52 +0800

基础知识

📚 1. 学习 React 前的准备

在开始学习 React 之前，你需要对以下技术有一定的了解：

HTML (超文本标记语言)：了解基本的 HTML 结构和标签。
CSS (层叠样式表)：了解如何使用 CSS 来设置页面样式。
JavaScript (JS)：这是最重要的。你需要掌握 JavaScript 的基础知识，包括：
- 变量、数据类型、操作符
- 函数（特别是箭头函数 =>）
- 数组和对象（包括解构赋值、扩展运算符 ...）
- ES6+ 模块 (import/export)
- this 关键字 (虽然在函数组件中不常用，但理解其基本概念有益)
- 异步编程 (Promises, async/await) - 在后续学习中会用到

🛠️ 2. 搭建 React 开发环境

最快上手 React 的方式是使用官方推荐的脚手架工具 Create React App。

安装 Node.js 和 npm (或 yarn)：
- React 开发依赖 Node.js 环境。访问 Node.js 官网下载并安装最新 LTS (长期支持) 版本。
- npm (Node Package Manager) 会随 Node.js 一起安装。你也可以选择使用 yarn 作为包管理工具。
创建你的第一个 React 应用：打开你的终端或命令行工具，运行以下命令：
```
npx create-react-app my-react-app
```
这里 my-react-app 是你的项目名称，你可以替换成任何你喜欢的名字。 npx 是一个 npm 包运行器，它会下载最新版本的 create-react-app 并执行它。
进入项目目录并启动开发服务器：
```
cd my-react-app
npm start
```
或者，如果你使用 yarn：
```
cd my-react-app
yarn start
```
这会启动一个本地开发服务器（通常在 http://localhost:3000），并在你的浏览器中自动打开应用。当你修改代码并保存时，页面会自动刷新。

📂 3. 了解项目结构

create-react-app 会生成一个标准的项目结构：

my-react-app/
├── node_modules/ # 项目依赖的第三方库
├── public/ # 存放静态资源
│ ├── index.html # 应用的 HTML 入口文件
│ └── ... # 其他如 favicon.ico, manifest.json 等
├── src/ # 主要的源代码目录
│ ├── App.css # App 组件的样式
│ ├── App.js # 主要的 App 组件
│ ├── App.test.js # App 组件的测试文件
│ ├── index.css # 全局样式
│ ├── index.js # JavaScript 的入口文件，将 App 组件渲染到 HTML 中
│ ├── logo.svg # 示例图片
│ └── ... # 其他辅助文件
├── .gitignore # Git 忽略文件配置
├── package.json # 项目元数据和依赖项列表
├── package-lock.json # (或 yarn.lock) 锁定依赖版本
└── README.md # 项目说明文件

public/index.html：这是你的单页面应用的唯一 HTML 文件。React 会将你的组件渲染到这个文件中的某个 DOM 元素（通常是一个 id="root" 的 div）。
src/index.js：这是 JavaScript 的入口。它使用 ReactDOM.render() 方法将你的主组件（通常是 App 组件）挂载到 public/index.html 中的 div#root元素上。
src/App.js：这是应用的根组件。你将从这里开始构建你的用户界面。

✨ 4. React核心概念

a. JSX (JavaScript XML)

JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的结构。浏览器并不直接支持 JSX，它需要通过 Babel 这样的转译器转换为普通的 JavaScript 对象。

示例：

const name = "React 学习者";
const element = <h1>你好, {name}!</h1>; // JSX 表达式

// 上面的 JSX 实际上会被 Babel 转译成类似这样的 JavaScript：
// const element = React.createElement('h1', null, '你好, ', name, '!');

在 JSX 中：

你可以嵌入 JavaScript 表达式，用花括号 {} 包裹。
HTML 属性名需要使用驼峰命名法（例如 className 而不是 class，onClick 而不是 onclick）。
所有标签必须闭合（例如 <img /> 或 <div></div>）。

b. 组件 (Components)

组件是 React 的核心。它们是独立且可复用的代码块，负责渲染 UI 的一部分。React 主要有两种类型的组件：

函数组件 (Functional Components)：这是目前推荐的方式。它们是简单的 JavaScript 函数，接收一个 props 对象作为参数，并返回一个 React 元素（通常是 JSX）。

// src/components/Welcome.js
import React from 'react';

function Welcome(props) {
 return <h1>你好, {props.name}!</h1>;
}

export default Welcome;

使用组件：

// src/App.js
import React from 'react';
import Welcome from './components/Welcome'; // 假设你创建了components目录

function App() {
 return (
 <div>
 <Welcome name="张三" />
 <Welcome name="李四" />
 </div>
 );
}

export default App;

类组件 (Class Components)：这是老版本 React 中常用的方式，基于 ES6 的 class。它们需要继承 React.Component 并实现一个 render() 方法。

// src/components/Greeting.js
import React from 'react';

class Greeting extends React.Component {
 render() {
 return <h1>你好, {this.props.name}! (来自类组件)</h1>;
 }
}

export default Greeting;

建议：对于新项目，优先使用函数组件和 Hooks。

c. Props (属性)

Props (properties 的缩写) 是组件的配置信息。它们是从父组件传递给子组件的数据。Props 是只读的，子组件不能直接修改接收到的 props。

示例见上面的 Welcome 组件，name 就是一个 prop。

d. State (状态)

State 是组件内部私有的数据，它可以随时间变化（例如用户交互、网络响应等）。当组件的 state 改变时，React 会自动重新渲染该组件。

在函数组件中，我们使用 useState Hook 来管理 state。

// src/components/Counter.js
import React, { useState } from 'react'; // 引入 useState Hook

function Counter() {
 // 声明一个名为 count 的 state 变量，初始值为 0
 // setCount 是一个用来更新 count 的函数
 const [count, setCount] = useState(0);

 return (
 <div>
 <p>你点击了 {count} 次</p>
 <button onClick={() => setCount(count + 1)}>
 点我增加
 </button>
 <button onClick={() => setCount(count > 0 ? count - 1 : 0)}>
 点我减少
 </button>
 </div>
 );
}

export default Counter;

关键点：

useState 返回一个数组：[currentStateValue, functionToUpdateState]。
通过调用 setCount(newValue) 来更新 count 的值，这会触发组件的重新渲染。
永远不要直接修改 state (例如 count = count + 1;)，总是使用 set 函数。

e. 事件处理 (Event Handling)

React 元素的事件处理和 DOM 元素的事件处理非常相似，但有一些语法差异：

React 事件的命名采用驼峰式，而不是纯小写 (例如 onClick 而不是 onclick)。
通过 JSX，你传递一个函数作为事件处理程序，而不是一个字符串。

示例见上面的 Counter 组件中的 onClick 事件。

f. 条件渲染 (Conditional Rendering)

你可以根据应用的 state 或 props 来决定渲染哪些组件或元素。常用的方法有：

if 语句
逻辑与运算符 &&
三元运算符 condition ? trueValue : falseValue

// src/components/LoginControl.js
import React, { useState } from 'react';

function UserGreeting(props) {
 return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
 return <h1>请登录.</h1>;
}

function LoginButton(props) {
 return <button onClick={props.onClick}>登录</button>;
}

function LogoutButton(props) {
 return <button onClick={props.onClick}>退出</button>;
}

function LoginControl() {
 const [isLoggedIn, setIsLoggedIn] = useState(false);

 const handleLoginClick = () => {
 setIsLoggedIn(true);
 };

 const handleLogoutClick = () => {
 setIsLoggedIn(false);
 };

 let button;
 let greeting;

 if (isLoggedIn) {
 button = <LogoutButton onClick={handleLogoutClick} />;
 greeting = <UserGreeting />;
 } else {
 button = <LoginButton onClick={handleLoginClick} />;
 greeting = <GuestGreeting />;
 }

 return (
 <div>
 {greeting}
 {button}
 {/* 使用三元运算符的另一种方式 */}
 {/* {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
 {isLoggedIn
 ? <LogoutButton onClick={handleLogoutClick} />
 : <LoginButton onClick={handleLoginClick} />} */}
 </div>
 );
}

export default LoginControl;

g. 列表和 Keys (Lists and Keys)

你可以使用 JavaScript 的 map() 方法来将数组渲染为元素列表。当渲染列表时，React 需要一个特殊的 key prop 来帮助识别哪些列表项被更改、添加或删除。key 应该是唯一的字符串，通常使用数据项中的 ID。

// src/components/NumberList.js
import React from 'react';

function ListItem(props) {
 // 正确！这里不需要指定 key:
 return <li>{props.value}</li>;
}

function NumberList(props) {
 const numbers = props.numbers;
 const listItems = numbers.map((number) =>
 // 正确！key 应该在数组的上下文中被指定
 <ListItem key={number.toString()} value={number} />
 );
 return (
 <ul>
 {listItems}
 </ul>
 );
}

export default NumberList;

// 在 App.js 中使用:
// import NumberList from './components/NumberList';
// const numbers = [1, 2, 3, 4, 5];
// <NumberList numbers={numbers} />

重要提示：key 只需要在兄弟节点中唯一，不需要全局唯一。不要使用数组的索引作为 key，除非列表是静态的且不会重新排序。

🚀 5. 第一个动手实践：待办事项列表 (Todo List)

让我们结合以上概念，尝试构建一个简单的待办事项列表。

创建 TodoItem.js 组件 (src/components/TodoItem.js)

import React from 'react';

function TodoItem({ todo, index, toggleTodo, removeTodo }) {
 return (
 <li style={{ textDecoration: todo.isCompleted ? 'line-through' : '' }}>
 {todo.text}
 <div>
 <button onClick={() => toggleTodo(index)}>
 {todo.isCompleted ? '撤销' : '完成'}
 </button>
 <button onClick={() => removeTodo(index)} style={{ marginLeft: '10px' }}>
 删除
 </button>
 </div>
 </li>
 );
}

export default TodoItem;

创建 TodoList.js 组件 (src/components/TodoList.js)

import React, { useState } from 'react';
import TodoItem from './TodoItem';

function TodoList() {
 const [todos, setTodos] = useState([
 { text: '学习 React', isCompleted: false },
 { text: '构建一个 Todo 应用', isCompleted: false },
 ]);
 const [inputValue, setInputValue] = useState('');

 const addTodo = (text) => {
 if (!text.trim()) return; // 不添加空内容
 const newTodos = [...todos, { text, isCompleted: false }];
 setTodos(newTodos);
 };

 const toggleTodo = (index) => {
 const newTodos = [...todos];
 newTodos[index].isCompleted = !newTodos[index].isCompleted;
 setTodos(newTodos);
 };

 const removeTodo = (index) => {
 const newTodos = [...todos];
 newTodos.splice(index, 1);
 setTodos(newTodos);
 };

 const handleSubmit = (e) => {
 e.preventDefault(); // 阻止表单默认提交行为
 addTodo(inputValue);
 setInputValue(''); // 清空输入框
 };

 return (
 <div className="todo-list">
 <h1>我的待办事项</h1>
 <form onSubmit={handleSubmit}>
 <input
 type="text"
 value={inputValue}
 onChange={(e) => setInputValue(e.target.value)}
 placeholder="添加新的待办..."
 />
 <button type="submit">添加</button>
 </form>
 <ul>
 {todos.map((todo, index) => (
 <TodoItem
 key={index} // 注意：这里用 index 做 key 仅为演示，实际项目中如有唯一 ID 更好
 index={index}
 todo={todo}
 toggleTodo={toggleTodo}
 removeTodo={removeTodo}
 />
 ))}
 </ul>
 </div>
 );
}

export default TodoList;

你可能需要一些简单的 CSS 来美化它。在 src/App.css (或新建一个 TodoList.css 并导入) 添加：

/* src/App.css 或 src/TodoList.css */
.todo-list {
 font-family: sans-serif;
 max-width: 500px;
 margin: 50px auto;
 padding: 20px;
 border: 1px solid #eee;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.todo-list h1 {
 text-align: center;
 color: #333;
}

.todo-list form {
 display: flex;
 margin-bottom: 20px;
}

.todo-list input[type="text"] {
 flex-grow: 1;
 padding: 10px;
 border: 1px solid #ddd;
 border-radius: 4px;
 font-size: 16px;
}

.todo-list button {
 padding: 10px 15px;
 margin-left: 10px;
 background-color: #5cb85c;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 16px;
}

.todo-list button:hover {
 background-color: #4cae4c;
}

.todo-list ul {
 list-style-type: none;
 padding: 0;
}

.todo-list li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 0;
 border-bottom: 1px solid #eee;
}

.todo-list li:last-child {
 border-bottom: none;
}

.todo-list li button {
 background-color: #d9534f;
 font-size: 12px;
 padding: 5px 10px;
}
.todo-list li button:first-of-type { /* 针对 "完成/撤销" 按钮 */
 background-color: #f0ad4e;
}

在 src/App.js 中使用 TodoList 组件

import React from 'react';
import './App.css'; // 确保引入了样式
import TodoList from './components/TodoList'; // 确保路径正确

function App() {
 return (
 <div className="App">
 <TodoList />
 </div>
 );
}

export default App;

现在，你的浏览器应该显示一个可以添加、完成和删除待办事项的列表了！

💡 6. React Hooks 简介

Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。

useState：如上所述，用于在函数组件中添加 state。

useEffect：用于处理副作用（side effects），例如数据获取、订阅或手动更改 DOM。它类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

import React, { useState, useEffect } from 'react';

function Timer() {
 const [seconds, setSeconds] = useState(0);

 useEffect(() => {
 // 这个函数会在组件挂载后以及每次更新后执行
 const intervalId = setInterval(() => {
 setSeconds(prevSeconds => prevSeconds + 1);
 }, 1000);

 // 清理函数：这个函数会在组件卸载前执行
 return () => clearInterval(intervalId);
 }, []); // 空数组 [] 表示这个 effect 只在组件挂载和卸载时运行一次

 return (
 <div>
 计时器: {seconds} 秒
 </div>
 );
}

export default Timer;

useEffect 的依赖项数组：

[] (空数组)：Effect 只在挂载时运行一次，清理函数在卸载时运行。
[var1, var2]：Effect 在挂载时运行，并且在 var1 或 var2 改变后的每次渲染时运行。
不传第二个参数（不推荐）：Effect 在每次渲染后都会运行。

还有许多其他的 Hooks，如 useContext, useReducer, useCallback, useMemo, useRef 等，你可以在后续学习中逐步掌握。

🚀 7. 接下来学什么？

当你掌握了以上基础知识后，可以继续学习：

表单处理 (Forms)：更深入地学习受控组件和非受控组件。
组件生命周期 (Lifecycle Methods)：虽然 Hooks 简化了许多，但了解类组件的生命周期方法对理解 React 的工作方式仍有帮助。
路由 (Routing)：使用 React Router 来构建多页面的单页面应用。
状态管理 (State Management)：
- Context API：React 内置的，用于在组件树中共享状态，避免 props drilling (逐层传递 props)。
- Redux, Zustand, MobX：更强大的第三方状态管理库，适用于大型复杂应用。
数据获取 (Data Fetching)：如何从后端 API 获取数据并展示（例如使用 fetch API 或 axios 库，并结合 useEffect）。
组件库 (Component Libraries)：例如 Material-UI, Ant Design, Chakra UI 等，它们提供了预制的 UI 组件，可以加速开发。
测试 (Testing)：使用 Jest, React Testing Library 等工具为你的组件编写测试。
构建和部署 (Build and Deployment)：学习如何将你的 React 应用打包并部署到服务器或静态网站托管平台。
TypeScript 与 React：为你的 React 项目添加静态类型检查。
性能优化 (Performance Optimization)：React.memo, useCallback, useMemo, 代码分割等。

💖 8. 学习建议

多动手实践：理论学习很重要，但通过实际编写代码来巩固知识更重要。
阅读官方文档：React 的官方文档非常出色，是学习的最佳资源。
参与社区：在 Stack Overflow, Reddit (r/reactjs), DEV Community 等社区提问和交流。
从小项目开始：逐步增加项目的复杂度。
保持耐心：学习曲线可能有些陡峭，但坚持下去就会有收获。

为什么使用Vite来构建React项目

“React 和 Vite 项目”是将强大的前端库 React 与现代、极速的构建工具 Vite 结合起来的开发方式。

这是一种非常流行和高效的组合，Vite 旨在通过提供闪电般的开发服务器启动速度和极快的热模块替换 (HMR) 来显著改善前端开发体验。

以下是关于 React 和 Vite 项目的详细说明：

🚀 为什么使用 Vite 来构建 React 项目？

Vite 解决了传统构建工具（如 Create React App 背后的 Webpack）在大型项目中遇到的一些性能瓶颈。

极速的开发服务器启动： Vite 使用浏览器原生的 ES 模块 (ESM) 功能。它不需要在启动前打包整个应用，而是按需提供代码文件，使得开发服务器几乎可以瞬时启动。
闪电般的热模块替换 (HMR)： 当你修改代码时，Vite 只会更新被修改的模块，而不是重新加载整个页面。这个过程非常快，让你能够几乎实时地看到代码变更的效果，且不会丢失应用状态。
优化的构建： 在生产环境中，Vite 使用 Rollup 进行打包。Rollup 是一个非常高效的打包器，擅长 tree-shaking（移除未使用的代码）和生成高度优化的代码包。
开箱即用的体验： Vite 原生支持 TypeScript、JSX、CSS Modules 等，无需繁琐配置。

🛠️ 如何创建一个 React + Vite 项目？

创建一个 React + Vite 项目非常简单。你可以使用 npm, yarn, 或 pnpm。

打开你的终端，运行以下命令之一：

使用 NPM:

npm create vite@latest my-react-app -- --template react

使用 Yarn:

yarn create vite my-react-app --template react

使用 PNPM:

pnpm create vite my-react-app --template react

🏃‍♂️ 启动项目

创建完成后，按照终端提示的步骤操作：

进入项目目录：
```
cd my-react-app
```
安装依赖：
```
npm install
```
启动开发服务器：
```
npm run dev
```

执行 npm run dev 后，你将看到一个本地服务器地址（通常是 http://localhost:5173/）。在浏览器中打开它，你就能看到你的 React + Vite 应用了。

🆚 与 Create React App (CRA) 的对比

Vite 通常被视为 Create React App (CRA) 的现代替代品。

特性	Vite	Create React App (CRA)
开发服务器	原生 ESM，按需编译	Webpack 打包，冷启动慢
启动速度	极快（秒级）	较慢（随项目增大而变慢）
HMR	极快（基于 ESM）	较慢（通常刷新整个组件）
构建工具	Rollup (生产环境)	Webpack
配置	简单，`vite.config.js`	复杂，需 `eject` 或 Craco

总之，React + Vite 组合提供了当下最顶级的开发体验，特别是对于追求效率和性能的开发者而言。

你是想了解如何将旧的 CRA 项目迁移到 Vite，还是想知道关于 Vite 配置的更多细节（例如如何配置代理）？

如何禁止用户在浏览器中查看前端源码

首先，我们必须明确一个核心事实：你永远无法 100% 阻止用户查看你的前端代码。

Web的根本机制决定了浏览器必须下载你的HTML、CSS和JavaScript文件才能在用户屏幕上渲染出页面。只要代码在浏览器上，技术上总有办法被查看（例如通过开发者工具的“网络”或“来源”面板）。

但是，你的目标可能不是“完全隐藏”，而是“防止他人轻易地阅读、理解和复制你的原始源代码”。

对于这个目标，Vite（以及其他现代构建工具）已经为你做了大部分工作。你需要做的主要有以下几件事：

1. 依赖生产构建（Vite 默认会做）

你绝对不能将 npm run dev（开发环境）的代码部署到线上。开发环境为了便于调试，会保留所有原始代码、注释和模块路径。

你必须使用生产构建命令：

npm run build

这个命令会触发 Vite (底层使用 Rollup) 执行以下操作，这已经解决了你 90% 的担忧：

打包 (Bundling): 将你所有的 .js, .jsx 模块合并成少数几个文件。
转译 (Transpiling): 将你的 JSX 语法和 ES6+ 语法转换为浏览器兼容的普通 JavaScript。
压缩 (Minification): 这是最关键的一步。它会删除所有空格、换行、注释，并将你的变量名（如 const [userInfo, setUserInfo] = useState(null);）替换成单个字母（如 const [a,b]=useState(null);）。

结果： 用户在浏览器中看到的将是一堆紧凑、混乱、几乎无法阅读的“乱码”，这已经不是你的“源码”了，而是“编译后的机器码”。

2. 关键一步：关闭 Source Maps（源映射）

这是最重要的一步，也是新手最容易忽略的一步。

什么是 Source Map? 它是一个 .map 文件，作用是将“压缩后的代码”映射回“你的原始源代码”。它的唯一目的是帮助开发者在生产环境（线上）也能轻松地调试错误。
你的问题： 如果你将 .map 文件上传到服务器，任何人都可以使用浏览器的开发者工具，像看你本地的 src 文件夹一样，看到你所有的原始 .jsx 文件、目录结构和注释。

如何解决 (在 Vite 中):

Vite 非常智能，默认情况下在生产构建 (npm run build) 中是关闭 Source Map 的。

但如果你（或你的同事）之前为了调试方便打开过它，你需要检查你的 vite.config.js (或 vite.config.ts) 文件，确保 build.sourcemap 设置为 false。

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
 plugins: [react()],
 build: {
 // 确保这一行是 false，或者直接删掉（Vite 默认就是 false）
 sourcemap: false
 }
})

检查方法： 运行 npm run build 后，检查生成的 dist/assets 文件夹，确保里面没有 .js.map 或 .css.map 结尾的文件。

3. （不推荐）极端方案：代码混淆 (Obfuscation)

如果你觉得“压缩”还不够，还想让代码逻辑变得更难被逆向工程，下一步就是“代码混淆”。

混淆器会做一些事情，比如：

将字符串（如 “API_KEY_PUBLIC”）拆分成 ['A','P','I',...].join('')。
重写控制流（if/else 变成复杂的 switch 或循环）。
注入无意义的“僵尸代码”。

为什么不推荐？

严重性能问题： 混淆后的代码通常体积更大，运行速度更慢。
调试噩梦： 如果线上出了 bug，你自己也看不懂代码，Source Map 将完全失效。
虚假的安全感： 专业的逆向工程师依然可以（花更多时间）破解它。

如果你坚持要用，可以使用 vite-plugin-javascript-obfuscator 这类插件。

总结：你的最佳策略

对于 99% 的项目，你只需要做两件事：

始终使用 npm run build 来打包你的应用。
确保 vite.config.js 中 build.sourcemap 为 false（或未设置，使用默认值）。

最后，请记住一个黄金法则：

任何敏感信息（如 API 密钥、私有算法、管理员密码）绝对不能放在前端代码中，无论你如何压缩或混淆。 这些信息必须始终保留在你的后端服务器上。

实战

TypeScript中的两种[]符号含义

问题

在React的useState中看到这样的代码：

const [files, setFiles] = useState<FileInfo[]>([]);

为什么<FileInfo[]>里面也有一个[]？

解答

这里有两个不同的[]，它们的含义完全不同：

1. `<FileInfo[]>` - TypeScript类型注解中的`[]`

useState<FileInfo[]>

这里的[]表示数组类型：

FileInfo是单个文件信息对象的类型
FileInfo[]表示"FileInfo对象的数组"
相当于Array<FileInfo>的简写形式

2. `([])` - 初始值中的`[]`

useState<FileInfo[]>([])

这里的[]是空数组字面量：

这是JavaScript中创建空数组的语法
作为useState的初始值传入
表示状态的起始值是一个空数组

对比理解

// 完整写法更清楚地看出区别：
const [files, setFiles] = useState<Array<FileInfo>>(new Array());

// 简化写法：
const [files, setFiles] = useState<FileInfo[]>([]);

类比说明

想象一下：

<FileInfo[]>像是说"这个盒子专门装FileInfo类型的物品，而且可以装很多个"
([])像是说"开始的时候盒子是空的"

其他例子

// 数字数组，初始值为空
const [numbers, setNumbers] = useState<number[]>([]);

// 字符串数组，初始值有内容
const [names, setNames] = useState<string[]>(["Alice", "Bob"]);

// 单个对象，不是数组
const [user, setUser] = useState<FileInfo | null>(null);

总结

第一个[]是类型定义，第二个[]是实际的空数组值！

前端与跨端 on 扎塔-Zata

flutter_tutorial

从零开始的fultter之路

Refine: 当 API 即界面，CRUD 不再是体力活

问题：后台管理界面，为什么总是重复劳动？

Refine 是什么？

核心概念 1：Headless（无头）

Refine 提供什么？

你用什么 UI？

核心概念 2：Resource（资源）

资源的定义

这段配置做了什么？

核心概念 3：Data Provider（数据提供者）

Data Provider 的接口

这个接口的意义

内置的 Data Provider

核心概念 4：Auth Provider（认证提供者）

使用方式

核心概念 5：Inferencer（自动生成 CRUD 页面）

使用方式

Inferencer 做了什么？

生成的代码示例

实战：用 Refine + shadcn/ui 搭建后台

步骤 1：创建项目

步骤 2：配置 Data Provider

步骤 3：配置资源

步骤 4：用 Inferencer 生成页面

步骤 5：美化 UI

对比：Refine vs 传统开发

Refine 的局限

1. 后端 API 要规范

2. 学习成本

3. 复杂场景还是要手写

总结：Refine 的价值

参考

React框架使用教程

目录

基础知识

📚 1. 学习 React 前的准备

🛠️ 2. 搭建 React 开发环境

📂 3. 了解项目结构

✨ 4. React核心概念

a. JSX (JavaScript XML)

b. 组件 (Components)

c. Props (属性)

d. State (状态)

e. 事件处理 (Event Handling)

f. 条件渲染 (Conditional Rendering)

g. 列表和 Keys (Lists and Keys)

🚀 5. 第一个动手实践：待办事项列表 (Todo List)

💡 6. React Hooks 简介

🚀 7. 接下来学什么？

💖 8. 学习建议

为什么使用Vite来构建React项目

实战

TypeScript中的两种[]符号含义

问题

解答

1. <FileInfo[]> - TypeScript类型注解中的[]

2. ([]) - 初始值中的[]

对比理解

类比说明

其他例子

总结

1. `<FileInfo[]>` - TypeScript类型注解中的`[]`

2. `([])` - 初始值中的`[]`