Какая разница при объявлении функции в reactjs?

Question

[Егор]

Объясните есть ли какая разница при объявление функций, и влияет ли это как-то на скорость работы компонентов?

class Content extends React.Component {
  constructor() {
    super();
    this.consoleLog = () => { 
      //Первый вариант объявления
      console.log('Первый вариант');
    }
  }

    consoleLog = () => { 
    //Второй вариант объявления
    console.log('Второй вариант');
  }

  consoleLog() { 
    //Третий вариант объявления
    console.log('Третий вариант');
  }
}

Answer 1

[Никита Гущин]

Первый и второй вариант очень похожи. Преимущества перед третьим вариантом в том, что у вас метод будет забинден на this:

class ... {
  consoleLog = () => { 
    //Второй вариант объявления
    console.log('Второй вариант');
  }

  render() {
     return (
       <button onClick={this.consoleLog} type="button"> click me </button>
     )
  }
}

В первом и втором случае вы не потеряете this при передаче метода как callback в onClick.

Comments

[Егор]

то-есть по факту можно пользоваться например первым вариантом написания и это будет нормально?

[Никита Гущин]

Егор: первый вариант не очень. Вообще не очень. Если вы передаете куда-то метод - пользуйтесь вторым вариантом. Если же нет - третьим.