模块 4.4

让数据驱动界面

继续打磨 React 项目，把网站的内容和结构分开

零到全栈 · 李勃老师 · 2026

React 的另一个变化

把「操作页面」
变成「改变数据」

页面根据数据，自动长成它该有的样子。

第一种玩法

把数据和界面结构分开

const home = { title: "关于我", subtitle: "项目，创意，灵感", work: "文字实验室" };

页面结构

标题区域

副标题区域

作品卡片

说明区块

按钮

下载本节 demo

先看最终答案，再迁回自己的项目

git clone https://github.com/joylibo/zero-to-tech-demos cd zero-to-tech-demos/zero-to-tech-4-4 npm install npm run dev

site.js

`site.js` 只管「显示什么」

export const home = { heroTitle: "关于我", heroSubtitle: "项目，创意，灵感，心得" };

组件

只管「怎么显示」

排版、样式、结构留在组件里；文案集中从 site.js 取。

多语言的直觉

多份数据，可以共用一份界面结构

site.zh.js中文内容

site.en.jsEnglish

site.fr.jsFrançais

components

同一份界面结构

当前选中哪份数据，组件就把那份内容显示出来。

未来接后端

数据也可以来自网络 API

GET /api/home首页数据

GET /api/works作品列表

GET /api/text-lab分析结果

components

结构不用变

只是数据来源，从本地文件换成了网络接口。

现在写死在文件里，以后可以从后端实时取回来。

从外面喂进来的值

组件的值，由调用者「喂」进来

Page 组件告诉 PageHeading：你这次该显示什么。PageHeading 自己不做主。

第二种玩法

组件被操作时，
也会自己生产数据

这种会变、而且一变界面就跟着变的值，叫 state。

4.1 的部署方式

Nginx 指向源码目录：以前可以，现在不行

✓

vanilla 项目

Nginx → 静态文件

目录里就是浏览器认识的 html / css / js，直接发送，OK。

!

Vite + React 项目

Nginx → 源代码

源码里有 JSX、模块依赖和开发态结构，浏览器不能直接吃。

Vite + React 的部署路径

服务器上先准备依赖，再构建产物

git pull

拉源码

→

npm install

准备依赖

→

npm run build

生成 dist/

→

Nginx root

指向 dist/

发布后的一个坑

直接访问 `/text-lab`，服务器说找不到

http://服务器IP/text-lab

404

服务器硬盘上没有叫 text-lab 的文件。

本节回顾

界面，就是照着一些「值」在显示

玩法一

值能从外面喂进去，还能集中起来管

const home = { title: "关于我", subtitle: "项目，创意，灵感", work: "文字实验室" };

页面结构

标题区域

副标题区域

作品卡片

说明区块

按钮

玩法二

值能自己变，界面自动跟

今天我想分析一段中文文本，看看它里面藏着什么情绪。

已输入 25 字

输入框里的文字一变，下面这行字数就跟着变。

玩法三

值还能存进网址里

http://localhost:5173/text-lab

刷新不丢，链接能发

这就是路由：哪个网址显示哪一页。

发布流程回顾

工程化项目上线，中间多了「依赖 + 构建」

push / pull

同步源码

→