Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Bind x Arrow Function

Olá, pessoal.

Qual é a vantagem de repetir o bind a cada utilização do this em escopos variados? Não seria melhor utilizarmos arrow function para que o escopo do this já se autoajustasse?!

Ao invés de:

constructor() {
    super();    
    this.state = {lista : [],nome:'',email:'',senha:''};
    this.enviaForm = this.enviaForm.bind(this);
    this.setNome = this.setNome.bind(this);
    this.setEmail = this.setEmail.bind(this);
    this.setSenha = this.setSenha.bind(this);
  }

Teríamos o constructor mais limpo e as funções => :

  constructor() {
    super();
    this.state = {lista:[], nome:'', email:'', senha:''};
  }

  componentDidMount(){
    $.ajax({
      url: 'https://cdc-react.herokuapp.com/api/autores',
      dataType: 'json',
      success:function(resposta){
        this.setState({lista:resposta});
      }.bind(this)
    });
  }

  enviaForm = (evento) => {
    evento.preventDefault();

    $.ajax({
      url: 'https://cdc-react.herokuapp.com/api/autores',
      contentType: 'application/json',
      dataType: 'json',
      type: 'post',
      data: JSON.stringify({
        nome: this.state.nome,
        email:  this.state.email,
        senha: this.state.senha
      }),
      success: function(resposta){
        this.setState({lista: resposta});
      }.bind(this),
      error: function(resposta){
        console.log("erro!");
      }
    });
  }

  setNome = (evento) => {
    this.setState({nome:evento.target.value});
  }

  setEmail = (evento) => {
    this.setState({email:evento.target.value});
  }

  setSenha = (evento) => {
    this.setState({senha:evento.target.value});
  }
2 respostas

Eu acredito que com a chegada das arrow functions, não há mais vantagem nesses casos, pois usando a arrow function seu código fica melhor e menos verboso

Aqui tem um post falando sobre isso

https://medium.com/@joespinelli_6190/using-arrow-functions-to-avoid-binding-this-in-react-5d7402eec64

Então o conteúdo está desatualizado? Digo, existem melhores práticas do que as abordadas ao longo do curso?