useRef 与常规变量

Question

我对 useRef 挂钩和组件内的普通变量之间的差异感到困惑。

我是对的吗，每个组件都会渲染，普通变量也会重新渲染并保留其值，但 useRef 只是保留该值并且不会重新渲染？

如果是这样，您会推荐两者之间的什么？

Answer 1

这是一个用于模拟的沙箱！

假设

let a = 0;
const ref = useRef(0);
const [state,setState] = useState(0);

现在假设您使用 2 个具有这些点击功能的按钮

const firstClick = () => {
 a = 2;
 ref.current = 2;
}

const secondClick = () => {
 setState(2);
}

第一次单击将修改引用和变量。

第二次单击将由于状态更改而导致重新渲染。

但是，如果您在 div 或文本中同时打印 ref 和变量，那么您将看到只有 ref 仍然保留其值，因为 React 函数在其变量上形成了闭包。

无论何时您需要操纵 Dom 或存储状态而不需要在更改时重新渲染，ref 都是您的首选。如果你正在进行逻辑计算，那么就选择变量

Answer 2

使用声明的变量useRef不会包含在反应生命周期中，这意味着如果任何状态更新使用定义的值都useRef不会改变，这就是优点。而没有使用声明的变量useRef会在组件重新渲染时重新声明。

还有一种替代方法可以解决这个问题，因为这会污染全局空间，可能会导致意想不到的事情。该方法是在组件外部声明变量。