La plupart de nos composants React peuvent enregistrer l'état, mais pas les composants fonctionnels? Et les composants de classe ont un cycle de vie, mais pas les composants fonctionnels?
Dans la première version de React, les composants de classe peuvent optimiser certains rendus inutiles en héritant de PureComponent. Par rapport aux composants fonctionnels, le site Web officiel de React ne fournit pas de méthode correspondante pour mettre en cache les composants de fonction afin de réduire les rendus inutiles. La fonction React.memo directement sortie de 16,6 .
Le nouveau Hook de React 16.8 permet aux composants fonctionnels de React d'avoir un état et fournit des méthodes de cycle de vie comme componentDidMount et componentDidUpdate .
Les hooks ne remplacent pas les classes, ce sont juste un nouvel outil que vous pouvez utiliser.
Exemples de crochets:
OneTimeButton est un composant fonctionnel, ce qu'il fait est d'appeler la méthode sayHi lorsque nous cliquons sur le composant fonctionnel
import React from 'react';
import {
render } from 'react-dom';
function OneTimeButton(props) {
return (
<button onClick={
props.onClick}>
点我
</button>
)
}
function sayHi() {
console.log('yo')
}
render(
<OneTimeButton onClick={
sayHi}/>,
document.querySelector('#root')
)
Ce que fait ce composant est de garder une trace de savoir si on a cliqué dessus, et si on clique dessus, désactiver le bouton, comme un interrupteur ponctuel.
Mais il a besoin d'un état, car c'est une fonction, il ne peut pas avoir d'état (avant React 16.8), il doit donc être restructuré en classes.
class OneTimeButton extends React.Component {
state = {
clicked: false
}
handleClick = () => {
this.props.onClick();
// Ok, no more clicking.
this.setState({
clicked: true });
}
render() {
return (
<button
onClick={
this.handleClick}
disabled={
this.state.clicked}
>
You Can Only Click Me Once
</button>
);
}
}
Utiliser Hook pour ajouter un état
Utilisez le nouveau hook useState pour ajouter un état aux composants de fonction ordinaires:
import React, {
useState } from 'react'
function OneTimeButton(props) {
const [clicked, setClicked] = useState(false)
function doClick() {
props.onClick();
setClicked(true)
}
return (
<button
onClick={
clicked ? undefined : doClick}
disabled={
clicked}
>
点我
</button>
)
}
useState est un hook. Son nom commence par "use" (c'est l'une des règles des Hooks - leur nom doit commencer par "use" ).
Le paramètre du hook useState est la valeur initiale de l' état , et il retourne un tableau contenant deux éléments : l'état actuel et une fonction pour changer l'état.
Le composant de classe a un objet d'état volumineux et une fonction this.setState modifie l'ensemble de l'objet d'état à la fois.
Les composants de fonction n'ont aucun état , mais le hook useState nous permet d'ajouter de petits blocs d' état si nécessaire . Par conséquent, si seul un booléen est nécessaire, nous pouvons créer un état pour le sauvegarder.
Puisque Hook crée ces états d'une manière spéciale et qu'il n'y a pas de fonction setState pour changer l'état dans le composant de fonction, Hook a besoin d'une fonction pour mettre à jour chaque état. Ainsi, le retour useState est une paire de correspondance: une valeur, une fonction pour mettre à jour la valeur. Bien sûr, la valeur peut être n'importe quoi - n'importe quels numéros de type JS, booléens, objets, tableaux, etc.
Caractéristiques des crochets
Règles d'ordre d'appel (elles doivent être appelées dans le même ordre à chaque fois);
Supposons les composants suivants:
function AudioPlayer() {
const [volume, setVolume] = useState(80);
const [position, setPosition] = useState(0);
const [isPlaying, setPlaying] = useState(false);
.....
}
Il appelle useState 3 fois et React placera ces trois hooks dans le tableau Hooks lors du premier rendu.
La prochaine fois que vous effectuez le rendu, les 3 mêmes hooks sont appelés dans le même ordre, donc React peut regarder son tableau et trouver qu'il existe déjà un hook useState à la position 0, donc React ne créera pas un nouvel état, mais reviendra à l'existant un. statut.
C'est ainsi que React peut créer et maintenir l'état dans plusieurs appels de fonction, même si la variable elle-même sort du champ d'application à chaque fois.
Règles de hooks
Les fonctions de hooks personnalisées doivent uniquement se conformer à la règle 3: leurs noms doivent être précédés du préfixe " use ".
function AudioPlayer() {
// Extract these 3 pieces of state:
const [volume, setVolume] = useState(80);
const [position, setPosition] = useState(0);
const [isPlaying, setPlaying] = useState(false);
// < beautiful audio player goes here >
}
Créez une nouvelle fonction spécialisée dans ces états et utilisez des méthodes supplémentaires pour renvoyer un objet afin de faciliter le démarrage et l'arrêt de la lecture, par exemple:
function usePlayerState(lengthOfClip) {
const [volume, setVolume] = useState(80);
const [position, setPosition] = useState(0);
const [isPlaying, setPlaying] = useState(false);
const stop = () => {
setPlaying(false);
setPosition(0);
}
const start = () => {
setPlaying(true);
}
return {
volume,
position,
isPlaying,
setVolume,
setPosition,
start,
stop
};
}
Un avantage de l'extraction de l'état de cette manière est que la logique et le comportement associés peuvent être combinés . Un ensemble de gestionnaires d'événements d'état et associés et d'autres logiques de mise à jour peuvent être extraits, ce qui non seulement nettoie le code du composant , mais rend également ces logiques et comportements réutilisables.
En appelant des hooks personnalisés dans des hooks personnalisés, les hooks peuvent être combinés.
Les hooks ne sont que des fonctions. Bien entendu, les fonctions peuvent appeler d'autres fonctions.
Les hooks offrent une nouvelle façon de traiter les problèmes dans React, et les idées qu'il contient sont très intéressantes et novatrices.