reactjs - React Native 将大型代码移动到单独的文件中 - 它是一个钩子(Hook)吗？

Question

我有一个 React native 屏幕，其中有一段很长的代码，我想对其进行折射。

说我的 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 Hook )移动到另一个文件中并导入。

此刻我创建了一个自定义 useRestaurantSearch像这样在 hooks 文件夹中 Hook :

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我需要用

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

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

你会如何处理这个问题？

Answer 1

是的，根据 React docs，这将被视为自定义 Hook ，自定义 Hook 只是一种重用有状态逻辑的机制。

可以帮助简化它的一件事是:

• 使用类似TanStack Query 的库(以前的 React 查询)。您可以创建一个查询来获取餐厅，然后您可以使用查询中的数据和 fetchStatus，而不是将它们添加到状态。