Как правильно сделать привязку к this в react?

Question

[Leel Usama]

import React from 'react';
import Counter from './components/Counter';

class App extends React.Component {
  state = {
    counter: 0,
  };

  render() {
    return (
      <main>
        <h1>React Camp</h1>
        <Counter
          title='Simple counter'
          counter={this.state.counter}
          handleIncrement={this.handleIncrement}
        />
      </main>
    );
  }

// ver 1
//  handleIncrement() {
//    this.setState((state) => ({ counter: state.counter + 1 }));
//  }

// ver 2
//  handleIncrement = () =>
//    this.setState((state) => ({ counter: state.counter + 1 }));
}

export default App;

Почему ver 1 не сработает, а ver 2 сработает?
Потому, что у стрелочной функции нет привязки к this и срабатывает замыкание?

Answer 1

[Zhanna_K]

потому что стрелочные функции не содержат собственный контекст this

Comments

[Роман]

Очень странно что реакт так себя ведет, поскольку нативный js уже давно позволяет определять методы класса как method(...){...}

[Роман]

Специально посмотрел, данный синтаксис должен работать и в реакте. Вот живой пример из работающего приложения

...
class Worker extends React.Component {
  constructor(props) {
    super(props);
    // console.log(props)
    // this.state(props.worker);
  }

  kill(pid){
    ws.send("worker.kill",this.props.worker.pid);
  }

  renderButton(){
    if( !this.props.worker.alive ){ 
      return <div className="worker-button">мертв</div>  
    }
    return <button className="worker-button" onClick={() => this.kill()}>убить</button>
  }
  render() {
    return (
      <div className="worker">
        <div className="worker-info">status: <b>{this.props.worker.status}</b></div>
        <div className="worker-info">pid: <b>{this.props.worker.pid}</b></div>
        <div className="worker-info"><b>{this.props.worker.generated}</b> / <b>{this.props.worker.processed}</b></div>
        {this.renderButton()}
      </div>
    );
  }
}
...

[Zhanna_K]

Роман, насколько я понимаю, в реакт нужно в конструкторе делать привязку контекста

this.handleIncrement = this.handleIncrement.bind(this)

[Роман]

Попытался ввести в заблуждение

Zhanna_K, я показал вам рабочий пример, в нем нет такой привязки сделанной явно.
Думаю дело в том, что в примере от автора вопроса

class App extends React.Component {
  state = {
    counter: 0,
  };
...
}

есть некоторая реакт-магия. Которая при определенных условиях воспринимает область между {...} класса как функцию или конструктор, и соответственно все фанки объявленные внутри уже будут требовать привязки контекста.

Думаю это поведение можно изменить заменив на такую форму

class App extends React.Component {
  constructor(props) {
    super(props);
    state = {
      counter: 0,
    };
  }  

  handleIncrement() {
    this.setState((state) => ({ counter: state.counter + 1 }));
  }

  render() {
    return (
      <main>
        <h1>React Camp</h1>
        <Counter
          title='Simple counter'
          counter={this.state.counter}
          handleIncrement={this.handleIncrement}
        />
      </main>
    );
  }
}

Извините))))

[Даша Циклаури]

Роман, нет, ты путаешь! магии нет, в примере вызов функции класса происходит через вызов функции-обертки () => this.kill
хэндлер на событие имеет другой this контекст

[Роман]

Даша Циклаури, а здесь?
!this.props.worker.alive

[Даша Циклаури]

Роман, еще раз пишу - ты путаешь контексты вызова методов и вводишь других в заблуждение!
this.kill в изначальной постановке автора вызывается с контекстом хэндлера события. Чтобы его вызвать с контекстом компонента нужно или передать стрелку () => this.kill или принудительно задать контекст всем хэндлерам через bind еще в конструкторе (как написали выше). Это поведение Реакта предсказуемо и реализовано еще в ранних версиях.

!this.props.worker.alive лежит внутри функции this.renderButton(), которая вызывается с тем же контекстом что и render(), которая имеет контекст компонента

[Роман]

Даша Циклаури, охх, и правда проглядел, извиняюсь)))

[Роман]

просто не обратил внимания что у автора так
handleIncrement={this.handleIncrement}
а не так
handleIncrement={()=>this.handleIncrement}

[Роман]

вот и подвис над пониманием почему же так)

[Роман]

и вот еще. Эта формулировка не раскрывает всей сути

потому что стрелочные функции не содержат собственный контекст this

Наверное стоит добавить, что стрелочные функции привязываются к контексту, в котором созданы

[Роман]

Даша Циклаури, скажите, а Циклаури это грузинская фамилия (никаких дискриминаций, сам ношу аджарскую фамилию)?

[Даша Циклаури]

Роман, да

Answer 2

[Kirill Makarov]

Переходи на функции, меньше кода, удобно. Тем более сейчас есть хуки.