在 React 中使用普通 const 而不是 useState 的含义

Question

I was wondering if someone could explain to me the difference between these two usages of state in a React component. Is there any definite advantage in using useState for this simple usecase?

 function userProfile({user}){ const username = user.name; return ( <h1>{username}</h1> ) }

and

 function userProfile({user}){ const [username, setUsername] = useState(); useEffect(() => { setUsername(user.name); }, [user]) return ( <h1>{username}</h1> ) }

Answer 1

When you use the useState hook you initialize the first const variable as a 'piece' of state of that component, allowing react to re-render the component on every change of that piece of state, using in this case the setUsername function. So basically in the first case no re-render fires (and the displayed ui does not update its content) even if you declare your variable with let and then reassing it, but in second case you prepare React to re-render every time setUsername gets called updating the ui contents.