React 钩子，提供上下文，但不在状态更改时重新渲染子项

Question

我的目标是能够有一个孩子们可以访问的计时器。问题在于只有少数组件需要秒值，但许多组件需要能够操作计时器(暂停它、更改值、重置它等(。我的解决方案是将所有子项包装在其中，但每次第二次更新时，访问它的子项仍然会呈现 - 即使我没有在上下文中解压缩秒数。

这是包装器：

import * as React from 'react';
import Timer, {ITimerSettings} from '../../utilities/Timer';
export const TimerContext = React.createContext({
seconds: null,
setTimer: null,
timer: null
});
export const TimerProvider = TimerContext.Provider;
export const TimerConsumer = TimerContext.Consumer;
interface ITimerWrapperProps {
isPaused: boolean;
isReady: boolean;
children: any;
}
const TimerWrapper: React.FC<ITimerWrapperProps> = ({isReady, isPaused, children}) => {
const timer = React.useRef<Timer>(new Timer());
const [seconds, setSeconds] = React.useState<number>(null);
React.useEffect(() => {
if (isReady && timer.current && timer.current.duration) {
isPaused ? timer.current.stop() : timer.current.start();
}
}, [isReady, isPaused]);
const setTimer = React.useCallback((settings: Partial<ITimerSettings>): void => {
if (timer.current) {
timer.current.reset({
callback: i => setSeconds(i),
...settings
});
}
}, []);
return (
<TimerProvider value={{seconds, timer, setTimer}}>
{children}
</TimerProvider>
);
};
export default React.memo(TimerWrapper);

以下是孩子访问它的方式：

const {timer, setTimer} = React.useContext(TimerContext);

我的问题是，为什么每次秒更新时孩子都会重新渲染，我该如何防止它？我是否需要拆分上下文，以便有一个用于秒，一个用于计时器？

Answer 1

上下文值是每次渲染的新对象，因此每次第二次更新时

<TimerProvider value={ {seconds, timer, setTimer} }>

您希望使用秒数的组件使用seconds值进行更新，并且仅使用控件的组件永远不会重新呈现。

我想我会把它分成一个TimerValueContext和一个TimerControlsContext.其中控件的值始终具有相同的实例。然后消费者可以选择一个或两个。

像这样的东西：(可能不是有效的代码(

const TimerControlsContext = React.createContext({
setTimer: null,
timer: null
});
const TimerValueContext = React.createContext(0);
export const useTimerValue = () => {
const context = useContext(TimerValueContext);
if (context) return context;
throw new Error('Outside of provider!');
};
export const useTimerControls = () => {
const context = useContext(TimerControlsContext);
if (context) return context;
throw new Error('Outside of provider!');
};
interface ITimerWrapperProps {
isPaused: boolean;
isReady: boolean;
children: any;
}
const TimerWrapper: React.FC<ITimerWrapperProps> = ({isReady, isPaused, children}) => {
const timer = React.useRef<Timer>(new Timer());
const [seconds, setSeconds] = React.useState<number>(null);
React.useEffect(() => {
if (isReady && timer.current && timer.current.duration) {
isPaused ? timer.current.stop() : timer.current.start();
}
}, [isReady, isPaused]);
const setTimer = React.useCallback((settings: Partial<ITimerSettings>): void => {
if (timer.current) {
timer.current.reset({
callback: i => setSeconds(i),
...settings
});
}
}, []);

const [controlsInstance, _] = React.useState({timer, setTimer});
return (
<TimerControlsContext.Provider value={controlsInstance}>
<TimerValueContext.Provider value={seconds}>
{children}
<TimerValueContext.Provider>
</TimerControlsContext>
);
};
export default React.memo(TimerWrapper);