0

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

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

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

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

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

4

1 回答 1

0

你的项目看起来很复杂，使用 Redux 肯定会受益。看看Redux 官方工具包。

但是没有它你能做的就是使用context.

如果您需要在每个组件中提供完整状态，请将其保持在树上的较高级别。就像 App 组件一样。将其传递给 aContext.Provider并使用useContext. 反应上下文文档

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

像这样的东西：

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"/>

于 2021-02-03T07:48:05.610 回答