componentDidMount可以在页面之间共享数据吗？

Question

我还在学习React，如果这是一个愚蠢的问题，我道歉。我目前正在计划我的简单App的架构。

我正在为这个项目使用Next.js

我有一个组件每5秒调用第三方API获取数据。数据在应用程序的所有页面之间共享。

如果获取数据的组件不在主/主页上。是否有homepage从另一个页面获取所需数据？

例如[以下是所有页面]

index.js // Plain simple page that displays current weather and top music
http://localhost:3000/

weatherforecast.js //Using componentDidMount every 5 seconds to fetch Weather Data
http://localhost:3000/weatherforecast

musicplaylist.js //Using componentDidMount every 5 seconds to fetch Weather
http://localhost:3000/musicplaylist

如果weatherforecast.js和musicplaylist.js

中的以下数据发生变化，主页上显示的数据必须每5秒刷新一次

我考虑到了这一点，但我觉得这不是正确的做法。

在Homepage.js中，添加WeatherForecast和MusicPlaylist组件以获取数据。如果是这种情况，似乎我在每一页都重复相同的原则。

我发现了 Redux ，它将状态存储为全局对象。但是国家如何知道何时更新。但在我们进入状态之前，我仍然不确定其他页面上的组件是否可以在用户不访问该页面的情况下获取数据。

感谢您阅读此问题。

Answer 1

关于状态变更通知，请参阅下面的图片，希望它值得千言万语：

原创文章here。

Answer 2

Redux通过prop传递整个连接组件中的数据，因为只要接收到新的道具就会安装一个组件，启动一个新的渲染周期，这样它就会反映你的变化，而且如果你不想使用Redux，你可以尝试使用新的上下文api易于实现，也适用于您的解决方案here是一个如何使用它的教程

Answer 3

对于纯React解决方案，您需要使用React可用的其他生命周期方法。 componentDidMount是发出API请求的好地方，因此您可以在正确的位置开始。但是，componentDidMount仅在componentWillMount之后和DOM准备好完成组件渲染后发生一次。将API调用设置为以设定的间隔运行不会触发组件的重新呈现，也不会触发任何子组件的重新呈现。而是使用componentWillRecieveProps添加间隔请求逻辑。每个间隔完成后，使用请求中的新数据运行setState以更新构造函数中定义的默认状态。作为改善性能的奖励步骤，请跟进在componentShouldUpdate中返回bool的函数。通过这种方式，您可以严格定义如何以及何时以及导致任何和所有组件重新呈现的原因。

Redux是一个很好的解决方案，可以照顾您想要做的事情。个人总是在我的React项目中使用它来管理状态。使用Redux，您可以在componentDidMount中进行API调用，但是调用可以挂钩到Redux存储并更新初始状态。让您从中解放出来，必须担心组件的本地状态以及如何有条件地渲染应用程序中的所有其他内容。 Plus Redux将您需要的其他功能（如在特定时间间隔内重新运行fetchToAPI）抽象到自己的源（称为Action Creators）中。 Action Creators直接在Redux存储中挂钩，这样当使用一个时，生成的状态diff将传递给Redux的Reducers，Reducers会更新应用程序的全局状态。然后，所有需要完成的工作就是让所有需要在全局状态更改时重新呈现的组件监听Redux存储中发生的状态更改，并根据来自prevState =＆gt的商店的差异有条件地重新呈现; newProps。使用componentShouldUpdate中的布尔检查可以很容易地设置它。

希望这有帮助！欢呼声。

Answer 4

要在next.js中的页面之间传递数据，您必须使用Redux。 Redux的想法是拥有单一的事实来源。在redux中，您可以通过调用actions来更新状态。要更新redux状态，您必须创建名为action creators的内容，该内容将调度action以更新状态。

回答您关于其他页面上的组件是否可以在没有用户访问页面的情况下获取数据的问题，即他们不需要访问数据。组件仅在访问时才会安装，因此它将在挂载时获取数据。