为什么useEffect()在这个简单的反例中不起作用

Question

这是我的代码：

import { useState, useEffect } from 'react';
export default function CompA() {
const [counter, setCounter] = useState(0);
const increment = () => {
setCounter(counter + 1);
};
const isEven = useEffect(() => {
return counter % 2 === 0;
}, [counter]);
return (
<div>
<button onClick={increment}> Counter {counter}</button>
<h2>{isEven ? 'Even' : 'Odd'}</h2>
</div>
);
}

根据我有限的知识，useEffect挂钩带有依赖项，运行了好几次。首先是在初始渲染中，然后是当依赖数组中的计数器状态发生变化时。随着状态值的每一次更改，useEffect都会重新呈现整个组件，这样我们就可以直观地看到更改。

在这个简单的例子中，在初始渲染中，useEffect应该返回True或False，然后根据这个值，h2标记中的三元运算符应该相应地显示这个值。

问题是，当我运行代码时，h2标记仍然等于ODD，即使我的初始计数器状态是0。此外，按下该按钮将更改计数器的值，useEffect应执行并触发重新渲染。

然而，这些都不起作用！为什么？我做错什么了吗？

Answer 1

useEffect不返回任何内容，对您尝试执行的操作没有用处。由于useEffect不返回任何信息，因此isEven是undefined，这将导致显示"奇"；。

我只想写一个这样的内联计算：

const isEven = counter % 2 === 0;

useEffect不需要引起组件渲染，这就是调用setCounter的目的。当组件重新发送时，这一行将根据计数器的最新值计算isEven。如果计算非常昂贵(事实并非如此(，并且您希望在没有任何变化的情况下跳过计算来提高性能，则可以使用useMemo:

const isEven = useMemo(() => {
return counter % 2 === 0;
}, [counter])

不过，对于像您正在进行的计算这样轻量级的计算来说，这并不是必要的。

Answer 2

您不应该像使用返回值一样使用useEffect。它返回一个空白。您可以看到useEffect的字体规范。

useEffect(effect: React.EffectCallback, deps?: React.DependencyList): void

当您单击用于调用增量处理程序的按钮时，组件计数器的本地状态将更新。你可以有

const isEven = !(counter % 2)

并将其用作

<h2>{isEven ? 'Even' : 'Odd'}</h2>