В чем разница между ссылкой и глобальной переменной?

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
}