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

Question

我有两个钩子。一个叫

useLocalStorage

，另一个叫

useQuery

。 基于输入道具，我想有条件地使用其中之一。

我只要写

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

就可以吗？

Answer 1

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

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

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

这可能会产生意想不到的副作用，尤其是当您的

localStorage

的 prop 值发生变化时。