Introduction à React Hooks

Découvrez comment Hooks peut vous aider à créer une application React

Hooks est une fonctionnalité qui sera introduite dans React 16.7 et qui va changer la façon dont nous écrivons les applications React à l'avenir.

Avant l'apparition des Hooks, certains éléments clés des composants n'étaient possibles qu'en utilisant des composants de classe: avoir leur propre état et utiliser les événements du cycle de vie. Les composants fonctionnels, plus légers et plus flexibles, avaient des fonctionnalités limitées.

Les hooks permettent aux composants de fonction d'avoir un état et de répondre aux événements du cycle de vieaussi, et en quelque sorte rendre les composants de classe obsolètes. Ils permettent également aux composants de fonction d'avoir un bon moyen de gérer les événements.

État d'accès

En utilisant leuseState()API, vous pouvez créer une nouvelle variable d'état et avoir un moyen de la modifier.useState()accepte la valeur initiale de l'élément d'état et renvoie un tableau contenant la variable d'état et la fonction que vous appelez pour modifier l'état. Puisqu'il retourne un tableau, nous utilisonsdéstructuration du tableaupour accéder à chaque élément individuel, comme ceci:const [count, setCount] = useState(0)

Voici un exemple pratique:

import { useState } from 'react'

const Counter = () => { const [count, setCount] = useState(0)

return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

Vous pouvez en ajouter autantuseState()appels que vous souhaitez, pour créer autant de variables d'état que vous le souhaitez. Assurez-vous simplement de l'appeler au niveau supérieur d'un composant (pas dans unifou dans tout autre bloc).

Exemple sur Codepen:

Voir le styloExemple de React Hooks # 1 compteurpar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!