ReactJS Hook 模式 ~最新 Ref 模式~

Source: Dev.to

最新 Ref 模式

• 最新的 ref 模式解决了在 useEffect 中访问最新值的问题，而无需将它们添加到依赖数组中。
• 首先，创建一个 ref 来存储函数，然后再使用一个没有依赖的 useEffect，在每次渲染时保持该 ref 为最新。

import { useEffect, useRef } from "react";

function ClickHandler({ onClick }) {
  const onClickRef = useRef(onClick);

  // Keep the ref up‑to‑date on every render
  useEffect(() => {
    onClickRef.current = onClick;
  });

  // Use the ref inside an effect with an empty dependency array
  useEffect(() => {
    const handleClick = () => {
      onClickRef.current();
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, []);

  return (
    // JSX for the component can be placed here
  );
}

function App() {
  return <ClickHandler onClick={() => console.log("Clicked")} />;
}

export default App;