为什么 React hooks 可以有条件地使用并抛出错误？

Question

所以我们都知道我们不能像文档所说的那样将 React hooks 放在条件语句之后或之中。

function MyComponent(...) {
   if (condition) { 
      React.useState() // not allowed
   }
   return <div></div>;
}

function MyComponent(...) {
   if (condition) { 
      return null;
   }
   React.useState() // also not allowed
   return <div></div>;
}

使用 React hooks 的 eslint 插件，我们会收到构建错误，指出上述内容是不允许的。

但为什么插件没有响应这个

function MyComponent(...) {
   if (errorCondition) { 
      throw Error;
   }
   React.useState() // allowed???
   return <div></div>;
}

这是不允许的，并且插件没有更新来捕获这个吗？或者这实际上是允许的？文档似乎没有提到这一点

Answer 1

我认为更重要的问题可能是为什么组件会决定抛出这样的错误，而不是发出副作用来指示发生了错误并简单地返回 null。

正如您所展示的，有条件的提前返回会禁止使用 React hook。

function MyComponent(...) {
  if (condition) { 
    return null;
  }
  React.useState() // not allowed
  return <div></div>;
}

通过抛出错误，您将摆脱渲染的其余部分，因此之后是否可以调用 React hook 是一个有争议的问题。

function MyComponent(...) {
  if (errorCondition) { 
    throw Error;
  }
  React.useState() // allowed
  return <div></div>;
}

考虑这个例子：

function MyComponent(...) {
  try {
    if (condition) { 
      throw Error;
    }
    React.useState() // not allowed
  } catch {
    // caught
  }
  return <div></div>;
}

这也会产生来自 linter 的警告，因为您再次有条件地调用 React hook。

这是不允许的，并且插件没有更新来捕获这个吗？或者这实际上是允许的？

我不认为这是不允许的，但正如我上面所说，标记它似乎是不必要的，因为简单地抛出错误就会停止渲染组件的其余部分。我的猜测是，React 团队对此漠不关心，因为抛出这样的错误是极其罕见的，并希望某些父组件能够处理此异常，而不是仅在本地处理它并正常返回 null。