使用 uselocation hook 有什么好处？useLocation 与全局位置

Question

你好，我正在寻找答案 uselocation 挂钩的意义是什么。我正在构建我的第一个 React 项目。我可以轻松到达全球位置对象并且工作正常。如果我使用这个钩子我能得到什么样的好处？

谢谢。

Answer 1

要更笼统地回答您的问题，您必须首先了解状态变量与实例变量，或自定义 React 挂钩与普通 JavaScript 函数等之间的差异。

\n

例子：

\n

const foo = "bar";\n// vs:\nconst [foo, setFoo] = useState("bar");\n

\n

import fooFunc from "./fooFunc";\nimport useFooFunc from "./useFooFunc";\n\nconst foo = fooFunc;\n// vs:\nconst foo = useFooFunc();\n

\n

第一个示例的区别在于，每次更新非状态变量 foo 时，React 都不会意识到更改，因此不会导致组件（使用 foo 变量的组件）重新渲染）。因此，如果您希望 React（React 的生命周期）捕获该更改，则必须使用状态变量。在codesandbox 上检查这个工作示例。

\n

作为一般规则（非技术性地讲）：与组件生命周期以某种方式相关的所有内容都必须用React 语言编写。

\n

同样关于第二个例子，本质上都是同一个故事。fooFunc 没有什么问题，只要你不需要在其中使用“React stuff”，例如，假设你想进行 API 调用，所以你需要使用 useEffect 钩子（否则事情将会脱离 React 的控制，并且会出现意外的行为），这就是为什么只要 fooFunc 是一个普通的 JavaScript 函数，React 就不允许你在其中使用 React hooks。React 的 Hooks 规则文档页面也提到了这一点：

\n

\n

不要\xe2\x80\x99t 从常规 JavaScript 函数调用 Hook。相反，您可以：

\n

\xe2\x9c\x85 从 React 函数组件调用 Hooks。

\n

\xe2\x9c\x85从自定义 Hooks 调用 Hooks。

\n

\n

不回你的问题了，我想你自己也能猜到答案。但我也会再解释一次。React Router 是一个使用 React 为 React 编写的库，因此为了仍然保持事情完全同步并在这些工具的控制下，您不必在此过程中输入外部人员。请记住，您可以使用全局位置对象，但根本不建议这样做（除非您确切知道自己在做什么）。

\n