是否应该直接调用 Om 中的“组件”函数？答案

【问题标题】：Should "component" functions in Om be called directly?是否应该直接调用 Om 中的“组件”函数？
【发布时间】：2016-10-21 22:45:10
【问题描述】：

正如我刚刚开始完全理解的那样，om.core/build 和 om.next 的工厂函数返回 React 元素对象，这些对象引用组件函数/类，以及 the actual component is only instantiated later by React's reconciler。也就是说，(om.core/build some-component data) 实际上并没有立即调用some-component。

然而，我们经常将简单的“无状态”组件表示为接受 props 并返回 React 元素的函数。在（纯）React 世界中，您可以像组件类一样使用这些函数之一，如 React.createElement(AStatelessComponent, {some: "props"})，或者在 JSX 中更方便地使用 <AStatelessComponent some="props" />。这些也返回一个引用 AStatelessComponent 的 React 元素，直到稍后才会真正调用它。

但是在 Om 中，当我们有一个像这样的简单组件时（“我们”是指我和我的团队，至少），我们直接调用该函数。因此，

(render [this]
  (om/div {}
      (a-stateless-component {:some "data"})))

这里，a-stateless-component 被立即调用，并且它返回的任何内容都直接插入到 div 中，而不是稍后被 React reconciler 替换。

在 Om 中有 React.createElement 的首选方式吗？还是更喜欢直接调用这样的函数，即使它跳过在渲染树中创建组件实例？

【问题讨论】：

标签： reactjs om

【解决方案1】：

在Om中，如果要实例化一个无状态组件，需要直接调用js/React.createElement。

您为什么要这样做取决于：

如果您调用 React.createElement，您会在 React 的协调器中获得一个“跟踪”实例
如果不这样做，您会得到内联，但现在无法将无状态组件与其在 React 的渲染树中的父级区分开来。

编辑：我刚刚意识到om.next/factory 足够宽松，它允许您实例化您正在谈论的无状态组件。因此，您可以通过直接在 props 函数上调用 js/React.createElement 或使用与参数相同的函数调用 om.next/factory 来实现您想要的。

这是一个工作示例。以下代码：

((om/factory #(dom/div nil "Hello, World")))

产生以下组件（在 React 的开发工具中）：

【讨论】：