javascript - ReactJs 的函数式风格打破了封装

Question

我没弄清楚。事情是这样的:我制作了两个小部件，一个 TabBar 和一个 TabNavigator。 tabNav 包含索引为 currentSelectedTab 的状态。因此，当 TabBar 收到用户点击时，它会通知父级 (TabNav) 做某事(通过回调)，而恰恰是父级注入(inject)新 Prop 说:亲爱的 tabbar，选择此选项卡:currentSelectedTab同时，tabNav 为标签显示正确的内容。

到目前为止一切顺利。但是，现在我希望应用程序能够将 TabNav 设置为特定选项卡。我一介绍它，作为 Prop ，它就打破了 currentSelectedTab 在 tabnav 中的封装。它必须在应用程序外部定义。这很糟糕。

从 OOP 的 Angular 来看，我会在小部件 TabNav 中有一个 setCurrentTab，但在 FP 中，尤其是在 React 中，这是被禁止的。小部件的唯一入口是 Prop 。 (裁判是邪恶的，对吧？)。

这意味着当 TabBar 收到用户点击时，它会调用 TabNav 中的回调，而 TabNav 也必须调用应用程序中定义的上层回调。然后这个回调将改变应用程序状态，并设置 currentSelectedTab，因此它将通过 props 传递给 TabNav。

必须在 TabNav 之外定义 currentSelectedTab 的事实简直太可怕了。你不这么认为吗？在我看来，它破坏了组件封装。如何正确地做到这一点？助焊剂？同样的事情:currentSelectedTab 不必在全局状态中定义。

基本上，如果一切正常，您最终会在顶部看到一个巨大的状态，其中包含属于某些小部件的内容。封装被深深地破坏了。

也许有人可以向我解释这里出了什么问题？

Answer 1

在命令式语言中使用公共(public)方法来设置选定的选项卡与在 React 中使用旨在做同样事情的 prop 没有太大区别。

一旦您觉得需要控制组件外部的某些属性，它自然会成为其公共(public)契约的一部分。在 react 中，这主要是并且最好是 Prop ，在常见的 OOP 语言中 - 公共(public)类方法/字段。

虽然 react prop 没有必要直接表示其内部状态。使用 props 作为状态的初始值是完全可以的。甚至还有一个特殊的 Hook componentWillReceiveProps这意味着当 props 发生变化时，您可以改变封装的内部状态。

希望这能澄清一些事情。