useRef和普通变量之间的区别

Question

我想知道这两个代码之间的区别

1：

import React from "react";
import ReactDOM from "react-dom";


function App() {
  const myref = React.useRef(0);

2：

import React from "react";
import ReactDOM from "react-dom";

const myref = 0;
function App() {

现在我可以随时更改两个值，并且两个都保留在dom中。它们在用法上有什么区别。

Answer 1

我认为区别在于组件的包装和出口。假设您从文件中导入了App，这并不意味着整个文件都被导出，这是一个模块，只有导出的App组件才被导出。因此，当您使用ref时，您可以访问持久变量而不会超出组件范围，因此在导出时仍可以使用它。

您又如何区分App组件的多个实例，这些实例可能需要具有相同变量的不同值？ useRef()自动区分这些。

Answer 2

React.useRef(0)是组件生命周期的一部分。如果在应用程序中渲染两个不同的App，则这两个ref不会发生冲突。如果您引用相同的共享和可变变量，它们将与第二个示例一样。您将遇到一种情况，其中App的一个实例将对App的第二个实例产生意想不到的副作用。

Answer 3

  

useRef（）返回具有可变当前属性的普通对象，   在渲染之间共享。

值得一提的是useRef正在创建普通的javascript对象。