React组件化 - Cabbage74

上一节里，构建工具承担了“翻译官”的角色。将开发者写起来舒服的代码“翻译”成浏览器看起来舒服的代码。

构建工具可以“翻译”，意味着我们可以写出规则更加不同的代码，只要最后让构建工具“翻译”成浏览器看得懂的html/css/js就行了。

React是最火的前端框架，核心思想是把复杂页面拆成可复用的组件，通过数据驱动组件更新。

1
npm install react react-dom
2
npm install -D @vitejs/plugin-react

NPM安装react相关依赖、能让Vite知道怎么翻译react的插件。

1
import { defineConfig } from 'vite'
2
import react from '@vitejs/plugin-react'
3

4
export default defineConfig({
5
  plugins: [react()],
6
})

安装完还得编写Vite的配置文件vite.config.js，真正地“插”上插件。

1
<!doctype html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Zero to Tech · 文字实验室</title>
7
    <link rel="stylesheet" href="css/reset.css" />
8
    <link rel="stylesheet" href="css/variables.css" />
9
    <link rel="stylesheet" href="css/layout.css" />
10
    <link rel="stylesheet" href="css/hero.css" />
11
    <link rel="stylesheet" href="css/nav.css" />
12
    <link rel="stylesheet" href="css/cards.css" />
13
    <link rel="stylesheet" href="css/lab.css" />
14
    <link rel="stylesheet" href="css/responsive.css" />
15
  </head>
16
  <body>
17
    <div class="app-shell">
18
      <div class="page-shell">
19
        <main class="page-content">
20
          <section class="dashboard-grid">
21
            <article class="hero-stage panel-full">
22
              <div class="hero-topline">
23
                <p class="brand-eyebrow">zero to tech</p>
24
                <nav class="inline-links hero-nav">
25
                  <a class="nav-link" href="index.html">个人主页</a>
26
                  <a class="nav-link" href="text-lab.html">文字实验室</a>
27
                </nav>
28
              </div>
29
              <div class="hero-copy">
30
                <h1 class="hero-display">文字实验室</h1>
31
                <p class="hero-subtitle">拼音和情绪，挖掘中文里的细节</p>
32
              </div>
33
            </article>
34

35
            <article class="panel panel-half lab-panel card">
36
              <div class="panel-heading">
37
                <p class="section-kicker">输入区</p>
38
                <h3>贴一段中文</h3>
39
              </div>
40
              <form class="lab-form">
41
                <label for="text-input">文本内容</label>
42
                <textarea
43
                  id="text-input"
44
                  rows="8"
45
                  placeholder="例如：生活没有标准答案，但每一天都值得认真感受。"
46
                >今天的风很轻，适合把脑海里的想法慢慢写下来。</textarea>
47
                <button class="primary-button" type="button">开始分析</button>
48
              </form>
49
            </article>
50

51
            <article class="panel panel-half lab-panel result-panel card">
52
              <div class="panel-heading">
53
                <p class="section-kicker">结果区</p>
54
                <h3>分析结果</h3>
55
              </div>
56
              <div class="result-stack">
57
                <div class="result-item">
58
                  <span>原文</span>
59
                  <p>今天的风很轻，适合把脑海里的想法慢慢写下来。</p>
60
                </div>
61
                <div class="result-item">
62
                  <span>拼音</span>
63
                  <p>jīn tiān de fēng hěn qīng …</p>
64
                </div>
65
                <div class="result-grid">
66
                  <div class="result-badge">
67
                    <span>情感分数</span>
68
                    <strong data-score>0.86</strong>
69
                  </div>
70
                  <div class="result-badge">
71
                    <span>情感判断</span>
72
                    <strong>偏积极</strong>
73
                  </div>
74
                </div>
75
              </div>
76
            </article>
77

78
          </section>
79
        </main>
80
      </div>
81
    </div>
82

83
    <script type="module" src="js/main.js"></script>
84
  </body>
85
</html>

对于文字实验室text-lab.html这个文件，现在是vanilla的写法。html把页面结构写的很长，而且要写新的一页还是得写这么长。

其实可以按导航Nav、输入卡片InputCard等拆成可复用的组件。很多页面可以复用导航Nav。

html/css/js就像是后端的controller/service/repository按技术切分。React就像是后端按业务切分服务一样切分出组件。

1
// Nav 原本在 index.html 和 text-lab.html 各抄了一遍。
2
// 现在它是一个组件，整个项目只有这一份。
3
// 想加链接、改样式？只改这一处，两个页面自动一起跟着变。
4
export default function Nav({ current, onNavigate }) {
5
  const items = [
6
    { key: "home",    label: "个人主页" },
7
    { key: "textlab", label: "文字实验室" },
8
  ];
9

10
  return (
11
    <div className="hero-topline">
12
      <p className="brand-eyebrow">zero to tech</p>
13
      <nav className="inline-links hero-nav">
14
        {items.map((it) => (
15
          <a
16
            key={it.key}
17
            href="#"
18
            className={"nav-link" + (current === it.key ? " active" : "")}
19
            onClick={(e) => { e.preventDefault(); onNavigate(it.key); }}
20
          >
21
            {it.label}
22
          </a>
23
        ))}
24
      </nav>
25
    </div>
26
  );
27
}

