useRef将为 组件分配一个引用，而在函数组件外部定义的变量将仅被调用一次。
此外，尝试呈现countCache值将行不通：
let countCache = 0;
function Counter() {
...
countCache = 0;
useEffect(() => {
countCache = count;
});
...
return <div>{countCache}</div>
}
由于使用了javascript闭包，因此参考可以按方面使用。
在下一个示例中，单击按钮时，您可能会注意到variable两个组件都是全局的，而reference总是按预期更新。
// defined a variable outside function component
let countCache = 0;
function Counter() {
const [count, setCount] = useState(0);
const countRef = useRef(count);
useEffect(() => {
// Update count on every render
countCache = count;
countRef.current = count;
});
return (
<div>
<button onClick={() => setCount(p => p + 1)}>click me</button>
<h3>variable</h3>
{countCache}
<h3>reference</h3>
{countRef.current}
</div>
);
}
export default function App() {
return (
<Flex@R_838_2419@>
<Flex@R_838_2419@>
<Counter />
</Flex@R_838_2419@>
<Flex@R_838_2419@>
<Counter />
</Flex@R_838_2419@>
</Flex@R_838_2419@>
);
}
602392714
清零编程群