全书目录

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

第十一章:函数组件、LiveComponent、嵌套 LiveView,到底怎么分工

1 分钟 449 字 第 730 / 962 个阅读单元

这是 Phoenix 初学者最容易混的地方之一。

官方 LiveView 欢迎文档给的建议非常实用,几乎可以当工程准则:

  • 默认先用 函数组件
  • 需要局部状态与事件封装,再用 LiveComponent
  • 需要真正的进程隔离,再用 嵌套 LiveView

翻成城邦语言就是:

text
函数组件 = 柜台模板件
LiveComponent = 中控室里的分区柜台
嵌套 LiveView = 独立值班室
#1. 函数组件:先用它

适合:

  • 表格行
  • 表单片段
  • 按钮
  • 卡片
  • 列表项
  • 布局块

它只解决“复用标记和参数”。

#2. LiveComponent:当你真的需要局部状态

比如每一张调度卡都要自己展开、编辑、校验、保存。
这时可以把状态和事件封装到组件里。

elixir
<.live_component
  module={CityWeb.DispatchLive.CardComponent}
  id={dispatch.id}
  dispatch={dispatch}
/>

但要记住一个重要事实:

LiveComponent 和父 LiveView 仍在同一个进程里。

这意味着:

  • 它轻量
  • 它适合做状态封装
  • 但它不带进程级故障隔离
#3. 嵌套 LiveView:真的需要独立值班室时再上

比如:

  • 一个父页面里嵌了一个完全独立的聊天区
  • 一个区域自己会崩、会重载、会单独导航
  • 你需要真正的错误隔离

这时再考虑嵌套 LiveView。

一个很实用的判断口诀:

text
只是复用标记:函数组件
既要复用标记,又要局部状态:LiveComponent
要独立生命周期和隔离:嵌套 LiveView