以导航Nav.jsx为例。一个jsx文件一般对应一个组件，一个组件就像是一个函数，输出一段由运行时输入决定的类似html的结构。这个结构经过React和Vite最终会变成真的html。容易想象每个组件都是一个动态的DOM子树，由React来动态地创建、修改、销毁。

1
import Nav from "./Nav.jsx";
2
import PageHeading from "./PageHeading.jsx";
3
import AnimatedCardGrid from "./AnimatedCardGrid.jsx";
4
import InputCard from "./InputCard.jsx";
5
import ResultCard from "./ResultCard.jsx";
6

7
// 整页就是几块积木拼起来的：导航、标题、输入卡、结果卡。
8
// TextLabPage 这个"大组件"，把这些小组件摆在一起，拼成一整页。
9
export default function TextLabPage({ current, onNavigate }) {
10
  return (
11
    <AnimatedCardGrid className="dashboard-grid">
12
      <article className="hero-stage panel-full">
13
        <Nav current={current} onNavigate={onNavigate} />
14
        <PageHeading title="文字实验室" subtitle="拼音和情绪，挖掘中文里的细节" />
15
      </article>
16

17
      <InputCard />
18
      <ResultCard />
19
    </AnimatedCardGrid>
20
  );
21
}

再看含有Nav的页面TextLabPage.jsx。其实和Nav没什么区别，Nav像是小积木，TextLabPage像是大积木。

Vanilla写法里，不同的页面一般就是不同的html。

1
import { useState } from "react";
2
import HomePage from "./components/HomePage.jsx";
3
import TextLabPage from "./components/TextLabPage.jsx";
4

5
export default function App() {
6
  // page 是个"状态"——它一变，下面的界面就跟着重新渲染。
7
  // 这一节先把它当"框架的规则"用、不展开
8
  const [page, setPage] = useState("home");
9

10
  return (
11
    <div className="app-shell">
12
      <div className="page-shell">
13
        <main className="page-content">
14
          {page === "home"
15
            ? <HomePage current={page} onNavigate={setPage} />
16
            : <TextLabPage current={page} onNavigate={setPage} />}
17
        </main>
18
      </div>
19
    </div>
20
  );
21
}

React里每个页面都是一个组件，可以把它们合成一个最大的组件App.jsx。切换页面不再是切换html，而是切换组件。写完App.jsx就写完了最大的一个组件。

1
import { StrictMode } from "react";
2
import { createRoot } from "react-dom/client";
3
import App from "./App.jsx";
4

5
import "./css/reset.css";
6
import "./css/variables.css";
7
import "./css/layout.css";
8
import "./css/hero.css";
9
import "./css/nav.css";
10
import "./css/cards.css";
11
import "./css/lab.css";
12
import "./css/responsive.css";
13

14
createRoot(document.getElementById("root")).render(
15
  <StrictMode>
16
    <App />
17
  </StrictMode>,
18
);

1
<!doctype html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Zero to Tech</title>
7
  </head>
8
  <body>
9
    <div id="root"></div>
10
    <script type="module" src="/src/main.jsx"></script>
11
  </body>
12
</html>

把index.html和main.jsx结合起来看，就知道组件是怎么和html连接起来的了。

React项目里，只有一个空的div，dom树一开始是空的。main.jsx这个脚本告诉React要渲染root这个div。

容易发现这种React项目里只有一棵DOM树。

传统Vanilla写法：每个 HTML 文件被加载时，浏览器直接解析该 HTML，构建出整棵 DOM 树。切换页面时，旧 DOM 树被完全销毁，浏览器加载新 HTML，构建一棵全新的 DOM 树。

React写法：整个应用只有一个 HTML 文件。里面有个容器，比如 root div。React接管这个div，然后动态地在这个div内部创建、更新、销毁 DOM 节点，来模拟“页面切换”。浏览器只加载一次 HTML，后续的“页面”切换，都是 React 在这个 root div 里面变魔术。

1
├── README.md
2
├── index.html
3
├── package-lock.json
4
├── package.json
5
├── src
6
│   ├── App.jsx
7
│   ├── components
8
│   │   ├── AnimatedCardGrid.jsx
9
│   │   ├── HomePage.jsx
10
│   │   ├── InputCard.jsx
11
│   │   ├── Nav.jsx
12
│   │   ├── ...
13
│   ├── css
14
│   │   ├── cards.css
15
│   │   ├── hero.css
16
│   │   ├── ...
17
│   └── main.jsx
18
└── vite.config.js

这是一个React项目的经典结构。