Question

我正在开发带有react-native的移动应用程序（这是我第一次使用react进行开发），并且在组件之间进行通讯时遇到了麻烦。

据我所知，反应是指通过道具从父母到孩子的工作。每个组件通过其状态更新自身，并通过绑定在prop中的处理程序更新父组件。仍然感觉不对。

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实际上并没有提供解决方案，它们只是使用全局状态来覆盖此行为，您需要针对该状态编写更多代码（订阅）以更新单个组件。

引用不会公开整个组件，而只是公开元素，因此也不是一个选择。

我不了解您，但是这使我的工作流程非常缓慢，我宁愿将方法（合理地）写入它们所属的组件并静态地调用它们。我是在这里想念东西还是这可悲的事实？

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

Answer 1

这不是绝对的规则，您必须将状态提升到顶级父组件。您应该尽可能提高状态，以避免多次做事。

例如，如果您需要一个显示用户全名的Navbar组件，则可以对该数据进行API提取。但是，假设您点击“设置”路由时，您还需要用户的全名。在那里两次点击API是否有意义？一次在导航栏中，一次在“设置”组件上？可能不是！

但是，作为您的应用程序架构师，您要负责把握这些机会，并尽一切可能提高状态，但这在React中并不是绝对的。这是一个建议。如果您发现自己做了大量不必要的“道具管道”（即，仅在需要一个组件时将道具向下传递六个组件级别），则可能是将其抬高了。

据我所知，React的体系结构中没有什么可以强迫您执行此操作。像您所说的那样，像Redux这样的解决方案可以帮助您管理数据流并拥有“全局状态”，但它们并不是万能的，也不应该替代本地状态。在组件内部拥有业务逻辑的情况仍然很多，机会也很多。

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

Answer 2

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

集成Redux，Router等是React中乏味的东西。

我遵循了这个workshop。

此外，请在Dan Abramov之前关注此博客

提升状态替代其他组件的调用方法

2 个答案: