Поясните для чего super(props), а также .bind(this)?

Question

[jtag]

class ClickButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = {class: "off", label: "Нажми"};
                this.press = this.press.bind(this);
            }
        }

Answer 1

[Negwereth]

super() - вызов родительского класса на данном экземпляре, чтобы наследование сработало.
А bind в данном случае - от скудоумия разработчиков react которые не смогли в компоненты на классах. Привязка методов из прототипа к конкретному экземпляру.

Лично я это в самом темплейте через arrow function решал.

Comments

[Максим]

Negwereth они же сначали биндили (если использовать createReactClass), но потом отказались, аргументов точно не помню, но речь была о том (по-моему), что не всем это удобно (так как не в каждом методе компонента нужен this).

[Negwereth]

Максим: меня вот больше удивляет, почему они в обычные прототипы не смогли.

[alvvi]

Negwereth: наверное потому что в этом нет смысла. Зачем использовать менее изящный синтаксис, когда у тебя есть более изящный?

[Negwereth]

Илья Ростопка: Bind более изящный?

[alvvi]

Negwereth: я думал вы ведете речь про function.prototype-синтаксис vs class-синтаксис. Возможно, я вас недопонял. Какую альтернативу вы предлагаете?

[Negwereth]

Илья Ростопка: Arrow function в jsx, в который завернут вызов метода. Работает

[alvvi]

Negwereth: тогда не очень понимаю, причем тут

обычные прототипы

, о которых вы писали.
А вместо оборачивания вызова методов в arrow functions, можно просто объявлять методы с помощью их же, вот так:

class ExampleComponent extends Component {
    state = {
      n: 0,
    }
    add = (num) => {
      this.setState(prev => ({n: prev.n + num});
   }
    render() {...}
}

Ну, естественно, не без babel, но в create-react-app, допустим, такое работает по умолчанию.

[jtag]

Илья Ростопка: в create-react-app в проекте, с помощью чего подключаются js файлы к html? наверняка не через script.

[alvvi]

jtag_: подключаются с помощью Webpack'a, конечно.

[Negwereth]

Илья Ростопка: вы этот код запускали? Он рабочий?
Ну и прототипы в JS никуда не делись, классы сахар обычный. И говоря, что разрабы не смогли, я имею в иду именно этот ход с биндингом метода в экземпляр вместо того, чтобы брать его из прототипа.

[jtag]

что то не вижу, файла конфига webpacka? или он спрятан в node_modules?

[alvvi]

Negwereth: у меня на этом коде рабочее приложение есть, конечно он рабочий)

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

Ну я думаю это больше вина сырости классов, чем разработчиков React'a. Разработчики React'a просто стараются придерживатся нативного JS, а он, к сожалению, не идеален.

[alvvi]

jtag_: да, спрятан, не уверен где именно, но спрятан. Однако если сделать eject, все конфиги окажутся в папке с проектом.

[Negwereth]

Илья Ростопка: а, стоп, не рассмотрел код с первого раза.
У вас там не ES, такая запись свойств ещё на утверджена. Я думал, вы метод через стрелочную функцию задаёте, такой фокус работать не должен.
А так вы то же самое делаете, что и с биндингом, создавая метод в самом экземпляре.

А я имел в виду:

class Foo extends Component {
  meow() {}
  render() {
    return <div onClick={() => this.meow()}></div>
  }
}

[alvvi]

Negwereth: я понял, что вы имели в виду. Но ваш способ не лучше: у вас на каждом событии клика будет создаваться новая функция, что все таки не совсем гуд. С точки зрения синтаксиса мне нравится мой метод больше. А для создания методов в самом классе по сути есть keyword static.

У вас там не ES

Stage 2 это уже неплохо, я не думаю, что что-то поменяется кардинально, в React-комьюнити такой способ биндинга используется уже довольно давно.