01 · JSX 与组件模型

JSX 的本质#

新人常把 JSX 当”HTML 模板”。其实它只是语法糖，编译后是普通 JS：

1
// 你写的
2
const el = <h1 className="title">Hello</h1>;
3
// 编译后等价于
4
const el = React.createElement("h1", { className: "title" }, "Hello");

所以 JSX 里能写任意 JS 表达式（用 {} 包裹），它不是字符串也不是 HTML，是”描述 UI 的 JS 对象”。

组件就是函数#

React 组件本质：接收 props、返回 UI 描述的函数。

1
function Welcome({ name }) {
2
  return <p>你好，{name}</p>;
3
}
4
// 使用
5
<Welcome name="Tom" />

函数组件没有 this、没有生命周期（用 Hooks 代替），简单且易测。Class 组件已是非主流。

组合优于继承#

React 不鼓励继承，而是用**组合（children / props 插槽）**复用结构：

1
function Card({ title, children }) {
2
  return (
3
    <div className="card">
4
      <h3>{title}</h3>
5
      <div>{children}</div>
6
    </div>
7
  );
8
}
9
<Card title="统计"><Chart /></Card>

需要多种变体时，用 children 或把组件当 prop 传入，比继承灵活得多。

单一职责#

一个组件只做一件事。当一个组件超过 ~150 行、props 超过 7 个，就该拆。拆出来的小组件更易复用和测试。

小结#

JSX 是 JS 语法糖，编译成 createElement，不是模板。
组件 = 接收 props 返回 UI 的函数，优先函数组件。
用组合（children/插槽）而非继承复用。
单一职责，过大就拆。

练习#

不用 JSX，用 React.createElement 手写一个 <ul> 含两个 <li> 的组件。
写一个 Modal 组件，用 children 接收弹窗内容、title prop 接收标题。
把一个”又长又多 props”的组件按单一职责拆成 3 个小组件。