web-dev-qa-db-fra.com

Comment puis-je lier la fonction avec des crochets dans React?

Fondamentalement, nous lions les fonctions du gestionnaire d'événements dans le constructeur ou les faisons comme des fonctions fléchées dans les composants de classe React comme ci-dessous)

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>
  }
}

Mais après l'introduction des hooks dans React v16.7.0, les composants de classe sont devenus des composants fonctionnels avec état.

Alors, comment puis-je lier la fonction avec des crochets dans le composant fonctionnel?

javascriptreactjsreact-nativereact-hooks
8
Hemadri Dasari

Il n'est pas nécessaire de lier des fonctions/rappels dans les composants fonctionnels car il n'y a pas de this dans les fonctions. Dans les classes, il était important de lier this car nous voulons nous assurer que le this dans les rappels se réfère à l'instance du composant lui-même. Cependant, faire .bind Dans le constructeur a une autre propriété utile de créer les fonctions ne fois pendant tout le cycle de vie du composant et un nouveau rappel n'a pas été créé à chaque appel de render(). Pour n'initialiser le rappel qu'une seule fois en utilisant React hooks, vous utiliseriez useCallback.

Des classes

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>;
  }
}

Crochets

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