反应条件动作 - useEffect vs if 语句

Posted 2023-03-17

技术标签:

【中文标题】反应条件动作 - useEffect vs if 语句【英文标题】：React conditional action - useEffect vs an if statement 【发布时间】：2022-01-14 17:16:47 【问题描述】：

React 相对较新，遇到了一些我不确定答案的问题。如果你有条件动作，useEffect 和只有 if 语句有区别吗？

function Items() 
    [setItemAdded, itemAdded] = useState(false);
    
    if (itemAdded) 
      saveData();
      itemAdded = false;

对

     useEffect(() => 
         if (itemAdded) 
             saveData();
             itemAdded = false;
         , [itemAdded]);

据我了解，当状态更新 itemAdded 时，它会重新渲染调用 if 语句并执行代码的组件。在第二种情况下，由于 itemAdded 是一个依赖项，只要 itemAdded 发生更改，它就会被调用。对我来说，这两种情况似乎具有相同的效果。两者有区别吗？

【问题讨论】：

【参考方案1】：

是的，绝对可以，通过添加另一个状态并更新它，您会看到不同之处。

if 语句 在每次渲染时都会执行，但 useEffect 仅根据其依赖项（数组中的项）执行。

我建议使用 useEffect 而不是 if 语句

【讨论】：

以上是关于反应条件动作 - useEffect vs if 语句的主要内容，如果未能解决你的问题，请参考以下文章