如何制作一个不会立即运行的挂钩[关闭]答案

【问题标题】：How to make a hook that doesn't run immediately [closed]如何制作一个不会立即运行的挂钩[关闭]
【发布时间】：2023-02-11 05:37:47
【问题描述】：

如何在 React 中创建一个不会立即运行的自定义 Hook 直到我运行它

例如：

const useHook = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(undefined);

 return [getData, { isLoading, data }];

};

function App() {
  const [getData, { isLoading, data }] = useHook();

  return <></>
}
const [UsingFC ,{props}] = useHook();

像 apollo graphql 客户端 useLazyQuery

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

基本上在实现中没有什么真正有趣的，你只是返回一个带有触发方法和数据对象的数组。

const { useCallback, useState } = React;

const useHook = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(undefined);

  const getData = useCallback(() => {
    setIsLoading(true);

    // do your fetch or whatever
    setTimeout(() => {
      setData("data");
      setIsLoading(false);
    }, 1000);
  }, []);

  return [getData, { isLoading, data }];
};

function App() {
  const [getData, { isLoading, data }] = useHook();

  return (
    <div className="App">
      <p>IsLoading: {isLoading.toString()}</p>
      <p>Data: {data}</p>

      <button type="button" onClick={getData}>
        Get
      </button>
    </div>
  );
}


// v18.x+
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

【讨论】：

我不认为这是那么容易

【解决方案2】：

如果您不想在挂钩运行时执行某些代码，您的挂钩可以返回一个包装该代码的函数，您可以按需运行该函数。

【讨论】：