全书目录

第三十八篇：Phoenix 完全指南 —— 实时频道城邦宇宙

第七章：HEEx 与组件系统，是城邦的公告板工坊

1 分钟 374 字 第 726 / 962 个阅读单元

Phoenix 现在的 HTML 心智，不该再停留在“模板文件替换变量”。

你应该把它理解成：

函数组件 + HEEx = 可组合的公告板工坊。

官方组件文档里有个很核心的定义：

  • 任何接收 assigns 并返回 ~H 模板的函数，都可以看作函数组件

这意味着 Phoenix 的 HTML 不是“纯模板语法”，而是Elixir 函数世界和 HTML 世界正式接轨。

来看一个组件：

elixir
defmodule CityWeb.DispatchComponents do
  use Phoenix.Component

  attr :dispatch, :map, required: true

  def dispatch_row(assigns) do
    ~H"""
    <li id={"dispatch-#{@dispatch.id}"} class="dispatch-row">
      <strong>{@dispatch.title}</strong>
      <span>{@dispatch.status}</span>
    </li>
    """
  end
end

使用时：

elixir
<ul>
  <.dispatch_row :for={dispatch <- @dispatches} dispatch={dispatch} />
</ul>

这套体系和 React 很像吗？有一点像。
但你脑子里不要直接把它等同成 React。

区别在于：

  • Phoenix 组件首先是 服务器模板函数
  • 它默认不是浏览器端状态组件
  • 它最先解决的是 HTML 组织、复用、校验、差异追踪

所以组件在 Phoenix 里，更像“标准公告栏组件、表单组件、按钮组件、布局组件”，而不是默认就承载一整套浏览器端交互状态。