为什么在 useState 挂钩中使用 const 时不显示错误

Question

This is my complete React js code. I am using const in "const [name, setName] =useState('Micheal');". It is not showing error, when I am changing name using setName function. Since const in javascript means, it cannot be unchanged, why it is not showing any error

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'));

Answer 1

const means that the identifier can't be reassigned. (Not to be confused with immutable values. Unlike true immutable datatypes such as those produced by Immutable.js and Mori, a const object can have properties mutated.)

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

For example:

 const obj1 = {}; obj1.a = '12345' console.log(obj1)

Answer 2

Check out this example from the React docs: https://reactjs.org/docs/hooks-state.html#recap

Specifically, this line: 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. 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.

Every time you call setId, for example, useState will return a new value for id, and re-render your component. It is not simply assigning a variable - useState has side effects, and does more than just assign a value.

This is not in violation of the use of const , because useState is technically returning a newly initialized value and re-rendering with that value. It is not double assigning, renaming or anything like that.

Lastly, const also prevents you from mistakenly re-assigning the useState variables within your component.

Answer 3

setState is API hook of React that we call it this way: const [name, setName] =useState('Micheal');

and this is destructuring assignment, name is a constant referencing to object behind state called Micheal by you and setName is a function to notice to React state that the Micheal will have change and the Micheal will have new value after that, this way the whole component will rerender again...