componentDidMount 是否可以在页面之间共享数据?

Can componentDidMount share data between pages?

我仍在学习 React,如果这是一个愚蠢的问题,我深表歉意。我目前正在规划我的简单应用程序的架构。

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

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

如果正在获取数据的组件不在 main/home 页面上。 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.jsmusicplaylist.js

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

我有这个想法,但我觉得这不是正确的做法。

Homepage.js 中,包含 WeatherForecastMusicPlaylist 组件以获取数据。如果是这样的话,我似乎在每一页都重复同样的原则。

我发现 Redux 将状态存储为全局对象。但是状态怎么知道什么时候更新。但是在我们开始陈述之前,我仍然不确定另一个页面上的组件是否可以在用户不访问该页面的情况下获取数据。

感谢阅读这个问题。

关于状态变化通知,参考下图,希望千言万语:

原创文章here


Redux 通过 prop 将数据传递到所有连接的组件,假设组件在接收到新的 props 时被挂载,一个新的渲染周期就会启动,因此它会反映您的更改,此外,如果您不想使用 Redux,您可以尝试使用新的上下文 api,它易于实现并且也适合您的解决方案 here 是关于如何使用它的教程

对于纯 React 解决方案,您需要利用 React 可用的其他生命周期方法。 componentDidMount 是发出 API 请求的好地方,因此您来对地方了。但是,componentDidMount 只出现一次,就在 componentWillMount 之后和 DOM 准备好组件的完整渲染之后。以设定的时间间隔将 API 调用设置为 运行 不会触发组件的重新渲染,不会触发任何子组件。相反,请使用 componentWillRecieveProps 添加您的间隔请求逻辑。在每个间隔完成后,运行 setState 使用来自请求的新数据来更新构造函数中定义的默认状态。作为提高性能的奖励步骤,请跟进 returns componentShouldUpdate 中的 bool 函数。通过这种方式,您可以严格定义导致任何和所有组件的方式、时间和原因 re-rendering.

Redux 是处理您想做的事情的绝佳解决方案。我个人总是在我的 React 项目中使用它来管理状态。使用 Redux,您可以让 API 调用仍然发生在 componentDidMount 中,但是该调用可以连接到您的 Redux 存储并更新您的初始状态。这使您不必担心组件的本地状态以及如何有条件地呈现应用程序中的所有其他内容。此外,Redux 将您需要的其他功能(例如 re-running 您的 fetchToAPI 以特定间隔抽象到它们自己的源代码中(称为 Action Creators)。 Action Creators 直接与 Redux store 挂钩,这样当使用一个时,生成的状态差异会传递给 Redux 的 Reducers,后者又会更新应用程序的全局状态。然后需要做的就是让所有需要 re-rendering 全局状态更改的组件监听 Redux 存储中发生的状态更改,并根据存储的差异有条件地 re-render来自 prevState => newProps。使用 componentShouldUpdate.

中的布尔检查可以相当容易地设置它

希望对您有所帮助!干杯。

要在 next.js 中的页面之间传递数据,您将不得不使用 Redux。 Redux 的理念是拥有单一的事实来源。在 redux 中,你通过调用 actions 来更新状态。要更新 redux 状态,你必须创建一个名为 action creators 的东西,它会调度 action 来更新状态。

关于另一个页面上的组件是否可以在用户不访问该页面的情况下获取数据的问题,答案是它们不需要访问数据。组件仅在访问时挂载,因此它将在 挂载 时获取数据。