React 组件交互和全局状态变化

IT技术 javascript state reactjs
2021-04-30 14:23:22

我对 React 很陌生,只是在试验它。我想知道有哪些常见模式或用于处理组件之间通信的内置库。例如,我有一个输入组件和一个“列表”组件,它根据输入控制器中的内容从服务器更新。想想一个自动完成框。既然组件都有表现逻辑,那如果两者不能“除”呢?它们位于页面的不同部分,因此是两个不同的控制器。

另外,如果我有一个通过 Ajax 工作的登录/注销按钮怎么办?我想象页面上的许多不同组件对登录/注销操作做出react,根据全局“登录”状态和从服务器检索的特定用户登录的数据重新配置自己。

React 对这些变化“做出react”的最佳方式是什么?谢谢

2个回答

你应该检查FluxDispatcher它有点像发布/订阅系统,但没有发布/订阅系统的问题。优点是所有事件都在一个方向上流动,这使得架构更加简单和可扩展。

如果你还没有,你应该查看 Facebook 的官方 React 文档。他们有一个非常全面的教程,涵盖了您将遇到的 90% 的场景,包括组件交互的最佳实践。他们也非常擅长从零开始构建。只需要大约 20 分钟的时间:https : //facebook.github.io/react/tutorial/tutorial.html

正如在另一个答案中提到的,Redux 是一个了不起的库,用于处理应用程序状态和将不应该相互了解的组件分开。基本上,您可以拥有父组件和子组件,但是如果您的组件有超过 2 个级别的子组件,您应该考虑使用 Redux(或 Flux)来处理不相关组件之间的状态。redux 解决的问题只是打破这些依赖关系,并仍然允许组件具有单一的事实来源。他们的官方文档也非常好:http : //redux.js.org/