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

将视图函数注释为返回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.