reactjs - 我如何在 React js 中的非相关组件之间共享数据？

Question

我对 reactjs 很陌生，我正在努力解决以下问题:我有一个 Header 组件(在我的 App.js 文件中)，其中包含一个 AudioPlayer。此 AudioPlayer 需要使用 src 的当前值(歌曲的路径，存储在本地)和标题进行更新。现在，想想这样的事情:

App.js

function App(){
    <Header/>
    <Page1/>
    <Page2/>
    <Page3/>
    ...
    <SomePage/>
    ...
    <Footer/>
}

Header.js

import HeaderLogic from './HeaderLogic'

funtion Header(){

    const {property1, property2, ..., path, title} = HeaderLogic()
    //In HeaderLogic I want to get path and title, set in SomePageLogic.js
    ...
    return <>
        <AudioPlayer
            src={path}
            title={title}
        />
        ...
    </>
}

一些页面.js

import SomePageLogic from './SomePageLogic'
import songPath from './somePath/songPath'

function SomePage(){
    const title = 'songTitle'
    const {property1, property2, ..., propertyN} = SomePageLogic(songPath, title)
    //In SomePageLogic (or maybe here) I want to set path and title of the song,
    //in order to be used from the HeaderLogic component

    return <>
        ...
    </> 
}

我不确定 useContext 在这种情况下是否合适，因为我想在不相关的组件之间共享数据……当然，当 Header 检测到歌曲已设置时，它应该重新呈现。我应该使用某种订阅模式吗？有什么提示吗？

非常感谢!

Answer 1

您可以使用 Redux 来存储您的状态。基本上，React Redux 是一种商店，您可以在其中存储您的状态，并且只要它更新，它就会直接呈现 html。您可以通过在钩子(Hook)中使用 useSelector 在任何地方访问存储状态，只要它被其他组件更改，它就会获得更新的值