如果（条件）内部反应钩子调用？答案

【问题标题】：React hook call inside if (condition)?如果（条件）内部反应钩子调用？
【发布时间】：2020-08-20 12:01:28
【问题描述】：

在条件中使用 React 钩子调用是错误的吗？

我知道在条件块中使用它是错误的，因为它会打乱调用顺序，并且 linter 会警告我。

import {useRouteMatch} from 'react-router-dom';

if (condition) {
  useRouteMatch("/blog/:slug");   //  <---- THIS IS WRONG AND IT BREAKS HOOK's RULES
}

但这不会触发任何警告，而且似乎工作正常：

import {useRouteMatch} from 'react-router-dom';

if (useRouteMatch("/blog/:slug")) {
  console.log("something");
}

这不会触发任何警告并且运行良好。我知道大多数时候在condition 中调用钩子是没有意义的，但在这种情况下它确实如此，因为这基本上是一个辅助函数，可能知道一些Context。

问题

它违反了任何钩子的规则吗？可以吗？在if (condition) 内是否算作顶级？

【问题讨论】：

如果你需要它的状态或者根据状态做一些操作你不应该使用useEffect。您可以粘贴确切的代码和所需的行为吗？
在developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…（描述表达式）和reactjs.org/docs/hooks-rules.html（描述可能执行或可能不执行的任何语句）之间似乎不幸使用了condition这个词：标准中没有“条件”的定义？？？？
@Aprillion 这让我很困惑，我想。

标签： javascript reactjs react-router react-hooks react-router-dom

【解决方案1】：

第二个代码 sn-p 遵循钩子的规则。它总是以完全相同的次数调用钩子。就个人而言，我会将它放在 if 语句之前，以使其更清晰，但这并不是绝对必要的。

const match = useRouteMatch("/blog/:slug");
if (match) {
  console.log("something");
}

【讨论】：

@打字比我快！

【解决方案2】：

这段代码不违反钩子的规则，因为钩子总是以相同的顺序运行。钩子不是写在if条件内，而是基于useRouteMatch的返回值，我们正在执行if条件内的代码`

import {useRouteMatch} from 'react-router-dom';

if (useRouteMatch("/blog/:slug")) {
  console.log("something");
}

这段代码相当于：

import {useRouteMatch} from 'react-router-dom';

const isMatch = useRouteMatch("/blog/:slug");

if (isMatch) {
  console.log("something");
}

【讨论】：

【解决方案3】：

最好和更清楚的方法是将钩子分配给一个变量。

const routeMatch = useRouteMatch("/blog/:slug");

if (routeMatch) {
   // do something
}

【讨论】：