如果父组件更新了react js中的上下文或状态，如何停止重新渲染子组件?

Question

如果父组件在react js中更新了上下文或状态，如何停止重新渲染子组件?

我已经使用React.memo了，它仍然在重新渲染。

这是我的子组件

const Ab = () => {
console.log("---ff-ddd");
const pageContext = useContext(PageContext);
useEffect(() => {
setTimeout(() => {
pageContext.updateGlobalMenu({});
}, 5000);
}, []);
return <div>ddd</div>;
};
export default React.memo(Ab);

我正在更新上下文。我希望它更新上下文值但不重新呈现子组件

export default function IndexPage() {
const [globalMenu, setGlobalMenu] = useState("");
const updateGlobalMenu = (menuContent) => {
setGlobalMenu(menuContent);
};
return (
<PageContext.Provider
value={{
updateGlobalMenu
}}
>
<Ab />
</PageContext.Provider>
);
}

这是我的代码

https://codesandbox.io/s/friendly-bartik-3cnqvf?file=/pages/index.js: 156 - 470

如果你看到了，打印两次console． 这意味着它重新渲染了两次

Answer 1

如果PageContext的值改变，那么任何使用该上下文的组件(包括Ab)都将渲染。反应。备忘录无法阻止这一切。在您的情况下，您要更改每次渲染的值，因此您有空间通过记忆上下文值来改进它。这样，除非需要，否则值不会改变:

export default function IndexPage() {
const [globalMenu, setGlobalMenu] = useState("");
const updateGlobalMenu = useCallback((menuContent) => {
setGlobalMenu(menuContent);
}, []);
const value = useMemo(() => ({
updateGlobalMenu
}), [updateGlobalMenu]);
return (
<PageContext.Provider value={value}>
<Ab />
</PageContext.Provider>
);
}

Answer 2

除了记住前面的答案，你还可以拆分你的"api";和";data"部分的状态到两个不同的提供者。

updateGlobalMenu在PageContextAPIprovider中，globalMenu在PageContextDataprovider中。这样，当您更新数据时，只有具有该数据的提供程序将被重新呈现。

请看这篇文章，我在这里详细介绍了这种技术:https://www.developerway.com/posts/how-to-write-performant-react-apps-with-context