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

【问题标题】：React conditional action - useEffect vs an if statement反应条件动作 - useEffect vs if 语句
【发布时间】：2023-04-03 05:55:01
【问题描述】：

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 语句

【讨论】：