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

Я понимаю концепцию конструкторов в языках ООП, таких как C++. Однако я не совсем уверен, когда использовать конструктор в REACT. Я понимаю, что JavaScript объектно-ориентирован, но я не уверен, что на самом деле "конструирует" конструктор.

При рендеринге дочернего компонента вам нужен конструктор в дочернем компоненте? Например:

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         items: [],
         error: null
      }
    }
    render () {
       return (
          <React.Fragment>
             <ChildComponent data={this.state.items}></ChildComponent>
          </React.Fragment>
       )
    }
}

Я буду сокращать пример для краткости. Но зачем вам конструктор? И вам нужен конструктор в дочернем компоненте для реквизита?

Возможно, мои знания ES6 не на высоте.


react-native reactjs javascript constructor es6-class
person WebDream    schedule 27.10.2018    source источник

Ответы (3)


arrow_upward
16
arrow_downward

Если вы не инициализируете состояние и не привязываете методы, вам не нужно реализовывать конструктор для вашего компонента React.

Конструктор компонента React вызывается до его монтирования. При реализации конструктора для подкласса React.Component вы должны вызывать super(props) перед любым другим оператором. В противном случае this.props будет неопределенным в конструкторе, что может привести к ошибкам.

Обычно в React конструкторы используются только для двух целей:

  • Инициализация локального состояния путем присвоения объекта this.state.
  • Привязка методов обработчика событий к экземпляру.

https://reactjs.org/docs/react-component.html#constructor

person wang    schedule 27.10.2018
comment
Но я могу инициализировать свое состояние без конструктора и использовать функции стрелок, поэтому мне не нужно связываться. Означает ли это, что конструктор вообще бесполезен? stackoverflow.com/questions/42993989/ - person rotimi-best; 24.08.2019

arrow_upward
8
arrow_downward

Функция-конструктор НЕ не требуется вообще.

Инициализация состояния может быть выполнена непосредственно в теле класса, а функция может быть назначена свойствам, как описано ниже.

Технически они известны как свойства класса. Вскоре они могут появиться в нативном javascript, но поскольку почти все мы используем транспилятор Babel для проектов React, мы можем использовать этот синтаксис

class Comp extends React.Component {
/* 
 * generally we do not need to put the props in state, but even if we need to.
 * then it is accessible in this.props as shown below 
**/
state={ first: 1, second: this.props.second } 

handler= (token) => {
 this.setState(prevState => ({first: prevState.first+1}));
}

render() {
 return <div onClick={this.handler}>{this.state.first} and {this.state.second } </div>
}
}

Подробнее о свойствах класса и удалении конструктора из компонента класса реакции читайте здесь. https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599

person Akshay Vijay Jain    schedule 27.07.2020
comment
Отличная ссылка!!!!!! - person David Alford; 10.04.2021

arrow_upward
0
arrow_downward

Ссылка в вашем примере, полезно использовать конструктор, когда вам нужно инициализировать свое состояние или связать некоторую функцию прослушивания событий

  1. <element onClick={this.handler} />
  2. this.handler = this.bind.handler(this); внутри конструктора
person Aldo Maria Landini    schedule 27.10.2018