如果父级更新反应js中的上下文或状态，如何停止重新渲染子组件？

Question

如果父级更新反应 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

如果你看到它打印两次控制台。 这意味着它正在重新渲染两次

Answer 1

如果PageContext的值发生变化，那么任何使用该上下文的组件（包括Ab ）都将呈现。 React.memo 无法阻止这一点。 在您的情况下，您正在更改每次渲染的值，因此您有空间通过记忆上下文值来改进它。 这样，除非需要，否则该值不会改变：

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将在PageContextAPI提供者中， globalMenu将在PageContextData提供者中。 这样，当您更新数据时，只会重新呈现具有数据的提供者。

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