第四章：组件不是“反复重跑的店铺”—— 而是“搭建街区线路的工程队”

1 分钟 217 字第 774 / 962 个阅读单元

这是 Solid 最容易被 React 经验误导的地方。

在 React 里，组件很像一个会被反复调用的模板函数。在 Solid 里，组件更像一个初始化阶段的布线过程。

tsx

import { createSignal } from "solid-js";

function ShopPanel() {
  const [temperature, setTemperature] = createSignal(26);

  return (
    <div>
      <h2>店铺空调</h2>
      <p>当前温度: {temperature()}°C</p>
      <button onClick={() => setTemperature(t => t - 1)}>降温</button>
    </div>
  );
}

你要把它想成：

组件函数先跑一次
Solid 建好 DOM
把 {temperature()} 这个位置和 temperature 订阅起来
以后 temperature 变了，只更新这一个文本节点

text

ShopPanel() 首次执行
   │
   ├── 创建 <h2>
   ├── 创建 <p>
   ├── 记录：这个文本依赖 temperature()
   └── 创建 button 点击事件

之后 setTemperature(...)
   │
   └── 只更新 <p> 里那段文字

这就是“精细反应街区”的真正含义。