React/Next.js中组件复用的艺术

在开发React和Next.js应用时，如何提高代码的复用性是每个开发者都会遇到的问题。本文将通过一个实际案例，展示如何利用React的特性来减少代码重复，提升组件的可维护性和可扩展性。

问题背景

假设我们正在开发一个包含多个数据展示组件的应用，例如展示游戏列表和漫画列表的组件。这些组件需要从不同的后端API获取数据，并在页面上展示。虽然它们的功能相似，但直接复制粘贴代码不仅会增加维护难度，还会使代码变得冗余。

初始组件示例

下面是两个最初版本的组件：

GamesDisplay

import { StateLoading } from "@/shared/constants/loading"; import { useSelectorEffect } from "@/hooks/useSelector"; import { getGames, selectGames, selectStatus } from "@/store/games/gamesSlice"; import { Game } from "@/shared/interfaces/game"; const GamesDisplay = () => { const games = useAppSelector(selectGames) as Game[]; const isClientLoaded = useSelectorEffect(games, getGames); const isLoading = useAppS