React useContext() performance, useContext inside custom hoo

Question

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

所以，问题：

可以在

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

例：

提供商/商店.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>
);
};

钩子/使用商店.js

import { useContext } from 'react';
import { StoreContext } from '../providers';
export const useStore = () => useContext(StoreContext);

钩子/使用Foo.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 };
};

钩子/使用栏.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 };
};

钩子/使用下一个.js

...
import { useStore } from './useStore';
export const useNext = () => {
const [, dispatch] = useStore();
...
};

组件/某些组件.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 的钩子系统的引擎盖下 - Eytan Manor )

useContext只是从相对上下文提供程序引用全局状态。就您而言，useContext几乎没有开销。