BenderIsGreat34
@BenderIsGreat34
junior front-end

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

Не понимаю, для чего используется жесткая привязка к контексту, если сам объект ничего не несёт, объясните на пальцах пожалуйста.
вот пример
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>
    )
  }
}
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
В вашем примере, чтобы в вызове this.setState, this указывал на ваш компонент, а не на undefined.
Сейчас в React-разработке вместо вызова конструктора и bind, принято использовать свойства класса:
class Example extends React.Component {
  state = {
    someProp: '',
  };

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

  render() { ... }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
search
@search
мама говорит что я особенный
Люди древности так привязывали метод к контексту. В давние времена не существовало стрелочных функций.

В вашем примере мы передаём функцию 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, только без лишних телодвижений.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы