Elm 组件和 View : When we should use `Html msg` and when `Html Msg`

Question

我正在做一个项目，我的队友和我正在讨论哪种方法更好。

在我看来Html msg似乎更通用，所以我认为我们应该尽可能使用它，但我不能给他其他理由。

另外，我来自 React 和 Redux，对我来说看起来像是带有签名 Html Msg 的组件就是我们所说的Smart/Connected Components和 Html msg就像 Dumb Components ，我对这个假设是否正确？

你能告诉我什么时候应该使用每一个吗？

谢谢

Answer 1

将 View 函数注释为返回 Html msg表示您没有将 View 绑定(bind)到特定的 Msg类型。因此它更灵活，但它也限制了你可以做的事情。

在编写不呈现任何特定于特定 Msg 的代码的共享代码时，使用小写版本很有用。 .例如，您可以标准化一些布局代码:

pageTitle : String -> Html msg
pageTitle title =
    h1 [ class "page-title" ] [ text title ]

上面的代码可以返回 Html Msg但这会限制其共享它的能力，因为您会将其绑定(bind)到特定的 Msg类型。

现在，如果您正在编写能够生成特定事件的内容并将其绑定(bind)到 Msg构造函数，那么你必须返回 Html Msg :

type Msg = RollDice | Rolled Int

diceButton : String -> Html Msg
diceButton label =
    button [ class "fancy-btn", onClick RollDice ] [ text label ]

如果您尝试返回小写 Html msg，上述定义将无法编译。 .

如果我们停在那里，我可以看到这可能与 React 中的智能组件与愚蠢组件的想法相似，因为看起来小写版本无法呈现会触发事件的 Html，但这种类比并不真正成立.假设您想在系统范围内标准化按钮，但不想将其绑定(bind)到特定的 Msg .您可以通过接受 Msg 的参数使函数更通用。在点击时触发。

fancyButton : String -> msg -> Html msg
fancyButton label msg =
    button [ class "fancy-btn", onClick msg ] [ text label ]

一般来说，如果您正在编写旨在在内部或作为外部包共享的代码，您将通过使用 Html msg 的小写版本提供更大的灵 active 。 .这样做，您仍然可以编写可以触发事件的 Html，就像在 fancyButton 中一样。上面的例子，它只是意味着你将一些责任传递给调用函数，它必须决定 Msg进入。