使用其他钩子时是否可靠?

Question

React Hooks 文档建议使用 refs 来访问状态/props 的先前值，甚至将其抽象为usePrevious自定义钩子。

文档中的示例(使用按钮修改(：

function Counter() {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return <div>
<h1>Now: {count}, before: {prevCount}</h1>
<button onClick={() => setCount(c => c + 1)}>Add</button>
</div>
}
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}

我正在玩 Counter 示例，并注意到如果您使用另一个不相关的钩子进行更新，它会中断。

export default function Counter() {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
const [color, setColor] = useState("black");
useEffect(() => {
// This breaks the prev count counter: when displayed on screen, previous = count
setColor(count % 2 ? "red" : "blue");
}, [count]);
return (
<div>
<h1>Now: {count}, before: {prevCount}</h1>
<button style={{ color }} onClick={() => setCount(c => c + 1)}>
Add
</button>
</div>
);
}
...

这似乎是由导致此问题的状态更新触发的重新渲染，因为该示例在设置为常量值时按预期工作：

...
useEffect(() => {
// This works: When displayed, previous = count - 1
setColor("black");
}, [count]);
...

所以我的问题是：

1. 为什么添加状态更新会导致此示例中断？
2. 如果不相关的钩子导致它们更新，usePrevious/refs 是一个可靠的解决方案吗？

代码沙盒链接

Answer 1

上一个值是上次渲染的值计数，而不是其以前的值(如果有意义(。

由于当颜色更改时，渲染之间的计数不会更改，因此计数等于该渲染的 previousCount。

而是使用另一个 useState 来跟踪 lastCount，并在调用 setCount 时更新它。

const [lastCount, setLastCount] = useState(0);
<button style={{ color }} onClick={() => {
let currentCount;
setCount(c => {currentCount = c; return c + 1;});
setLastCount(currentCount);
}
}>
Add
</button>

在您的示例中，上一个值的有用性在于，如果您询问"此渲染是由计数更新引起的吗？如果 count 等于 previousCount，那么答案是否定的。