Реагирует на производительность useContext (), useContext внутри пользовательского хука

Question

Я использовал структуру, используя React Hooks .Он основан на глобальном контексте , который содержит комбинацию редукторов (как в Redux).Кроме того, я широко использую пользовательские хуки для разделения логики.У меня есть хук, который содержит асинхронные запросы API, и он стал довольно громоздким, и у меня есть возможность разбить почти каждую функцию этого хука на другие хуки, но каждая из этих функций использует глобальный контекст (точнее - диспетчеризация от useReducer ()).

Итак, вопросы:

1. Можно ли использовать useContext () в каждом хуке, который в этом нуждается?
2. Как это повлияет на производительность, если дляНапример, я создаю 10 пользовательских хуков, которые используют useContext () для внутреннего использования и используют их в компоненте.

Пример:

provider / 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>
  );
};

hooks / useStore.js

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

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

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 };
};

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 };
};

hooks / useNext.js

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

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

  ...
};

компоненты / 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 />}
    </>
  )
}

Answer 1

Внутренне перехватчики могут ссылаться на очередь состояний, принадлежащую компоненту.( Под капотом системы React's hooks - Eytan Manor )

useContext просто для ссылки на глобальное состояние из поставщика относительного контекста.С точки зрения useContext накладные расходы практически отсутствуют.