Javascript React useContext（）性能，自定义挂钩内的useContext

我使用了一个结构使用。它基于一个包含多个减缩器组合的全局变量（如Redux中）。 此外，我广泛使用分离逻辑。 我有一个包含异步API请求的钩子，它变得相当麻烦，我有机会将这个钩子的几乎每个函数拆分为其他钩子，但这些函数都使用全局上下文（更准确地说，是从useReducer（）分派）

因此，问题是：

在每个需要它的钩子中使用useContext（）可以吗

例如，如果我创建了10个在内部使用useContext（）的自定义挂钩，并在组件中使用它们，那么它将如何影响性能

例子： 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>
  );
};

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();

  ...
};

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

const SomeComponent=（）=>{
//使用上下文
const[store，dispatch]=useStore（）；
//这里是上下文
const{doFoo}=useFoo（）；
//这里呢
const{doBar}=useBar（）；
//这里呢
useNext（）；
返回(
福
酒吧
//该标志在另一个组件中也可用
{store.isLoading&&}
)
}

在内部，钩子可以引用组件拥有的状态队列。（）

useContext

只是从相对上下文提供程序引用全局状态。就您而言，

useContext

几乎没有开销

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