如果（条件）在反应挂钩调用？

Question

在条件内使用React钩子调用是否错误？

我知道在条件块内使用是错误的，因为它会弄乱调用的顺序，而lint会警告我。

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内调用钩子是没有意义的，但是在这种情况下，确实如此，因为这基本上是一个辅助函数，可能知道一些{{1} }。

问题

是否违反了任何规则？可以吗？在Context内是否算在顶层？

Answer 1

第二个代码段遵循钩子规则。它将始终始终完全相同地调用该挂钩。就我个人而言，我会把它放在if语句之前只是为了使它更清楚，但这不是绝对必要的。

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

Answer 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");
}

Answer 3

可能最好的方法是将钩子分配给变量。

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

if (routeMatch) {
   // do something
}