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

Question

I am still learning React and I apologize if this is a stupid question. I am currently planning about the architecture of my simple App.

I am using Next.js for this project

I have a component that calls the third party API for data every 5 seconds. The data is shared among all pages in the app.

If the component that is fetching the data is not on the main/home page. Are there anyways for homepage to get the data it needs from another page?

For example [Below are all pages]

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

The data shown in homepage has to be refreshed every 5 seconds if there are changes to the following data in weatherforecast.js and musicplaylist.js

I had this in mind but I have a feeling that it's not the right way to do it.

In the Homepage.js , include WeatherForecast and MusicPlaylist components to fetch the data. If this is the case, it seems like I am repeating the same principle in every page.

I found out about Redux which store states as a global object. But how does the state know when to update. But before we getting to state, I am still not sure if components on another page can fetch the data without the user accessing the page.

Thanks for reading this question.

Answer 1

Regarding the state change notification, refer to below image, and hopefully it is worth one thousand of words:

Original article here .

---

Answer 2

Redux通过prop在连接的所有组件之间传递数据，因为只要接收到新的prop就会安装一个组件，那么就会启动一个新的渲染周期，以反映您的更改，此外，如果您不想使用Redux，可以尝试使用新上下文API，它很容易实现，也将是适合您的解决方案在这里是如何使用它的教程

Answer 3

For a pure React solution, you need to utilize other lifecycle methods available for React. componentDidMount is a good spot for making API requests, so you're in the right place to start. However, componentDidMount occurs only once, right after the componentWillMount and after the DOM is ready with a complete render of the component. Setting your API call to run at a set interval will not trigger a rerender of the component, no any of it's sub components. Instead, use componentWillRecieveProps to add your interval request logic. After each interval completes, run setState with the new data from the request to update the default state defined in your constructor. As a bonus step to improve performace, follow up with function that returns a bool in componentShouldUpdate . This way you can strictly define how and when and what is causing any and all component re-rendering.

Redux is an excellent solution to take care of what you want to do. Personally always use it in my React projects to manage state. Using Redux, you could make your API calls still occur in componentDidMount , however the call can hook into your Redux store and update your initial state. The frees you up from have to worry about the local state of your component and how to go about conditionally rendering everything else in your app. Plus Redux abstracts other functions you need, like re-running your fetchToAPI in certain intervals, into their own source (known as Action Creators). Action Creators hook directly in the Redux store so that when one is used, the resulting state diff is passed to Redux's Reducers, which in turn update the application global state. Then all that needs to be done is to have all of your components that need re-rendering on global state change to listen for state changes that occur in the Redux store and conditionally re-render based on the diff of the store from prevState => newProps. This can be setup fairly easy using the boolean check in componentShouldUpdate .

Hope this helps! Cheers.

Answer 4

To pass data between pages in next.js you will have to use Redux. The idea of Redux is to have a single source of truth. In redux you update the state by calling actions . To update redux state you have to create something called action creators which dispatches action to update the state.

Answer to your question as to if components on another page can fetch data without the user accessing the page is that they do not need to access the data. The components are mounted only when they are accessed, so it will fetch the data when they are mounted .