Почему он не показывает ошибку при использовании const в useState hook

#javascript #reactjs

Вопрос:

Это мой полный js-код React. Я использую const в «const [name, setName] =useState(‘Micheal’);». Он не показывает ошибку, когда я меняю имя с помощью функции setName. Поскольку const в javascript означает, что он не может быть неизменным, почему он не показывает никаких ошибок

 import React,{useState} from "react"
import ReactDOM from 'react-dom'
function Emp(){
  const [name,setName]=useState("Micheal");
  const [id,setId]=useState(1024);
  const [age,setAge]=useState(23);
  const handleClick=()=>{
    setName("Jackson");
    setId(2021);
    setAge(29);
  }
  return (
    <>
    <h1>Emp Details</h1>
    <h1>your name: {name}</h1>
    <h1>your id: {id}</h1>
    <h1>your age: {age}</h1>
    <button type="button" onClick={handleClick}>Click Here</button>
    </>
  );
}
ReactDOM.render(<Emp/>,document.getElementById('root'));

1. Причина Emp вызывается несколько раз, и каждый раз переменные могут содержать разные значения. Они просто не могут быть изменены «внутри одного вызова функции»

2. @JonasWilms но мы вызываем компонент Emp только один раз в ReactDOM.render

3. Нет. <Emp/> это не вызов. Он передает функцию (и реквизит) в библиотеку React , и она может вызывать ее так часто, как захочет.

4. на самом деле это не то, что const означает. это делается для того, чтобы вы не переназначали фактические переменные, такие как const x = 3; x = 4 ; <—, которые выдадут

Ответ №1:

const означает, что идентификатор не может быть переназначен. (Не путать с неизменяемыми значениями. В отличие от истинных неизменяемых типов данных, таких как те, которые создаются Immutable.js и Мори, у const объекта могут быть измененные свойства.)

Из: https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75

Например:

 const obj1 = {};
obj1.a = '12345'

console.log(obj1)

Развернуть фрагмент

Ответ №2:

Ознакомьтесь с этим примером из документации React: https://reactjs.org/docs/hooks-state.html#recap

В частности, эта строка: Line 9: When the user clicks, we call setCount with a new value. React will then re-render the Example component, passing the new count value to it.

Например, каждый раз, когда вы вызываете setId , useState возвращает новое значение для id и повторно отображает ваш компонент. Это не просто присвоение переменной — useState имеет побочные эффекты и делает больше, чем просто присваивает значение.

Это не нарушает использование const , потому что useState технически возвращает новое инициализированное значение и повторно отображает с этим значением. Это не двойное назначение, переименование или что-то в этом роде.

Наконец, const также предотвращает ошибочное переназначение переменных useState в вашем компоненте.

1. это должно быть принятым ответом. Эта часть повторного рендеринга означает, что React не переназначается, поэтому const будет оставаться постоянным до тех пор, пока состояние не будет изменено методом set .

Ответ №3:

setState является ли API-хук React тем, что мы называем это так: const [name, setName] =useState('Micheal');

и это деструктурирующее присвоение, name — это постоянная ссылка на объект, находящийся за вызванным Micheal вами состоянием, и setName это функция, которая уведомляет реагирующее состояние Micheal о том, что оно изменится и Micheal после этого будет иметь новое значение, таким образом, весь компонент будет повторно отображен…