反应 useContext() 性能，自定义钩子内的 useContext [英] React useContext() performance, useContext inside custom hook

问题描述

我使用了一个使用 React Hooks 的结构.它基于一个全局的 Context ，其中包含了 reducer 的组合(如在 Redux 中).此外，我广泛使用 自定义钩子 来分离逻辑.我有一个包含异步 API 请求的钩子，它变得非常麻烦，我有机会将这个钩子的几乎每个函数拆分成其他钩子，但是这些函数中的每一个都使用全局上下文(更准确地说 - 从 useReducer() 调度)).

I used a structure using React Hooks. It is based on a global Context that contains a combination of reducers (as in the Redux). Also, I widely use custom hooks to separate logic. I have a hook that contains asynchronous API requests and it has become quite cumbersome and I have the opportunity to split almost every function of this hook into other hooks, but each of these functions uses a global context (more precisely - dispatch from useReducer()).

1. 可以在每个需要它的钩子中使用 useContext() 吗?
2. 例如，如果我创建 10 个在内部使用 useContext() 并在组件中使用它们的自定义钩子，它将如何影响性能.

示例:

提供者/Store.js

Example:

providers/Store.js

import React, { createContext, useReducer } from 'react';

export const StoreContext = createContext();

export const StoreProvider = ({ children }) => {
  /**
   * Store that contains combined reducers.
   */
  const store = useReducer(rootReducer, initialState);

  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};

钩子/useStore.js

hooks/useStore.js

import { useContext } from 'react';
import { StoreContext } from '../providers';

export const useStore = () => useContext(StoreContext);

钩子/useFoo.js

hooks/useFoo.js

import { useCallback } from 'react';
import { useStore } from './useStore';

export const useFoo = () => {
  const [, dispatch] = useStore();

  const doFoo = useCallback(
    async params => {
      dispatch(actions.request());

      try {
        const res = await SomeService.getSomething(params);
        dispatch(actions.add(res));
        dispatch(actions.success());
      } catch (error) {
        dispatch(actions.failure());
      }
    },
    [dispatch]
  );

  return { doFoo };
};

钩子/useBar.js

hooks/useBar.js

import { useCallback } from 'react';
import { useStore } from './useStore';

export const useBar = () => {
  const [, dispatch] = useStore();

  const doBar = useCallback(
    async params => {
      dispatch(actions.request());

      try {
        const res = await SomeService.getSomething(params);
        dispatch(actions.success());
        dispatch(actions.add(res));
      } catch (error) {
        dispatch(actions.failure());
      }
    },
    [dispatch]
  );

  return { doBar };
};

钩子/useNext.js

hooks/useNext.js

...
import { useStore } from './useStore';

export const useNext = () => {
  const [, dispatch] = useStore();

  ...
};

components/SomeComponent.js

components/SomeComponent.js

const SomeComponent = () => {
  // use context
  const [store, dispatch] = useStore();

  // and here is the context
  const { doFoo } = useFoo();

  // and here
  const { doBar } = useBar();

  // and here
  useNext();

  return (
    <>
      <Button onClick={doFoo}>Foo</Button>
      <Button onClick={doBar}>Bar</Button>
      // the flag is also available in another component
      {store.isLoading && <Spin />}
    </>
  )
}

推荐答案

在内部，钩子可以引用组件拥有的状态队列.(在 React 的钩子系统下 - Eytan Manor)

Internally, hooks can reference a state queue owned by component. (Under the hood of React’s hooks system - Eytan Manor )

useContext 只是从相关的 Context Provider 中引用全局状态.正如您所关心的，useContext 几乎没有任何开销.

useContext is just to reference a global state from the relative Context Provider. There is almost no overhead from useContext as you are concerned.

这篇关于反应 useContext() 性能，自定义钩子内的 useContext的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！