可重用 React 钩子函数的意外（？）行为或者我做错了什么？

Question

我正在尝试将我自己的可重用 useEffect 挂钩函数 useEffectOnce() 编写到运行一次（在安装和卸载时），但这似乎是不可能的。每次重新渲染后都会调用我的函数：https://codesandbox.io/s/mjx452lvox

function useEffectOnce() {
  console.log("I am in useEffectOnce");

  useEffect(() => {
    console.log("I am in useEffectOnce's useEffect");
    return () => {
      console.log("i am leaving useEffectOnce's useEffect");
    };
  }, []);
}

function App() {
  const [count, setCount] = useState(0);

  useEffectOnce(); // once!?

  return (
    <div className="app">
      <h3>useEffectOnce (my reusable function)... Wait, once!?</h3>
      <button onClick={() => setCount(count + 1)}>
        You clicked me {count} times
      </button>
    </div>
  );
}

备注：

useEffectOnce() 中的 useEffect() 挂钩按预期工作
useEffectOnce(() => {}, []); 什么都没变

...然后大惊喜，与可重用 useState 挂钩函数（！？）的行为相同：https://codesandbox.io/s/2145m37xnr

我的函数 useButton 在每次重新渲染后被调用，并且是第一次，独立的，按钮被点击。

function useButton(initialCounterValue) {
  const [usebuttoncount, setUseButtonCount] = useState(initialCounterValue);

  console.log("I am in useButton");

  const handleuseButtonClick = () => {
    setUseButtonCount(usebuttoncount + 1);
  };

  return {
    usebuttoncount,
    onClick: handleuseButtonClick
  };
}

function App() {
  const [count, setCount] = useState(0);
  const useButtonCounter = useButton(0);

  return (
    <div className="app">
      <h3>
        useButton (my reusable useState function) is called only when... OMG!?
      </h3>
      <button onClick={() => setCount(count + 1)}>
        You clicked me {count} times
      </button>
      <br />
      <button {...useButtonCounter}>
        (useButton hook) You clicked me {useButtonCounter.usebuttoncount} times
      </button>
    </div>
  );
}

Answer 1

useEffectOnce 和 useButton 是常规函数。它们预计在每个组件渲染时运行。当组件函数被调用时，没有办法阻止它们被常规的JavaScript方式调用（即没有eval）。

它是 useEffect 回调函数（I am in useEffectOnce's useEffect 日志条目），预计会在组件安装时调用一次。所有需要在组件安装上评估的代码都应该驻留在那里。

可重用 React 钩子函数的意外（？）行为或者我做错了什么？

Unexpected(?) behavior of reusable React hook functions or what am I doing wrong?

reactjs

react-hooks