2 回答
![?](http://img1.sycdn.imooc.com/5333a0490001f9ff02200220-100-100.jpg)
TA贡献1946条经验 获得超3个赞
这取决于您的用例,您应该采取哪种方法
在以下情况下获取数据很有用useEffect
在某些生命周期(如初始渲染)中获取数据
在某些 prop 更改时获取数据
每隔一段时间获取数据,但设置订阅或
setInterval
在下面的方案中,在处理程序中获取数据很有用
根据用户交互(如搜索按钮单击)、搜索输入更改
由于您的案例是基于使用交互的,因此在处理程序而不是钩子中实际调用API会更好,更受控制useEffect
![?](http://img1.sycdn.imooc.com/545846070001a15002200220-100-100.jpg)
TA贡献1827条经验 获得超4个赞
我会说你应该使用钩子实现。在 React 文档中,建议使用它来执行副作用:
数据获取、设置订阅和手动更改 React 组件中的 DOM 都是副作用的示例。无论您是否习惯于将这些操作称为“副作用”(或只是“效果”),您之前都可能在组件中执行过它们。(链接到报价)
还有一个需要考虑的因素。在钩子实现中:
useEffect(() => {
if (!loading) return;
const fetchData = async () => {
const response = await fetch(
`https://api.github.com/search/repositories?q=${query}`
);
const data = await response.json();
setData(data.items);
setLoading(false);
};
fetchData();
}, [loading, query]);
您使用了优化。您正在传递到钩子中,这意味着该函数仅在其中一个值更改时运行。在第二个实现中,您将在每个输入更改上运行获取[loading, query]
以下是关于钩子这一方面的 React 文档的链接。
添加回答
举报