提升状态替代从其他组件调用方法答案

【问题标题】：Lifting state alternative to call methods from other components提升状态替代从其他组件调用方法
【发布时间】：2019-04-10 16:27:42
【问题描述】：

我正在使用 react-native 开发一个移动应用程序（这是我第一次使用 react 的方式）并且我在组件之间通信时遇到了问题。

据我了解，react 是指通过道具从父母到孩子的工作。每个组件通过其状态更新自己，并通过绑定在 props 中的处理程序更新父组件。还是感觉不对。

Parent (wrapper) component
|
|--AppBar Component
|
|--ListScrollView Component (displays API data fetched from the Parent)
|
|--FABmenu Component (handles the secondary components and provides callbacks to the Parent)
|
|--more secondary components (activity indicator, search bar, filtering modal etc)

我实现它的方式是将所有业务逻辑放在父组件中，并将父方法作为道具传递给子组件，但是这种设置在我的用例中被证明是混乱的，因为每天都会添加新功能并且我需要在组件之间来回切换以使一切正常。

Redux/Flux 实际上并没有为此提供解决方案，它们只是使用全局状态覆盖此行为，您需要为其编写更多代码（订阅）来更新各个组件。

Refs 不会暴露整个组件，只是元素，所以这也不是一个选项。

我不了解你，但这使我的工作流程非常缓慢，我宁愿为它们（合理地）所属的组件编写方法并静态调用它们。我在这里遗漏了什么还是这是可悲的事实？

编辑：由于我使用 expo，它不附带最新的 react/react-native 版本，因此我无法充分利用最新功能（例如 Context API）。经过一番修补后，我决定使用 MobX，似乎可以解决问题。

【问题讨论】：

如果您发现自己在钻孔，Context API 可能会清理这里的东西。
@go_diego 该死的我不应该跳过文档的那部分。虽然它解决了我的直接问题，但 Context 更像是一种解决方法，所以我还将重新设计我的结构。我们说话时回到白板。谢谢大家的回复。

标签： reactjs react-native

【解决方案1】：

您必须将状态提升到顶级父组件并不是绝对规则。您应该尽可能提高状态以避免多次执行操作。

例如，如果您的 Navbar 组件需要显示用户的全名，则您可以为该数据执行 API 获取。但是，假设当您点击设置路由时，您还需要用户的全名。在那里两次点击 API 有意义吗？一次在导航栏上，一次在设置组件上？应该不会吧！

但是，作为应用程序的架构师，您有责任识别这些机会并尽可能提升状态，但这对于 React 来说并不是绝对的。这是一个建议。如果你发现自己做了很多不必要的“道具管道”（即，当只有一个组件需要时，将道具向下传递六个组件级别），你可能把它举得太高了。

据我所知，在 React 的架构中没有任何东西会迫使您这样做。正如您所说，像 Redux 这样的解决方案可以帮助管理数据流并拥有“全局状态”，但它们并不是万能的，也不应该取代本地状态。仍然有很多案例和很多机会在组件中包含业务逻辑。

如果这是适合您和您的应用程序的解决方案，那就去吧。

【讨论】：

【解决方案2】：

我建议您了解一些在 React 中编写应用程序的基本结构。就个人而言，我喜欢 Container => Component 排列我的 App 的方式。

在 React 中集成 Redux、Router 等是乏味的事情。

我关注了这个workshop。

此外，请通过Dan Abramov关注此博客

【讨论】：