ReactJS - 使用 useRef 和将变量放在组件外部有什么区别？

Question

这段代码有什么区别：

function MyComponent(){
    const isPersistent = useRef(true)
    // some more code...
}

和这段代码：

let isPersistent = true
function MyComponent(){
    // some more code...
}

我知道我通常会为这些放置 useRef 。我实际上永远不会这样做，我只是想知道为什么。这些有什么区别？我知道我还可以使用 useRef 来放置 HTML 元素。但如果情况并非如此，为什么第二个不是好的做法呢？

Answer 1

第二种方式的值适用于

MyComponent

的所有实例，而第一种方式的值对于每个

MyComponent

实例可以是唯一的。

此外，在第二种情况下更改

isPersistent

可能不会触发重新渲染。