在 React 中如何有条件地使用 hooks？

Question

我有两个钩子。一个叫useLocalStorage，另一个叫useQuery。基于输入道具，我想有条件地使用其中之一。

我简单写一下可以吗const [value, setValue] = localStorage ? useLocalStorage() : useQuery()？

Answer 1

你永远不应该有条件地调用钩子。这是因为每次渲染组件时都需要以相同的顺序调用相同的钩子。请参阅Hook 规则。

根据您的用例，您可以考虑每次渲染挂钩，但在其输出中添加一个条件。

const localStorageOutput = useLocalStorage();
const queryOutput = useQuery();
const [value, setValue] = localStorage ? localStorageOutput : queryOutput;

这可能会产生意想不到的副作用，特别是当你的 prop 值发生localStorage变化时。