OM组件与普通函数的区别

8
我正在学习OM教程,但我不清楚何时使用OM组件和普通函数(特别是om/component宏)。
教程写道:
第一个参数是一个函数,它接受应用程序状态数据和支持React组件的owner。此函数必须返回一个Om组件——即om/IRender接口的模型,就像om.core/component宏生成的那样。
; here the function (fn [app owner]) indeed returns an OM component
(om/root
  (fn [app owner]
    (om/component (dom/h2 nil (:text app))))
  app-state
  {:target (. js/document (getElementById "app"))})

在下一节中,我们将找到以下关于列表渲染循环的示例:
 ; this one does not return an om component (or does it?). it returns a virtual dom
(om/root
  (fn [app owner]
    (apply dom/ul nil
      (map (fn [text] (dom/li nil text)) (:list app))))
  app-state
  {:target (. js/document (getElementById "app0"))})

在这里,我们只是直接返回一个(虚拟)dom,而不是包装在OM组件中,所以问题是:为什么om/component宏存在?该宏只是帮助我们重新定义IRender函数,但似乎我们也可以使用普通函数来实现。我会重新定义具有生命周期状态的OM组件(或需要所有者调用get-props的组件),但对于只需要创建虚拟dom的组件,我更愿意选择简单的函数(因此我不需要build/build-all函数来创建我的虚拟dom)。我在这里漏掉了什么?为什么宏仍然有用(而我没有看到它)?
2个回答

9

上周我也有同样的问题,于是我查阅了Om源代码。

我发现使用 om/component 宏和不使用时没有任何功能上的区别。但或许这个信息可以为那些更熟悉React的人提供一些启示。

无论传递给 om/root(以及随后的 om/build)的任何函数 f,都会被放置在一个容器 Om 组件内。这个 Om 组件只是一个哑 React 组件,它将所有生命周期事件转发给实现了 Om 生命周期协议(即是 reify 对象)的 f 的结果。

如果 f 的结果不是实现了这些协议的 reify 对象,那么它将被认为是一个 React 组件,并用作由render生命周期函数返回的值。

(相关链接:此处是Om的渲染函数)


1
好的,我明白了。所以当你想将一个普通的React组件包装成OM组件时,宏可能会存在。也许未来的OM版本在om/component宏中会有稍微不同的语义,因此即使你只需要返回一个React组件,最好还是使用宏。 - shaft

3

om/component宏仅是defn和reify组合的速记形式,当您不需要传递状态时使用。


3
这是故事的一部分。根据文档,"为了快速组合只需要实现om.core/IRender并且不需要访问owner参数的组件,使用Sugar而不是Reify"。 - pdoherty926

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接