时间戳

首页 > 解决方案 > 可重用的 React 钩子函数的意外（？）行为或者我做错了什么？

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

问题描述

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

笔记：

...然后大惊喜，与可重复使用的 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>
  );
}

标签： reactjsreact-hooks

解决方案

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

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

推荐阅读