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

【问题标题】：Can componentDidMount share data between pages?componentDidMount 可以在页面之间共享数据吗？
【发布时间】：2018-08-28 23:06:13
【问题描述】：

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

我在这个项目中使用 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 将状态存储为全局对象。但是状态如何知道何时更新。但在我们开始陈述之前，我仍然不确定其他页面上的组件是否可以在用户不访问该页面的情况下获取数据。

感谢您阅读此问题。

【问题讨论】：

标签： javascript reactjs react-redux state next.js

【解决方案1】：

关于状态变化通知，参考下图，希望值一千字：

原创文章here。

【讨论】：

嗨@David，感谢分享文章和图片！但是，如果正在获取数据的组件属于另一个页面，我将如何将数据传递给视图（主页）（因此，我可以安全地说它没有被渲染吗？）如果它没有被渲染，意味着 componentDidMount 将不会激活获取数据。
Redux 以陡峭的学习曲线而闻名。使用一些替代解决方案而不是 Redux 可以吗？
感谢更新的答案！但是，我目前只使用 React。但我会先学习 Redux。

【解决方案2】：

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

【讨论】：

嗨@RijulZapluri，感谢分享！不过我有几个问题。第二页的组件不是客户端渲染的，首页如何从位于第二页的组件中获取数据。因此，我不能说第一页的组件连接到第二页的组件。由于第一页使用全局状态显示数据。抱歉，如果我的评论不清楚。
不正确。是的，Redux 管理应用程序状态的单一事实来源。但是，它使用CONSTANTS、ACTION CREATORS、REDUCERS 并使用react-redux 插件按照容器模式连接到格式正确的React 组件。它不会强迫 React 做任何事情。 Redux 本身可以用作任何框架的存储。它更多的是状态管理的概念/方法，而不是状态的框架。 React 在其内置的生命周期组件方面做得非常出色。设置 Redux 以更新全局状态。让 React 对这些变化做出“反应”。
如果您的组件的间隔代码即使每 5 秒发出一次 http 请求也会执行一次，它会继续这样做直到停止，尽管调用 setState 会给您一个无操作状态，表明您无法更新未安装组件的状态，但您仍然可以调用函数，即在 redux 的情况下执行操作来更新您的全局状态，最好将您的 api 请求带到您的父组件，该组件将保持安装状态，而不管其他组件如何作为您的顶级组件将始终保持安装状态，然后您可以从上往下传递数据
你通过 props 将数据从父组件传递到子组件。使用 prop 委托的另一种模式是“容器”=>“哑组件”，其中哑组件是简单的纯函数，只有当容器告诉它们如何/何时/为什么这样做时才会更新。 Redux 使用此设置运行良好。
Rijul 你错了。 onComponentDidMount 可以触发 API 请求，是的。但是连续这样做不会触发组件重新渲染。 onComponentDidMount 每个组件生命周期只运行一次，仅此而已。 React 提供了许多其他生命周期组件来管理何时/为什么/如何重新渲染。

【解决方案3】：

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

Redux 是处理您想做的事情的绝佳解决方案。我个人总是在我的 React 项目中使用它来管理状态。使用 Redux，你可以让你的 API 调用仍然发生在componentDidMount，但是调用可以挂接到你的 Redux 存储并更新你的初始状态。让您不必担心组件的本地状态以及如何有条件地渲染应用程序中的其他所有内容。此外，Redux 将您需要的其他功能（例如以特定间隔重新运行 fetchToAPI）抽象到它们自己的源（称为 Action Creators）中。 Action Creators 直接在 Redux 存储中挂钩，因此当使用一个时，生成的状态差异将传递给 Redux 的 Reducers，进而更新应用程序的全局状态。然后需要做的就是让所有需要在全局状态更改时重新渲染的组件来监听 Redux 存储中发生的状态更改，并根据 prevState 的存储差异有条件地重新渲染 =>新道具。这可以使用componentShouldUpdate 中的布尔检查相当容易地设置。

希望这会有所帮助！干杯。

【讨论】：

嗨@DaneTheory，感谢您的回答！很抱歉，我没有接触过 Redux，因此我有几个问题。 1.为了澄清这一点“使用Redux，你可以让你的API调用仍然发生在componentDidMount中，但是调用可以挂钩到你的Redux存储并更新你的初始状态。”这是否意味着componentDidMount位于another page（不是用户渲染的）可以在用户使用Action Creators渲染的homepage上调用。
不完全...如果它没有立即意义，请不要担心。 Redux 与 React 一起进入了函数式编程的世界，对于大多数不习惯定期思考这些编程范式的人来说，这并不容易。首先尝试了解如何使用 React 管理状态。了解“智能组件与“愚蠢组件”。然后，关注组件继承的工作原理。这是您将开始了解道具委托的要点的地方，这将引导您学习如何最好地使用生命周期方法。然后，试试 Redux。
感谢您的指导！因此，作为一个初学者，为了解决我的问题，我只需要在需要显示数据的页面上包含获取数据的组件？
没有。当组件需要重新渲染时，您需要添加额外的生命周期组件。完成后，将 props 从组件传递到要使用此数据更新的其他组件。不用担心人。它复杂的东西。我会尽我所能提供帮助。
非常感谢。我对这个社区的神奇程度感到困惑。但是，如果我们让这个线程保持打开状态可以吗？因为我想再次阅读 React 文档。

【解决方案4】：

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

回答您关于另一个页面上的组件是否可以在没有用户访问该页面的情况下获取数据的问题是他们不需要访问数据。组件只有在被访问时才会被挂载，所以它会在它们被挂载时获取数据。

【讨论】：

嗨@illiteratewriter，感谢您调查这个问题！关于您的第二个答案，这意味着我必须安装在用户访问（呈现）的页面中获取数据的组件？