ref 和全局變量有什么區別？

Question

我正在使用位於HelloWorld.js文件中的名為HelloWorld的功能組件。 假設我想在不再次觸發渲染的情況下跟蹤鼠標 position。

作為初學者，我知道兩種選擇：

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視為 class 的實例變量。

當您呈現組件的多個實例時，全局方法將中斷。

Answer 2

我正在創建一個 javascript 文件。 我想在一個變量中存儲一個值，這個變量必須在許多其他函數中使用。

例如：我有一個輸入字段。 所以最初輸入標簽是空的。 在我的 javascript 文件中，我有一個聲明為userName的變量。 使用 function 鍵，我在每次擊鍵時從輸入字段中獲取值並將其分配給變量。

現在還有另一個 function 出於其他原因使用我的名字。 現在，由於我的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
}