React函数组件中使用自定义钩子来实现复用

以下是一个在函数组件中使用自定义钩子实现复用的示例：

 

首先，创建一个自定义钩子，例如一个用于获取数据的钩子：

 

javascript格式：

import { useState, useEffect } from'react';

 

function useFetchData(url) {

  const [data, setData] = useState(null);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);

 

  useEffect(() => {

    fetch(url)

    .then(response => response.json())

    .then(setData)

    .catch(setError)

    .finally(() => setLoading(false));

  }, [url]);

 

  return { data, loading, error };

}

然后，在函数组件中使用这个自定义钩子：

 

javascript格式：

import React from'react';

import useFetchData from './useFetchData';

 

function MyComponent() {

  const { data, loading, error } = useFetchData('https://example.com/api/data');

 

  if (loading) {

    return <div>Loading...</div>;

  }

 

  if (error) {

    return <div>Error: {error.message}</div>;

  }

 

  return (

    <div>

      {data && <div>{data.someProperty}</div>}

    </div>

  );

}

在上述示例中， useFetchData  钩子负责处理数据获取的逻辑，包括状态管理和副作用。 MyComponent  组件通过调用这个钩子来复用数据获取的功能，而无需在每个需要获取数据的组件中重复编写相同的代码。