为什么或何时应该在 React 的自定义 Hook 中使用状态？

Question

我正在学习 React 中的自定义 Hooks。正如您在 https://www.w3schools.com/react/react_customhooks.asp.

中看到的，我采用了以下典型示例 (useFetch)

import { useState, useEffect } from "react";
const useFetch = (url) => {
const [data, setData] = useState(null); /* <--- Why use this? */
  useEffect(() => {
    fetch(url).then((res) => res.json()).then((data) => setData(data));
  }, [url]);
  return [data];
};
export default useFetch;

我很困惑为什么应该在该 Hook 内部或通常在自定义 Hook 中使用状态。我总是将状态管理与组件联系起来，而不是与钩子联系起来。这也许是我的困惑。

难道仅仅通过返回一个数据变量就可以做到吗？

Answer 1

与普通函数不同，自定义钩子封装了 React 状态。这意味着钩子可以利用 React 自己的钩子并执行自定义逻辑。从这个意义上说，它很抽象。

对于您的情况，您想要 return 数据的 state，而不仅仅是 data 本身，因为状态与 useEffect 相关联。这意味着 fetch 将仅运行并且扩展仅在其依赖项 ([url]) 更改时更新 data。

如果它是一个正常函数，只是 return 从获取的数据中获取数据，那么每次组件使用挂钩 re-renders 时，您都会发送一个请求。这就是为什么您使用 useState 和 useEffect 来确保它只在应该更新的时候更新。

为什么或何时应该在 React 的自定义 Hook 中使用状态？

Why or when should I use state within a custom Hook in React?

reactjs

use-state

react-custom-hooks