1

我正在尝试编写自己的可重用 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>
  );
}
4

1 回答 1

1

useEffectOnce并且useButton是常规函数。它们应该在每个组件渲染上运行。当组件函数被调用时，没有办法阻止它们被传统的 JavaScript 方法调用（即没有eval）。

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

于 2018-11-18T11:29:48.657 回答