Question

我正在使用位于HelloWorld文件中的称为HelloWorld.js的功能组件。假设我想跟踪鼠标位置，而无需再次触发渲染。

作为初学者，我知道两个选择：

let mousePosition = null;

const HelloWorld = () => {
  // ...
  mousePosition = aNewPosition;

  const handlerReadingPosition = () => {
    console.log(mousePosition)
  }
}

和

const HelloWorld = () => {
  const mousePositionRef = useRef(null);
  // ...
  mousePositionRef.current = aNewPosition;

  const handlerReadingPosition = () => {
    console.log(mousePositionRef.current)
  }
}

这两个代码块等效吗？如果我在HelloWorld中声明一个变量，它将在每次渲染时被擦除，因此useRef。

在HelloWorld内部而不是之前声明变量的“规则”吗？

Answer 1

您可以将ref视为类的实例变量。

当您渲染了组件的多个实例时，全局方法将中断。

Answer 2

我正在创建一个javascript文件。我想将值存储在变量中，并且该变量必须在其他许多函数中使用。

例如：我有一个输入字段。因此，最初输入标签为空。在我的JavaScript文件中，我有一个声明为userName的变量。借助键向上功能，我可以在每次击键时从输入字段中获取值，并将其分配给变量。

现在，由于其他原因，还有另一个函数使用我的名字。现在，由于userName是全局声明的，因此我可以在任何地方使用它。

var userName                                            //This is the global variable
$('#userNameDiv').on('keyup',function(){               //Jquery method
   userName = $('#userName').val()                     //The variable is referenced here
   let temp_userName = $('#userName').val()            //Local variable as it is defined within a block and has let key word
})

function(){
   console.log(userName)                              //Since userName is globally declared it will be console logged.
   console.log(temp_userName)                         //will be undefined as it is a local variable
}

ref和全局变量之间有什么区别？

2 个答案: