Question

我通过了解用于管理组件状态的 useState 钩子开始了 React。但是，我最近发现可以使用状态对象来代替。我很困惑，似乎无法在互联网上找到很多参考资料来帮助我理解其中的区别。

以下有什么区别，如果有的话...如果有的话，哪个更受欢迎？

选项 1：State 对象：

class User extends React.component {

  state = {
    username: 'Tyler'
  }

选项 2：useState 钩子：

class User extends React.component {

  const [state, setState] = useState({
        username: 'Tyler'
  })

Answer 1

所以，这里有一些误解。

State 对象，或者当 React 使用类时使用 this.state。

这种方法有一些缺点。 React 需要给对象添加很多东西（当类被初始化时）以使其兼容 React。

因此，从 React 16 左右开始，它增加了使用函数作为应用程序构建块的能力。旧方法（使用类）仍然有效，但不鼓励。到目前为止，类确实有一些额外的功能 (https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes)。错误边界 (https://reactjs.org/docs/error-boundaries.html) 就是这样一件事。

在 16 之前，函数可以用作组件，但没有状态。使用 Hooks，函数也可以有状态。

这在使用方面确实存在一些限制和操作方法 (https://reactjs.org/docs/hooks-rules.html)

关于 hooks 的最佳资源是关于该主题的 react 文档。

最后，可能是最重要的优点是代码更干净。

附言第二个例子不起作用，useState 必须在函数 defn 内。

// Option 2: useState 
function User() {
  const [state, setState] = useState({
    username: 'Tyler'
  })
}

Answer 2

useState 是 React (16.8+) 中一个全新概念的一部分，称为钩子。 Hook 是一种更高效、更简单的 React 编写方式。

Hook 解决痛点：

<块引用>