Глубоко понимать метод создания этого компонента в ES6 в React

Впервые опубликовано по адресу: https://mingjiezhang.github.io/.

В JavaScript этот объект связан с средой выполнения функций выполнения (то есть в контексте).

Начните с демонстрации в React

Когда Facebook недавно обновлен React, класс в ES6 был добавлен в метод создания компонентов. Facebook также рекомендует, чтобы создание компонентов использовало определение класса компонентов, определяя класс, унаследованный от React.component. Официальная демонстрация:

 Класс, такие как Button Extends React.component {constructor () {super (); this.state = {liked: false}; this.handleclick = this.handleclick.bind (this);} handleclick () {this.setState ({liked :! this.state.liked}); «понравился»: 'Haven/' T

В приведенной выше демонстрации много использования. В классе, как Button Extens React.component, мы объявляем класс, потому что это специально определяется его контекстом, поэтому мы не можем знать использование этого в определении класса. Это эквивалентно новому классу, определенному выше, сначала вызывая функцию Constructor (), этот контекст этого. Штат является объектом экземпляра; Точно так же этот контекст этого. State.licked в функции render () также является объектом. Проблема в том, что onclick = {this.handleclick}, нет проблем с получением ссылки на эту функцию, и контекст здесь является объектом.

В настоящее время проблема заключается в том, что в React.createClass Handleclick () автоматически свяжется с экземпляром, который будет запускаться, когда запускается событие OnClick. В настоящее время контекст этой функции является экземпляром. Однако в написании класса ES6 Facebook отменил автоматическую привязку. После инстанции «Подобно» контекст handleclick () является экземпляром поддержки Div (экземпляр поддержки), и контекст handleclick () изначально обязан быть экземпляром, как Button. У нас есть несколько решений этой проблемы.

Используйте функцию bind (), чтобы изменить контекст этого

Вы можете использовать функцию Constructor () в объявлении класса

 this.handleclick = this.handleclick.bind (это);

Этот метод представляет собой связывание bind () и используется несколько раз. В этом методе, после объявления экземпляра, мы можем использовать функцию handleclick () в любом месте в экземпляре, и контекст этой функции handleclick () - это объект экземпляра, который является путтоном.

Кроме того, мы также можем связать этот контекст с объектом экземпляра «НАЗАД», где используется функция. Код выглядит следующим образом

 <div onclick = {this.handleclick.bind (this)}> вы {text} this. Нажмите, чтобы переключиться. </Div>

Этот метод требует, чтобы мы каждый раз связывались с объектом компонента, используя функцию bind ().

Функция стрелы ES6

Функция стрелки => была добавлена в ES6. В дополнение к удобству, функция стрелки имеет другую функцию, которая должна привязать эту функцию с контекстом, в котором она определена. Эта функция также может помочь нам решить эту проблему. Используйте следующий код:

 <div onclick = {() => this.handleclick ()}> вы {text} this. Нажмите, чтобы переключиться. </Div>

Таким образом, контекст этого. Handleclick () будет связан с объектом экземпляра «Способный». Лично я считаю, что использование функций со стрелками делает JavaScript ближе к объектно-ориентированному стилю программирования.

Это резюме

Суть этого в том, что это не имеет ничего общего с масштабами, но только с контекстом выполнения.

Выше приведено метод создания этого компонента в ES6 в React, который редактор представил вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!