时间戳

首页 > 解决方案 > 中间组件生命周期 API 调用

reactjs - 中间组件生命周期 API 调用

问题描述

据我了解，获取数据被认为是一种副作用，应该在使用效果范围内。但我想知道这个规则是否可以在组件生命周期中被打破。很明显为什么 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>
   );
}

如果我采用第一种方法，我是否有可能引入稍后发现的错误？

标签： reactjsreact-hooks

解决方案

欢迎@daniel-longfellow 加入 Stack Overflow

该方法看起来很好，因为数据加载发生在用户事件上。
（对于微优化，你可能会换掉fetchData，useCallback但如果没有性能问题，只会让它更难阅读）。

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

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

最后，这个问题可能不是一个好的 Stack Overflow 主题，因为它不是一个具体问题，但可以自以为是（推荐问题）。

请参阅我可以在这里询问哪些主题？

我作为一个新的贡献者，所以不会意识到这一点。

推荐阅读