Почему некоторые разработчики используют конструктор и супер в своем классе в React.js?

Question

Я всегда использую это выражение в своих компонентах:

class Cart extends Component { }

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

class Cart extends React.Component {
  constructor(props) {
    super(props);
  }
}

Почему это так?Какова цель использования конструктора и супер?Является ли React.Component и Component одинаковыми?Почему мы передаем реквизиты в конструктор и супер?Я не спрашиваю, что такое super и constructor, я спрашиваю разницу между двумя кодами выше и преимуществами использования каждого из них?

Я проверил онлайн, но не увидел никакого объяснения, только примеры кода.

Answer 1

Дэн Абрамов упоминает в своем блоге , что:

Вы не можете использовать this в конструкторе, пока не вызовете родительский конструктор.JavaScript не позволит вам.

JavaScript обеспечивает, что если вы хотите использовать this в конструкторе, вы должны сначала вызвать super.

, позвонив super(props)необходим для доступа к this.props.

, как указано в этом потоке , есть две основные причины использовать конструктор в компоненте реакции:

1. Инициализация локального состояния путем присвоения объекта this.state.
2. Привязка методов-обработчиков событий к экземпляру.Если вы не инициализируете состояние и не связываете методы, вам не нужно реализовывать конструктор для вашего компонента React.

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

Answer 2

Скопировано с сайта ReactionJS.

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

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

Как правило, в React конструкторы используются только для двух целей:

Initializing local state by assigning an object to this.state.
Binding event handler methods to an instance.

Вы не должны вызывать setState () в конструкторе (). Вместо этого, если ваш компонент должен использовать локальное состояние, назначить начальное состояние this.state прямо в конструкторе:

Конструктор - единственное место, где вы должны назначить this.state непосредственно. Во всех других методах вам нужно использовать this.setState () вместо этого.

Избегайте введения каких-либо побочных эффектов или подписок в конструктор. В этих случаях используйте вместо него componentDidMount ().

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

А вот и цель супер (),

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

Я пытался с Babel, вот что я получаю.

С помощью конструктора я получаю эту функцию,

class App extends React.Component{
    constructor(props){
     this.state = {}
    }
}

Связанная часть в ES5,

var App =
/*#__PURE__*/
function (_React$Component) {
  _inherits(App, _React$Component);

  function App(props) {
    var _this;

    _classCallCheck(this, App);

    _this.state = {};
    return _possibleConstructorReturn(_this);
  }

  return App;
}(React.Component);

без конструктора

class App extends React.Component{
    state = {}
}

Код ES5

var App =
/*#__PURE__*/
function (_React$Component) {
  _inherits(App, _React$Component);

  function App() {
    var _getPrototypeOf2;

    var _temp, _this;

    _classCallCheck(this, App);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(App)).call.apply(_getPrototypeOf2, [this].concat(args))), _this.state = {}, _temp));
  }

  return App;
}(React.Component);

Answer 3

Конструкторы и супер не реагируют специфически или даже специфично для javascript. Они специфичны для наследования в ООП .

Конструкторы

Конструкторы - это то, что можно назвать инициализирующими функциями в классе. Давайте посмотрим на пример, где можно использовать конструктор.

class parentClass {
 constructor(){
   this.foo = foo;
   this.bar = bar;
}

function sharedMethod1(){
    print(this.foo);
}

function sharedMethod(){
    print(this.bar)
}
}

object1 = new ParentClass(foo1, bar1);

object1.sharedMethod1() // this will print foo1;
object1.sharedMethod2() // this will print bar1;

object2 = new ParentClass(foo2, bar2);
object2.sharedMethod1() // this will print foo2;
object2.sharedMethod2() // this will print bar2;

когда необходимо создать несколько экземпляров класса с разными значениями для переменных / функций-членов, мы используем функции конструктора.

Супер

Ключевое слово super также используется в наследовании. При наследовании при расширении дочернего класса от родительского класса необходимо инициализировать конструктор родительского класса. Ключевое слово super используется для этой цели. давайте посмотрим на приведенный ниже пример для супер.

class ParentClass (){
constructor(){
this.foo = foo;
}
} 

class childClass extends ParentClass(){
super(foo1); // super is used here initialize the constructor of the ParentClass
} 

Тот же принцип, упомянутый выше, также применяется в React. Пожалуйста, загляните в блог Дана Абрамова о конструкторе и супер здесь https://overreacted.io/why-do-we-write-super-props/

Answer 4

Почему это?Какова цель использования конструктора и супер?

Конструкторы и ключевое слово super не являются специфичными для реакции, но специфичными для JavaScript.Поиск наследования и «ООП» в JavaScript, чтобы лучше понять его (например, эта средняя статья ).super и наследование также не только связано с JavaScript, многие другие языки также используют его и объясняют его соответствующим образом, например, здесь является хорошим объяснением того, как ключевое слово super должно использоваться в Java.

Почему мы передаем реквизиты в конструктор и супер?

Проверка Почему мы пишем супер (реквизиты)? .

Являются ли React.Component и Component одинаковыми?

Да.В заголовочном разделе файлов находится куча import ... -общений.Для React.Component вы найдете что-то вроде import * as React from "react" или import React from "react".В случае Component вы найдете import { Component } from "react". Проверьте документацию import от MDN для получения дополнительной информации.

Я спрашиваю разницу между двумя кодами выше и преимуществами использования каждого из них?

Нет разницы в результате.Обе версии работают одинаково, и нет заметной разницы в производительности.Одна версия короче и менее шумная.Если у вас нет дальнейших инструкций в конструкторе, я бы рекомендовал отключить его.

Answer 5

Почему некоторые разработчики используют constructor и super в своем классе?

https://www.reactnative.guide/6-conventions-and-code-style/6.4-es7-features.html

Единственное отличие состоит в том, что один написан на ES6, а другой на ES7. Оба они верны, но в ES7 нам не нужно использовать конструктор и супер, который намного короче и проще для чтения. Однако некоторые люди не знают об этом, или они просто делают это по-старому, как ES6, или коды просто устарели. Я рекомендую использовать новый ES7

UPDATE

Копая больше об этом вопросе и спрашивая других, я нашел это

Возможность определять свойства класса непосредственно в классе вместо написания конструктора, а также возможность писать функции как свойства внутри класса вместо методов являются частью предложения полей класса TC39 (https://github.com/tc39/proposal-class-fields), которое в стадии 3 (из 4) с 2017 года. На связанной официальной странице вы можете прочитать:

"Это предложение достигло Стадии 3 в июле 2017 года. С тех пор было много размышлений и продолжительных дискуссий о различных альтернативах, включая:

JS Классы 1.1

Пересмотр "статического частного"

Дополнительное использование частного ключевого слова

Частные символы

При рассмотрении каждого предложения делегаты TC39 тщательно изучили мотивацию, отзывы разработчиков JS и последствия для будущего языкового дизайна. В конце концов, этот мыслительный процесс и постоянное участие сообщества привели к обновленному консенсусу по предложению в этом хранилище. Исходя из этого консенсуса, реализации этого предложения продвигаются вперед. "

Не знаю, станет ли он частью ES10 (EcmaScript 2019), который выйдет в июле.

Но для React это не имеет значения, поскольку код в любом случае компилируется, и в TypeScript (используется в Angular) обе упомянутые функции уже доступны.

Вся благодарность за эту информацию Jost S ...