组件生命周期中期 API 调用

Question

据我了解，获取数据被认为是一种副作用，应该在使用效果范围内。但我想知道这个规则是否可以在组件生命周期的中期被打破。很明显，为什么 useEffect 对于在组件最初挂载时获取数据很重要。之后就不那么明显了。

这是我正在做的事情的一个例子。它似乎工作正常，并且在获取数据后，组件会重新渲染。

function ComponentThatFetchesList() {
const [list, setList] = useState([]);
const fetchData = () => {
asyncFetchData().then(data => {
setList(list);
});
}
return ( 
<div>
<button onClick={fetchData}>fetch data</button>
<ui>{list.map(l => (<li>{l}</li>))}</ul>
</div>
);
}

但根据我的理解，获取数据被认为是一种副作用，应该在使用效果范围内。所以也许建议像下面这样的东西(我添加了搜索文本来触发useEffect(。

function ComponentThatFetchesList() {
const [list, setList] = useState([]);
const [searchText, setSearchText] = useState("");
useEffect(() => {
asyncFetchData(searchText).then(data => {
setList(list);
});
}, [searchText]);
return ( 
<div>
<input box to enter search text>
<button that sets search text>
<ui>{list.map(l => (<li>{l}</li>))}</ul>
</div>
);
}

如果我使用第一种方法，我是否有引入稍后发现的错误的风险？

Answer 1

欢迎@daniel-longfellow来到堆栈溢出 👋

该方法看起来不错，因为数据加载发生在用户事件上。
(对于微优化，您可能会将fetchData包装在useCallback中，但如果没有性能问题，那只会使其更难阅读(。

当组件需要自动获取或状态更改时，您将使用第二个(useEffect(。

但是由于我不知道确切的用例，您可以使用任何一个并在以后进行重构。

---

最后，这个问题可能不是一个很好的堆栈溢出主题，因为它不是一个特定的问题，但可以固执己见(一个推荐的问题(。

请参考我可以在这里问什么话题？

我👍作为您是新贡献者，所以不会意识到这一点😉。