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. всегда используй стрелочные функции () => {}

БЛОГ НА HUSL

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

Ответы (1 шт):