使用反应钩子跨组件携带页面上下文/状态答案

【问题标题】：Carry Page context/state across components using react hooks使用反应钩子跨组件携带页面上下文/状态
【发布时间】：2021-02-02 23:37:11
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： reactjs react-hooks use-context usecallback react-usememo

【解决方案1】：

您的项目看起来足够复杂，使用 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"/>

【讨论】：