Для чего в react используют регулярно метод bind?

Question

[Иван]

Не понимаю, для чего используется жесткая привязка к контексту, если сам объект ничего не несёт, объясните на пальцах пожалуйста.
вот пример

class FriendsContainer extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      name: 'Tyler McGinnis',
      friends: [
        'Jake Lingwall',
        'Sarah Drasner',
        'Merrick Christensen'
      ],
    }

    this.addFriend = this.addFriend.bind(this)
  }
  addFriend(friend) {
    this.setState((state) => ({
      friends: state.friends.concat([friend])
    }))
  }
  render() {
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <AddFriend addNew={this.addFriend} />
        <ShowList names={this.state.friends} />
      </div>
    )
  }
}

Comments

[Петр Мухуров]

чтобы функция, которая вызывается в AddFriend, использовала контекст текущего класса, если этого не сделать, при вызове в AddFriend this не будет

[Иван]

Петр Мухуров, то есть если не будет привязки, то будет undefined т.к в функции ничего нету?

Answer 1

[Антон Спирин]

В вашем примере, чтобы в вызове this.setState, this указывал на ваш компонент, а не на undefined.
Сейчас в React-разработке вместо вызова конструктора и bind, принято использовать свойства класса:

class Example extends React.Component {
  state = {
    someProp: '',
  };

  someHandler = () => {
    this.setState({ someProp: 'someValue' });
  };

  render() { ... }
}

Comments

[Иван]

значит мой метод устаревший? лучше использовать свойство класса?

[Антон Спирин]

BenderIsGreat34, аналогичное решение. Просто второй вариант лаконичней - меньше кода. Использовать можно оба. Надеюсь, смысл привязки контекста теперь понятен.

Answer 2

[Demian Smith]

Люди древности так привязывали метод к контексту. В давние времена не существовало стрелочных функций.

В вашем примере мы передаём функцию this.addFriend в обработчик события addNew. JS так устроен что когда вы передаёте this.addFriend (куда угодно, хоть в обработчик, хоть в переменную), то будет передан только addFriend без this. Bind как раз нужен для того чтоб прибить FriendsContainer к контексту метода addFriend.

В современном мире принято делать так:

class FriendsContainer extends React.Component {
  addFriend = (friend) = >{
    this.setState((state) => ({
      friends: state.friends.concat([friend])
    }))
  }
}

Это по сути тот же bind, только без лишних телодвижений.