Когда использовать простое состояние над конструктором (реквизит)?

#javascript #reactjs

Вопрос:

Я знаю, что у них есть несколько похожих вопросов, подобных этому, однако я все еще в замешательстве по поводу следующего.

Когда использовать такое состояние

 Class Example extends Component {
  state = {
    name: ''
  }

 }

Над реквизитом конструктора

 Class Example extends Component{ 

  constructor(props) {
    super(props);

    this.state = {
      name: ''
    }
  }
}

Имеет ли это какое-то отношение к привязке метода? потому что я могу использовать onChange нормально, не связывая его таким образом:

 this.onChange = this.onChange.bind(this)

Я все еще могу вызвать onChange, например

 onChange = (e) => {

}

<Component onChange = {this.onChange} />

1. стрелка выполняет автоматическую привязку. вот почему вам не требуется привязка.

2. итак, в двух словах, мне не нужно было бы использовать this.onChange = this.onChange.bind(this) , потому что у меня есть функции со стрелками, которые уже связывают его правильно?

3. Правильно. Вот отличная статья: daveceddia.com/where-initialize-state-react

4. хорошо, спасибо, что прояснили это.

Ответ №1:

Разница в ваших примерах чисто синтаксическая, а не функциональная. Вы можете использовать их оба с одинаковым эффектом.

Обычно вы назначаете состояние в функции конструктора, когда хотите вычислить состояние на основе некоторой логики выполнения (например, на основе переданных реквизитов). В этом случае вы напишете это так:

 class Example extends Component {
  constructor(props) {
    this.state = {
      fullName: props.firstName   ' '   props.lastName
    }
  }
}

1. допустим, если бы я хотел получить доступ к this.props — понадобился бы мне constructor(props)super(props) в этом случае?

2. я думаю, мой главный вопрос в том, когда это будет обязательно использовать constructor(props)super(props)

3. React ‘monkey исправляет’ реквизит, поэтому, даже если вы не использовали конструктор, у вас все равно будет доступ к нему… @randal

Ответ №2:

в новой версии react вы можете инициализировать состояние напрямую, не используя это

 constructor(Props){
super(props)
this.state ={
}
}

оба они верны. вы можете использовать любой из них.

я выберу первый, потому что это меньше кода

и для любого метода вы можете напрямую использовать их, например

   onChange = (e) => {

    }

<Component onChange = {this.onChange} />

в новых версиях react нет необходимости привязывать метод