使用 React 钩子跨组件承载页面上下文/状态

问题描述

我是 React 钩子的新手。我们正在开发一个没有 redux 的基于 React 的应用程序。我们有一个页面，其中包含不同的组件，例如搜索、过滤器、网格、分页等。

每当我们在页面上执行任何操作时，Grid 都应该使用该操作道具刷新。

例如，当我在页面上搜索时，网格应该用搜索道具刷新。我在页面上应用了任何过滤器，网格也应该用过滤器道具和搜索道具刷新。

因此，所有单独的组件中的所有操作状态都应该可用，以便使用适当的道具来调用网格刷新 API。

能否请您帮助我了解我们如何在每个组件级别维护整个页面的状态。

解决方法

您的项目看起来足够复杂，肯定会从使用 Redux 中受益。看看Redux official toolkit。

但是没有它你可以做的是使用context。

如果您需要在每个组件中都可用的完整状态，请将其保持在树上的较高级别。就像 App 组件一样。将其传递给 Context.Provider 并使用 useContext 使用它。 React context docs

至于更新状态，如果您不打算使用 Redux，您可能应该使用 useReducer link

像这样：

const AppStateContext = React.createContext(null);

/* CHILD */

const Child = () => {

  const appState = React.useContext(AppStateContext);
  return(
    <div>This is appState from Child: {JSON.stringify(appState)}</div>
  );
};

/* PARENT */

const App = () => {

  const [appState,setAppState] = React.useState({foo:"bar"});

  return(
    <AppStateContext.Provider value={appState}>
      <Child/>
    </AppStateContext.Provider>
  );
};


ReactDOM.render(<App/>,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>