关于在 React 中调用 API 的最佳实践

Question

我正在构建一个简单的电影应用程序来训练 React。我制作了一个导航菜单，用户可以点击“热门”、“正在播放”等电影类别来在主页上显示不同的电影。

我的问题是关于如何处理对 API 的调用以及什么是最佳做法。我想到了两个解决方案：

1 - 在应用首次加载时使用 useEffect 调用所有类别的所有电影，并将所有电影保存在按类别分隔的不同 useState 中。

const [popularMovies, setPopularMovies] = useState([])
const [nowPlayingMovies, setNowPlayingMovies] = useState([])
...

2 - 只创建一个 useState of moviesToDisplay 并调用 API 并在用户每次单击新类别时替换它的内容。

const [moviesToDisplay, setMoviesToDisplay] = useState([])

Answer 1

最好只询问您要显示的数据，如果用户想要查看特定类别并单击例如您为恐怖电影获取的“恐怖”按钮。

如果你有一个包含 50 万部电影的数据库，你将在每个请求上使用大量资源，这在前端和后端都太过分了。

对于您的主页，您可以获取要显示的电影列表，例如 10-15 部电影，您还可以考虑添加无限滚动，但总是按需获取。

用户select类别：

Best practice regarding call to an API in React