Это продолжение React Binding Revealed Part1
В ES6 нет автоматической привязки методов по сравнению с React.createClass, где все методы привязаны к this объекту .
Поведение по умолчанию: метод печати вызывается при нажатии кнопки. Но вы не можете получить доступ к состоянию, потому что оно не привязано к компоненту. Вы получите сообщение об ошибке Невозможно прочитать свойство "state" со значением null.
Вы можете решить эту проблему, используя
- Метод привязки в рендере
- Функция стрелки
- Привязка конструктора
Использование # 3 рекомендуется по сравнению с другими привязками, поскольку в № 1 и № 2 есть незаметные накладные расходы на производительность, поскольку методы будут быть привязанным каждый раз, когда компонент визуализируется. И если ваш компонент визуализируется чаще, это может замедлить визуализацию.
Привязка конструктора
Помните, что при вызове print нельзя использовать фигурные скобки.
onClick = {this.print}
Я запуталась из-за этого. Если вы используете
onClick = {this.print ()}
print будет вызываться всякий раз, когда вызывается render.
Теперь давайте проверим, как передавать параметры в методы, связанные с конструктором.
Если вы вызываете print («Venus»), функция печати будет вызываться каждый раз при рендеринге перед щелчком. Поэтому вам нужно использовать либо стрелку, либо привязку при вызове метода.
Совет для профессионалов: когда вам нужно передать параметры методу, используйте привязку со стрелкой, а если нет параметров для передачи, используйте привязку конструктора.
Теперь давайте обсудим передачу методов в качестве свойств дочернему компоненту и способы привязки этих методов.
Взгляните на эти компоненты
Теперь кнопка «Печать из дочернего» находится в дочернем компоненте, и при ее нажатии вызывается метод printParent. Поскольку printParent ограничен в конструкторе родительского объекта, он имеет доступ к состоянию родительского компонента и свойствам. Таким образом, будет зарегистрировано «Я родитель».
Теперь давайте проверим, как передать параметры родительскому методу из дочернего компонента
Выход:
Вы не можете напрямую позвонить
onClick = {this.props.printParent («Марс»)}
это будет вызывать printParent каждый раз при рендеринге дочернего элемента. Таким образом, вам нужно привязать новый метод в дочернем компоненте, используя Привязку конструктора, функцию Стрелка или .bind () для привязки родительского метода.
Привязка дочернего конструктора
Привязка конструктора предпочтительна, если вы пишете свой собственный метод (printChild) в дочернем и выполняете некоторые манипуляции и вызываете родительский метод из свойств.
Если вы хотите напрямую вызвать родительский метод с параметрами для передачи, вы можете использовать Arrow / bind ()
Дочернее связывание с использованием вызова метода и стрелки
Резюме:
Привязка конструктора решает всю проблему методов доступа из компонента и дочернего компонента.
Есть библиотека autobind-decorator, которая делает привязку за вас.