reactjs - 反应原生将大代码移动到单独的文件中 - 它是一个钩子吗？

Question

我有一个反应原生屏幕，它有很长的代码，我想折射。

说我screen.jsx的是（当然是简化的）：

import React, { useState, useCallback, useEffect } from 'react';
import useLocation from '../hooks/useLocation'; // A custom hook I wrote. This one makes sense to use as a hook. It's a function that returns a location.
...

export default function Screen() {
  const [fetchingLocation, region, setRegion] = useLocation();
  
  // FROM HERE DOWN
  const [fetchingRestaurants, setFetchingRestaurants] = useState(false);
  const [restaurants, setRestaurants] = useState([]);
  const [errorMessage, setErrorMessage] = useState('');

  const initSearch = useCallback(async ({ searchQuery, region }) => {
    setFetchingRestaurants(true);
    try {
      const response = await remoteApi.get('/search', {
        params: {
          term: searchQuery,
          latitude: region.latitude,
          longitude: region.longitude,
        },
      });
      const fetchedRestaurants = response.data.businesses;
      const fetchedRestaurantsArray = fetchedRestaurants.map((restaurant) => ({
        id: restaurant.id,
        name: restaurant.name,
      }));
      setRestaurants(fetchedRestaurantsArray);
      setFetchingRestaurants(false);
    } catch (e) {
      setRestaurants([]);
      setFetchingRestaurants(false);
    }
  }, []);

  return (
    <View>...</View>
  );
}

为了更好地构建我的代码，我想将您在“FROM HERE DOWN”下面看到的所有代码（initSearch以及它上面的三个状态管理 useState 挂钩）移动到另一个文件中并导入它。

目前我在hooksuseRestaurantSearch文件夹中创建了一个自定义钩子，如下所示：

export default function useRestaurantSearch() {
  // The code I mentioned goes here
  return [initSearch, errorMessage, restaurants, setRestaurants, fetchingRestaurants];
}

然后在我的Screen.jsx文件中我导入它import useRestaurantSearch from '../hooks/useRestaurantSearch';并在里面function Screen()我抓住const我需要的 s

const [
  initSearch,
  errorMessage,
  restaurants,
  setRestaurants,
  fetchingRestaurants,
] = useRestaurantSearch();

这行得通，但我觉得它可以写得更好，而且整个方法看起来很奇怪——它真的是一个自定义钩子吗？如果它不是自定义钩子，它是否作为实用程序属于 util 文件夹？

你会如何处理这个问题？

标签： reactjsreact-nativereact-hooks