Разница между ES5 и ES6 конструкторами в React.js - PullRequest
Новая
       9

Разница между ES5 и ES6 конструкторами в React.js

0 голосов
/ 06 октября 2018

В исходном коде React функция-прототип имеет подпись с тремя параметрами:

function Component(props, context, updater) {

Но каждый раз, когда я вижу, что кто-то расширяет React.Component с помощью современных функций ES6, они объявляют конструктортолько с props следующим образом:

constructor(props)

В чем разница между функцией-прототипом и литералом constructor?И куда идут остальные два аргумента?

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

Очевидно, что вы можете использовать все три параметра, представленные в Компоненте.Но в целом, только в расширенном случае мы используем props, а не каждый раз.Точно так же вы можете использовать другие.

Вот пример с context api:

Компонент класса ES6 

class ContextConsumer extends React.Component {
  /* 
     contexTypes is a required static property to declare 
     what you want from the context
  */
  static contextTypes = {
      currentUser: React.PropTypes.object
  };
  render() {
    const {currentUser} = this.context;
    return <div>{currentUser.name}</div>;
  }
}

Компонент класса ES6 с перезаписанным конструктором 

class ContextConsumer extends React.Component {
  static contextTypes = {
      currentUser: React.PropTypes.object
  };
  constructor(props, context) {
    super(props, context);
    ...
  }
  render() {
    const {currentUser} = this.context;
    return <div>{currentUser.name}</div>;
  }
}

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

Другой параметр - updater, который вы, возможно, использовали this.forceUpdate(), и при этом вызывайте средство обновления.Но факт, мы не используем updater напрямую в обычном случае.Впрочем, я не сталкивался с таким случаем использовать обновитель внутри конструктора.Возможно, вам удастся выяснить, если вы столкнулись с каким-то сложным случаем.

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

Хорошо, позвольте мне объяснить это немного с помощью кода реакции: 

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

The *Функция 1035 * имеет 3 аргумента, которые используются внутри функции.Позже определяется его прототип forceUpdate, для которого updater перехватывается, чтобы поставить в очередь forceUpdate с enqueueForceUpdate.Таким образом, this.forceUpdate фактически вызывает средство обновления Component и позволяет нам повторно визуализировать компонент.Надеюсь, теперь имеет смысл взглянуть на его метод-прототип.

В чем разница между функцией-прототипом и литералом конструктора?

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

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

0 голосов
/ 06 октября 2018

Итак, Es6 добавил ключевое слово class вместе с конструктором для него.Это, однако, просто синтаксический сахар, и он по-прежнему основан на прототипе модели, как и раньше.Я не знаю о двух других аргументах, но думаю, что это связано с функцией, создающей свою собственную лексическую область видимости.

...