React useEffectOnce钩子

当条件为真时，最多运行一次回调函数。

• 使用useRef()钩子创建一个变量hasRunOnce，用于跟踪效果的执行状态。
• 使用useEffect()仅在when条件发生变化时运行。
• 检查when是否为true且效果尚未执行。如果两者都为true，则运行callback并将hasRunOnce设置为true。

const useEffectOnce = (callback, when) => {
  const hasRunOnce = React.useRef(false);
  React.useEffect(() => {
    if (when && !hasRunOnce.current) {
      callback();
      hasRunOnce.current = true;
    }
  }, [when]);
};

const App = () => {
  const [clicked, setClicked] = React.useState(false);
  useEffectOnce(() => {
    console.log('mounted');
  }, clicked);
  return <button onClick={() => setClicked(true)}>点击我</button>;
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
);