React:useEffect中更新的非状态变量显示旧值

Question

useeffect钩子显示我试图访问的非状态变量的旧值。就在调用状态变量集方法之前，正在更新非状态变量的值。我在这里做错了什么？

function Clock(){
const [count, setCount] = React.useState(0);
let custom = 1;
const clickHandler = () => {
custom = 0;
setCount(1);
}
React.useEffect(()=>{
alert(custom);
})
return (<div>
<button onClick={clickHandler}>Click Me</button>
</div>);
}
function tick() {
ReactDOM.render(
<Clock/>,
document.getElementById('root')
);
}
tick();

警报仍然打印变量custom的旧值为什么useEffect无法获取变量的最新值？

Answer 1

每次重新呈现组件时，都会创建在状态之外声明的所有变量。如果你想保持这个值，你可以选择两种方式——将它们保持在state或ref(useRefhook(中。规则很简单——如果更改应该导致重新渲染——那么您的选项是state。如果没有(例如，你想知道一个按钮被点击了多少次(，useRef是你最好的朋友。

function Clock(){
const [count, setCount] = React.useState(0);
const custom = useRef(1);
const clickHandler = () => {
custom.current = 0;
setCount(1);
}
React.useEffect(()=>{
alert(custom.current);
})
return (<div>
<button onClick={clickHandler}>Click Me</button>
</div>);
}

Answer 2

1. 您的useEffect需要了解count何时发生变化。

2. 您的单击处理程序只是不断将状态设置为1。

3. 您不会对custom变量执行任何操作。

const { useState, useEffect } = React;
function Clock(){
const [count, setCount] = React.useState(0);
// Increment the count state
function clickHandler() {
const newState = count === 1 ? 0 : 1;
setCount(newState);
}
// The effect checks to see if `count` has changed
// and logs (alerts) it
useEffect(() => {
console.log(count);
}, [count]);
return (
<div>
<button onClick={clickHandler}>Click Me</button>
</div>
);
}
// Render it
ReactDOM.render(
<Clock />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>