React - компоненты и контекст вызова

Question

Почему React - компоненты теряют контекст вызова в случае обработки событий?

export default class TodoListItem extends Component {
    constructor(props) {
        super(props);
    }
onLabelClick() {
    console.log(this)
}

render() {
    return <span onClick={this.onLabelClick}>
            Текст
        </span>;
}

}

Почему приходится использовать this.onLabelClick = this.onLabelClick.bind(this); в конструкторе или связывать его лексически? Просто ради интереса: в чем причина и почему нельзя было сделать иначе?

Answer 1

Дело не в реакте, в том, как работает this в стрелочных функциях и в обычных. В стрелочных функциях this всегда указывает на контекст инициализации, а в обычных все зависит от контекста выполнения.

Подробнее тут: https://ru.reactjs.org/docs/handling-events.html#gatsby-focus-wrapper

Там же есть ссылка на объяснение разницы между двумя типами функций

P.S. всегда используй стрелочные функции () => {}