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

【问题标题】：Implications of using a normal const instead of useState in React在 React 中使用普通 const 而不是 useState 的含义
【发布时间】：2021-03-18 15:47:04
【问题描述】：

我想知道是否有人可以向我解释 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>
  )
}

【问题讨论】：

不，拥有不变的状态或拥有可以直接从其他状态或道具计算的状态是没有意义的。在这种情况下，const username = user.name; 更有意义。
或者只是<h1>{user.name}</h1>就足够了。
这两个例子都有一个问题。你尝试将 props 存储在 state 中，这绝对是个坏主意，因为它会导致组件重新渲染不正确。

标签： javascript reactjs react-hooks use-state

【解决方案1】：

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

【讨论】：