如何提前退出 useEffect 挂钩？答案

【问题标题】：How to early exit useEffect hook?如何提前退出 useEffect 挂钩？
【发布时间】：2019-07-04 01:35:00
【问题描述】：

在docs 中它说我们应该只在组件的顶层调用钩子。由于 useEffect 的 API，return 已被保留用于清理，这让我想知道如何提前退出 useEffect 挂钩以防止深度嵌套我的 if 语句。

// instead of
React.useEffect(() => {
  if (foo){
    // do something
  }
})

// I would rather write something like
React.useEffect(() => {
  if (!foo){
    // exit early and stop executing the rest of the useEffect hook
  }

  // do something
})

我怎样才能做到这一点？在我的第一个示例中，复杂的条件逻辑很快就会让事情变得一团糟，尤其是考虑到我不能在条件语句中使用useEffect。

【问题讨论】：

就像提到的那样，在任何 JS 函数中都可以使用 return。但首先考虑一下为什么需要这种情况可能是一个想法。有时最好将组件拆分得更多。例如，假设我们有一个名为MultiEdit 的组件，我们想要做的是有一个名为editType 的属性，这将呈现两种不同样式的控件，因此它可能需要不同的useEffect 语义，而不是使用if (!style1) return等，你可以只创建2个子组件，比如EditStyle1和EditStyle2等。然后你可以有条件地渲染这些。

标签： reactjs react-hooks

【解决方案1】：

与任何函数一样，它可以使用return 关键字提前退出。

这两个sn-ps是等价的：

React.useEffect(() => {
  if (foo){
    // do something
  }
})


React.useEffect(() => {
  if (!foo){
    return;
  }

  // do something
})

【讨论】：

哦，所以只有当我返回像 return () => /* cleanup */ 这样的函数时才会触发清理？
没错。 return;、return undefined; 和没有回报在 JS 中完全可以互换。