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>
   );
}

但是据我了解，获取数据被认为是副作用，应该在使用范围之内。因此，建议使用以下类似的内容（我添加了searchText来触发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）。

但是由于我不知道确切的用例，您可以选择其中一种，然后在以后进行重构。

最后，这个问题可能不是一个很好的Stack Overflow主题，因为它不是一个特定问题，但可以提出来（a recommend question）。

请参阅What topics can I ask about here?

我?，因为您是新贡献者，所以不会知道它。

中间组件生命周期API调用

1 个答案: