时间戳

首页 > 解决方案 > 在 React 中使用普通 const 而不是 useState 的含义

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

问题描述

我想知道是否有人可以向我解释 React 组件中这两种状态用法之间的区别。在这个简单的用例中使用 useState 有什么明确的优势吗？

function userProfile({user}){
  const username = user.name;

  return (
    <h1>{username}</h1>
  )
}

和

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

  return (
    <h1>{username}</h1>
  )
}

标签： javascriptreactjsreact-hooksuse-state

解决方案

当您使用 useState 钩子时，您将第一个 const 变量初始化为该组件的“一块”状态，允许在每次更改该状态时重新渲染组件，在这种情况下使用 setUsername 函数。因此，基本上在第一种情况下，即使您使用 let 声明变量然后重新评估它，也不会触发重新渲染（并且显示的 ui 不会更新其内容），但在第二种情况下，您准备 React 以在每次 setUsername 获取时重新渲染称为更新 ui 内容。

推荐阅读