榆树组件和视图：当我们应该使用`Html msg`和`Html Msg`时

我正在研究一个项目和我的队友,我正在讨论哪种方法更好.

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

另外,我来自React和Redux,对我看起来像带有签名Html Msg的组件就是我们所谓的智能/连接组件,而Html msg就像Dumb Components,我对这个假设是对的吗？

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

谢谢

解决方法

将视图函数注释为返回Html消息意味着您没有将视图绑定到特定的消息类型.因此,它更灵活,但它也限制了你可以做的事情.

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

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

上面的代码可以返回Html Msg,但这会限制它共享它的能力,因为你将它绑定到特定的Msg类型.

现在,如果您正在编写能够生成特定事件并将其绑定到Msg构造函数的内容,那么您必须返回Html消息：

type Msg = RollDice | Rolled Int

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

如果您尝试返回小写的Html消息,则上述定义将无法编译.

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

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

通常,如果您要编写要在内部或作为外部包共享的代码,则可以通过使用较低版本的Html msg来提供更大的灵活性.这样做,您仍然可以编写可以触发事件的Html,就像上面的fancyButton示例一样,它只是意味着您将一些责任传递给调用函数,调用函数必须决定要传递的Msg.