React.js state object 与 useState 挂钩？

Question

I started React by learning about the useState hook to manage component states. However, I have recently discovered that it is possible to use a state object instead. I'm confused, and can't seem to find many references on the internet to help me understand the difference.

What are the differences, if any between the following... And which one is preferred, if at all?

Option 1 : State object:

class User extends React.component {

  state = {
    username: 'Tyler'
  }

Option 2 : useState hook:

class User extends React.component {

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

Answer 1

So, there is a bit of misunderstanding here.

State Object, or this.state was used when React used classes.

This approach had some downsides. React needed to add a lot stuff to the object(when class is initialized) to make it compatible to react.

Hence since React 16 or so, it added the ability to using functions as building blocks for the application. The older approach(using classes) stil works, but not encouraged. Classes does have some additional functionality as of this moment ( https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes ). Error Boundary ( https://reactjs.org/docs/error-boundaries.html ) is one such thing.

Before 16, functions could be used as components, but didn't have state. With Hooks, the functions could have state as well.

This does come with some restrictions and how-tos in regards to usage( https://reactjs.org/docs/hooks-rules.html )

The best resource on hooks is the docs from react on the subject.

The last, probably most important pro is that the code is cleaner.

PS the second example won't work, useState has to be within a function defn.

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

Answer 2

useState is part of a whole new concept in React (16.8+), that's called hooks. Hooks are a more efficient and simple way to write in React.

Hooks solve pain points:

1. Managing State: Reusing logic between multiple components can lead to wrapper hell or deeply nested components.

2. Side Effects: Unrelated mixed in logic in lifecycle methods can get repetitive, and cause unnecessary side effects.

3. Optimization: Hooks might reduce your bundle size.

Please read all in here: https://medium.com/better-programming/react-hooks-vs-classes-add2676a32f2