如果父級更新反應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