用hooks和class分别实现useFetch，代码段与解析

2023-11-09 11:45:19

引言

useFetch是一个在React中常用的自定义Hook，用于在组件中轻松地进行HTTP请求并管理相关状态。相比于传统的类组件，使用hooks可以极大地简化组件的代码结构，使之更加易读和维护。

代码段

// hooks 版本
import { useState, useEffect } from "react";

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

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

  return { data, loading, error };
};

// class 版本
import React, { Component } from "react";

class FetchData extends Component {
  state = {
    data: null,
    loading: true,
    error: null
  };

  componentDidMount() {
    const { url } = this.props;
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const data = await response.json();
        this.setState({ data, loading: false });
      } catch (error) {
        this.setState({ error, loading: false });
      }
    };
    fetchData();
  }

  render() {
    const { data, loading, error } = this.state;
    return (
      <div>
        {loading && <p>Loading...</p>}
        {error && <p>Error: {error.message}</p>}
        {data && <p>{data.message}</p>}
      </div>
    );
  }
}

解析

Hooks 版本：

首先，我们定义了一个名为 useFetch 的自定义Hook，它接收一个参数 url，表示要请求的API地址。
在这个Hook中，我们使用 useState 和 useEffect 来管理组件的状态。
useState 用于管理三个状态：data、loading 和 error，分别表示请求的数据、请求的加载状态和请求的错误状态。
useEffect 用于在组件挂载时发出请求。在 useEffect 内部，我们使用 async/await 来发送请求，并根据请求的结果来更新状态。

Class 版本：

我们定义了一个名为 FetchData 的类组件，并继承 React.Component。
在 FetchData 组件的 state 中，我们定义了三个状态：data、loading 和 error，分别表示请求的数据、请求的加载状态和请求的错误状态。
在 componentDidMount 生命周期方法中，我们发送请求。我们使用 async/await 来发送请求，并根据请求的结果来更新状态。
在 render 方法中，我们根据状态来渲染组件。如果请求正在加载，则渲染“Loading...”；如果请求发生错误，则渲染错误信息；如果请求成功，则渲染请求的数据。