react 自定义封装hooks

React自定义封装Hooks是指开发者将常用的逻辑抽象成可复用的代码，从而使组件更加简洁明了，并且可以提高代码复用率。自定义Hooks可以被多个组件共享，也可以被其他Hooks所调用。开发者可以通过useXXX()的方式使用自定义的Hooks。

React的自定义Hooks通常由两部分组成：状态和函数。状态用于保存组件中需要的变量，函数用于改变这些变量，以及在需要时返回所需数据。

以下是一个示例：

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetchData;

上述代码是一个自定义Hook，它可以根据传入的URL返回对应的数据。在这个Hook中，我们使用了useState来维护数据状态、使用useEffect来异步请求数据。最后，我们返回了一个对象，包含了请求回来的数据、请求状态和错误信息。