自定义钩子-实现有状态钩子是正确的吗？

Question

我正在重构我的应用程序的一些组件，为了使代码更简单和可重用，我决定将一些逻辑转移到钩子上。

例如：

export default function useMediaLibrary() {
  const isMounted = useIsMounted();

  const [images, setImages] = useState([]);

  const isFetching = useRef(false);
  const cursor = useRef(null);

  const fetchImages = async (limit = 60) => {
    if (isFetching.current) return;

    isFetching.current = true;

    const results = await MediaLibrary.getAssetsAsync({
      first: limit,
      after: cursor.current,
      sortBy: MediaLibrary.SortBy.creationTime,
      mediaType: [MediaLibrary.MediaType.photo],
    });

    if (!isMounted()) return;

    const { assets, hasNextPage, endCursor } = results;

    setImages(images.concat(assets));

    cursor.current = hasNextPage ? endCursor : null;

    isFetching.current = false;
  };

  const fetchNextImages = (limit = 60) => {
    // Necessary condition to avoid loops
    if (cursor.current) {
      fetchImages(limit);
    }
  };

  const createAsset = (uri) => MediaLibrary.createAssetAsync(uri);

  const requestPermissions = (writeOnly = false) =>
    MediaLibrary.requestPermissionsAsync(writeOnly);

  return {
    images,
    fetchFirstImages: fetchImages,
    fetchNextImages,
    createAsset,
    requestPermissions,
  };
}

你可以看到，这个钩子有点复杂..。它依赖于其他钩子并管理某些状态。

下面是我的问题：是管理自定义钩子内部状态的一个好做法，还是我们应该避免它？

Answer 1

是的，钩子用于提取包括状态在内的逻辑。请参阅这里