Publicado pela primeira vez em: https://mingjiezhang.github.io/.
No JavaScript, esse objeto está vinculado ao ambiente de execução baseado em função de tempo de execução (ou seja, contexto).
Comece com demonstração no React
Quando o Facebook atualizou recentemente o React, a classe no ES6 foi adicionada ao método de criação de componentes. O Facebook também recomenda que o uso da criação de componentes defina uma classe de componente, definindo uma classe herdada do react.component. Demonstração oficial:
classe comobutton estende react.component {construtor () {super (); this.state = {curtido: false}; this.handleClick = this.handleclick.bind (this);} const.leclick () {this.SetState ({{goste:! 'gostei': 'Haven/' t gostei '; return (<div onclick = {this.handleclick}> você {text} this. Clique para alternar.Há muito desse uso na demonstração acima. Na classe LikeButton Extende React.component, declaramos a classe porque isso é determinado especificamente por seu contexto, para que não possamos conhecer o uso disso na definição de classe. É equivalente a nova classe definida acima, primeiro chamando a função construtora (), o contexto deste. Estado é o objeto de instância; Da mesma forma, o contexto deste. O problema é que OnClick = {this.Handleclick}, não há problema em obter a referência a essa função, e o contexto aqui é o objeto.
No momento, o problema é que, no react.createclass, handleclick () se ligará automaticamente à instância do likebutton quando o evento OnClick for acionado. Neste momento, o contexto desta função é a instância. No entanto, na escrita da classe ES6, o Facebook cancelou a ligação automática. Depois de instantar comobutão, o contexto de handleclick () é a instância de suporte da div (instância de apoio), e o contexto de manndeleclick () é originalmente obrigado a ser uma instância do likebutton. Temos várias soluções para esse problema.
Use bind () função para alterar o contexto deste
Você pode usar a função construtora () na declaração de classe
this.Handleclick = this.handleclick.bind (this);
Este método é uma ligação bind () e usado várias vezes. Neste método, depois de declarar a instância, podemos usar a função handleclick () em qualquer lugar da instância, e o contexto dessa função handleclick () é um objeto de instância do likebutton.
Além disso, também podemos vincular esse contexto ao objeto LikeButton Instância, onde a função é usada. O código é o seguinte
<div onclick = {this.handleclick.bind (this)}> você {text} this. Clique para alternar. </div>Este método exige que liguemos ao objeto do componente sempre usando a função bind ().
Função de seta do ES6
Uma função de seta => foi adicionada ao ES6. Além da conveniência, uma função de seta possui outro recurso que é vincular essa função ao contexto em que é definido. Esse recurso também pode nos ajudar a resolver esse problema. Use o seguinte código:
<div onclick = {() => this.Handleclick ()}> você {text} this. Clique para alternar. </div>Dessa forma, o contexto deste.HandLeclick () estará vinculado ao objeto LikeButton Instância. Pessoalmente, acredito que o uso de funções de seta torna o JavaScript mais próximo do estilo de programação orientado a objetos.
Este resumo
A essência disso é: isso não tem nada a ver com o escopo, mas apenas com o contexto de execução.
O exposto acima é o método de criar esse componente no ES6 no React que o editor apresentou a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!