如何在 react.js 中跨子组件持久化数据或状态？

Posted 2023-02-22

【中文标题】如何在 react.js 中跨子组件持久化数据或状态？

【英文标题】：How to persist data or state across child components in react.js?

【发布时间】：2016-06-12 12:56:07

【问题描述】：

好的，我正在寻找跨子组件保存数据的最佳方法。据我所知，要在父子之间进行通信，我应该将回调作为道具传递给子组件。现在，如果我需要更改父级的状态，我只需调用回调并设置父级的状态。对吗？

但这不是我的要求。让我们考虑一个场景，我有多个孩子并且他们都共享相同的数据。我需要的是，如果我更改任何子组件的状态/日期，那么数据更改也应该反映在其他子组件中。调用回调只会改变父级的状态，如何更新其他子级中传递的道具？

我希望这不会令人困惑。我在我的应用程序中使用 Flux 架构。我确实有使用动作和调度程序来解决我的问题的替代解决方案。但是，我想知道是否有更智能和标准的方法。

【参考方案1】：

只需更改父级的状态，这将触发父级的重新渲染，将任何道具（即使它们相同）传递给子级，它们将使用您的新状态重新渲染。

无论您将函数从父级传递给子级，还是让子级通过调度程序发出动作（如果您使用通量，这可能是首选方法），理论是相同的，父级状态更改并传递给孩子们的道具。

【讨论】：

如果你使用flux，那么action/dispatcher路由比对父级的回调更好：使用回调来允许子级改变父级状态，是一种反模式。最好避免，因为它使代码更难维护/调试。

我一般同意，但它与使用组件状态密切相关，如果您要在组件中隐藏状态，那么通过回调进行操作是可以容忍的，与将这些回调传递给以商店为例。我也不喜欢组件状态，但这是海报已经使用的模式。

感谢您的解释。我并不反对状态本身，我理解在这种情况下它是设置的一部分。但是状态应该尽可能地刻意地对外界隐藏。这是设计使然。因此，最好避免任何访问它，或者至少是一条需要小心谨慎的路径。为了保持应用程序的可管理性，最好将回调传递给商店或孩子，但最好不要同时传递。

是的，我认为我们在同一页面上，我在我的答案中添加了一个小推论，最终取决于用例。就个人而言，我更喜欢从组件中消除所有状态，但人们有不同的偏好模式。

很好的解释，伙计们。我将选择通量。我认为使用子组件发出动作将是更新所有其他子组件状态的更好方法。谢谢你的回答。