Как я могу связать функцию с хуками в React?

Question

По сути, мы связываем функции-обработчики событий в конструкторе или создаем их как функции-стрелки в компонентах класса React, как показано ниже

class Test extends Component{
  constructor(props){
    super(props);
    this.state = { count:0 };
    this.setCount = this.setCount.bind(this);
  }

  setCount() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return <button onClick={this.setCount}>Increase</button>
  }
}

Но после введения хуков в React v16.7.0 компоненты класса стали функциональными компонентами с состоянием.

Так, как я могу связать функцию с хуками в функциональном компоненте?

Answer 1

С таким же успехом вы могли бы написать приведенный выше компонент Foo и сэкономить при печати. Обратите внимание на синтаксис вокруг handleClick ... он определяет закрытие handleClick как поле в Foo, а не как метод. Это избавит вас от необходимости использовать bind для перезаписи ссылки OBCject 'handleClick' в конструкторе. (Кроме того, вам не нужно определять конструктор, если вы просто вызываете 'super'!)

class Foo extends Component {
  handleClick = () => {
    console.log('Click happened');
  }

  render() {
    return <Button onClick={this.handleClick}>Click Me</Button>;
  }
}

Точно так же, для вашего исходного примера, просто объявите state и setCount напрямую и упростите ваш код:

class Test extends Component{
  state = {count: 0}

  setCount = () => {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return <button onClick={this.setCount}>Increase</button>
  }
}

Answer 2

Нет необходимости связывать функции / обратные вызовы в функциональных компонентах, поскольку в функциях нет this. В классах было важно связать this, потому что мы хотим убедиться, что this в обратных вызовах ссылается на сам экземпляр компонента. Однако выполнение .bind в конструкторе имеет еще одно полезное свойство - создавать функции один раз в течение всего жизненного цикла компонента, и новый обратный вызов не создавался при каждом вызове render(). Чтобы инициализировать обратный вызов только один раз с помощью перехватчиков React, вы должны использовать useCallback.

Классы

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Click happened');
  }

  render() {
    return <Button onClick={this.handleClick}>Click Me</Button>;
  }
}

Крючки

function Foo() {
  const memoizedHandleClick = useCallback(
    () => {
      console.log('Click happened');
    },
    [], // Tells React to memoize regardless of arguments.
  );
  return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}