React Using Hooks and Context而不重新渲染只使用setter函数的组件

Question

我在项目中使用react钩子。我正试图阻止对我想打开帮助模式的复杂按钮/界面的重新调用。但是，这个按钮需要在整个应用程序中使用，而不会引起重新应答。有没有一种方法可以在不强制更新这个无关组件的情况下使用setter？

下面是我可以生成的最简化的代码示例。这是上下文的提供者：

// Provider.js
export default function ModalProvider(props: React.PropsWithChildren<{}>) {
// adding the event state info
const [helpModalOpen, setHelpModalOpen] = useState(false as any);

const contextValue = {
helpModalOpen,
setHelpModalOpen,
};
return (
<StateContext.Provider value={{...contextValue}}>
{props.children}
</StateContext.Provider>
);
}
export function useModalState() {
const context = useContext(StateContext);
if (!context) {
throw new Error('useModalState must be used within the AppStateProvider');
}
return context;
}

这是一个非常复杂的组件，无法分解(它是一个视频接口(：

// ComplexButtonToOpenHelpModal.js
export default function ComplexComponent() {
const {setHelpModalOpen} = useModalState();
return (
<ExtremelyComplexComponent onClick={setHelpModalOpen}  />
);
}

虽然这是一个简单的例子，但我需要在整个应用程序中使用类似的代码。

Answer 1

一个可能的简单解决方案是将上下文拆分为两部分：

// Provider.js
const ModalOpenContext = React.createContext();
const SetModalOpenContext = React.createContext();
export default function ModalProvider(props: React.PropsWithChildren<{}>) {
// adding the event state info
const [helpModalOpen, setHelpModalOpen] = useState(false as any);
return (
<SetModalOpenContext.Provider value={setHelpModalOpen}>
<ModalOpenContext.Provider value={helpModalOpen}>
{props.children}
</ModalOpenContext.Provider>
</SetModalOpenContext.Provider>
);
}
export function useModalState() {
const context = useContext(ModalOpenContext);
if (!context) {
throw new Error('useModalState must be used within the AppStateProvider');
}
return context;
}
export function useSetModalState() {
const context = useContext(SetModalOpenContext);
if (!context) {
throw new Error('useSetModalState must be used within the AppStateProvider');
}
return context;
}

// ComplexButtonToOpenHelpModal.js
export default function ComplexComponent() {
const setHelpModalOpen = useSetModalState();
return (
<ExtremelyComplexComponent onClick={setHelpModalOpen}  />
);
}

您现在正在将一个稳定的值传递给SetModalOpenContext.Provider，因此使用useSetModalState订阅它的组件将永远不会被迫重新提交，因为该值不会随着时间的推移而改变。

正如你在问题中所指出的，React文档指出：；只要提供者的值属性发生更改，作为提供者的后代的所有使用者都将重新呈现&"；。

因此，实际上，当您知道上下文值的某个部分将发生更改时，防止重新发送的唯一方法是：1(将上下文拆分为单独的部分(如上文所示(或2(使用其他机制在应用程序中传递必要的数据。