自定义hooks请求数据

过去

类组件

在React的类组件时代，请求数据的时机经常放在componentDidMount中，然后state中需要有一个变量记录当前是否正在请求接口，在请求的前后需要手动去改变这些状态，大概代码如下：

class App extends Component {
  state = {
    loading: false,
  }

  componentDidMount() {
    this.setState({
      data: null,
      loading: true,
    });
    axios.get('/api/test').then((data) => {
      this.setState({
        data,
        loading: false,
      });
    });
  }

  render() {
    return this.state.loading ? '正在加载中...' : (
      <Page data={data} />
    );
  }
}

hook组件

自从React发布了Hook以来，这个组织代码逻辑的方式广受欢迎，在Hook时代我们可以把请求前后的loading状态变量在自定义hook中管理起来，代码示例：

const useRequest = (fn, dependencies = []) => {
  const [data, setData] = useState(defaultValue);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    
    fn()
      .then(res => {
        setData(res);
      })
      .finally(() => {
        setLoading(false);
      });
  }, dependencies);

  return { data, setData, loading };
};

// App.js
function App() {
  const { loading, data } = useRequest(() => axios.get('/api/test'));
  return loading ? '正在加载中...' : (
    <Page data={data} />
  );
}