我正在使用React上下文，并希望确认我的结构

Question

这是我第一个使用React上下文而不是React-Redux的应用程序，并希望获得应用程序结构的帮助。(我不使用React-Redux或Redux-Saga库。(

• 上下文

const AppContext = createContext({
  client,
  user,
});

• 一个动作之一示例

export const userActions = (state, dispatch) => {
  function getUsers() {
    dispatch({ type: types.GET_USERS });
    axios
      .get("api address")
      .then(function(response) {
        dispatch({ type: types.GOT_USERS, payload: response.data });
      })
      .catch(function(error) {
        // handle error
      });
  }
  return {
    getUsers,
  };
};

• reducer(index.js(：我使用Redux库中的组合函数代码

const AppReducer = combineReducers({
  client: clientReducer,
  user: userReducer,
});

• root.js

import React, { useContext, useReducer } from "react";
import AppContext from "./context";
import AppReducer from "./reducers";
import { clientActions } from "./actions/clientActions";
import { userActions } from "./actions/userActions";
import App from "./App";
const Root = () => {
  const initialState = useContext(AppContext);
  const [state, dispatch] = useReducer(AppReducer, initialState);
  const clientDispatch = clientActions(state, dispatch);
  const userDispatch = userActions(state, dispatch);
  return (
    <AppContext.Provider
      value={{
        clientState: state.client,
        userState: state.user,
        clientDispatch,
        userDispatch,
      }}
    >
      <App />
    </AppContext.Provider>
  );
};
export default Root;

因此，每当组件要访问上下文存储或派遣操作时，这就是我从组件中做的：

import React, { useContext } from "react";
import ListMenu from "../common/ListMenu";
import List from "./List";
import AppContext from "../../context";
import Frame from "../common/Frame";
const Example = props => {
  const { match, history } = props;
  const { userState, userDispatch } = useContext(AppContext);
  // Push to user detail route /user/userId
  const selectUserList = userId => {
    history.push(`/user/${userId}`);
    userDispatch.clearTabValue(true);
  };
  return (
    <Frame>
      <ListMenu
        dataList={userState.users}
        selectDataList={selectUserList}
      />
      <List />
    </Frame>
  );
};
export default Example;

我现在遇到的问题是，每当我派遣操作或尝试访问上下文存储时，所有组件都会重新渲染，因为上下文提供商正在包装整个应用程序。

我想知道如何修复整个重新渲染问题(如果可以使用我的操作/还原文件夹结构(。

另外，我正在从操作中获取数据，但是我想将其与动作文件分开，就像我们在redux-saga结构上的作用一样。我想知道是否有人知道如何在不使用redux/redux-saga的情况下将其分开。

谢谢，请让我知道您是否需要检查任何代码/文件。

Answer 1

我曾经遇到过重新渲染问题，我在官方网站上找到了此信息：https://reactjs.org/docs/context.html#caveats可能会帮助您

Answer 2

官方文档中描述了此效果(上下文更新上的更新组件(。

当上下文值更改时，调用UseContext的组件将始终重新渲染。如果重新渲染组件很昂贵，则可以使用Memeoization进行优化

也可能描述的解决方案

我看到通用解决方案是 useMemo

例如

const Example = props => {
    const { match, history } = props;
    const { userState, userDispatch } = useContext(AppContext);
    // Push to user detail route /user/userId
    const selectUserList = userId => {
        history.push(`/user/${userId}`);
        userDispatch.clearTabValue(true);
    };
    const users = userState.users; 
    return useMemo(() => {
        return <Frame>
            <ListMenu
                dataList={users}
                selectDataList={selectUserList}
            />
            <List />
        </Frame>
    }, [users, selectUserList]);  // Here are variables that component depends on
};

我也可能建议您完全切换到Redux。您几乎使用combineReducers和dispatch。React-Redux现在曝光useDispatch和useSelector挂钩，因此您可以使代码非常接近您现在正在做的事情(用useSelector替换useContext，用useReducer替换CC_8。>