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

Question

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

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

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

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

谢谢

Answer 1

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

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

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

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

现在,如果您正在编写能够生成特定事件并将其绑定到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,但这种类比并不真正成立.假设您希望在系统范围内标准化按钮,但不希望将其与特定按钮联系起来Msg.您可以通过接受Msg单击时触发的参数来使该函数更通用.

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

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