[英]React useContext() performance, useContext inside custom hook
I used a structure using React Hooks .我使用了一个使用React Hooks的结构。 It is based on a global Context that contains a combination of reducers (as in the Redux).
它基于包含减速器组合的全局上下文(如在 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()).
我有一个包含异步 API 请求的钩子,它变得非常麻烦,我有机会将这个钩子的几乎每个 function 拆分为其他钩子,但是这些函数中的每一个都使用全局上下文(更准确地说 - 从 useReducer() )。
providers/Store.js提供者/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钩子/useStore.js
import { useContext } from 'react';
import { StoreContext } from '../providers';
export const useStore = () => useContext(StoreContext);
hooks/useFoo.js钩子/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钩子/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钩子/useNext.js
...
import { useStore } from './useStore';
export const useNext = () => {
const [, dispatch] = useStore();
...
};
components/SomeComponent.js组件/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 />}
</>
)
}
Internally, hooks can reference a state queue owned by component.在内部,钩子可以引用组件拥有的 state 队列。 ( Under the hood of React's hooks system - Eytan Manor )
( 在 React 的 hooks 系统的引擎盖下 - Eytan Manor )
useContext
is just to reference a global state from the relative Context Provider. useContext
只是从相关的 Context Provider 中引用一个全局 state 。 There is almost no overhead from useContext
as you are concerned.正如您所关心的,
useContext
几乎没有开销。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.