Qu'est-ce que le crochet en réaction

Dans React, hook est une nouvelle fonctionnalité de React16.8, qui est utilisée pour utiliser l'état et d'autres fonctionnalités de réaction sans écrire de classes ; vous pouvez utiliser des composants de fonction pour utiliser certaines fonctionnalités dans React, ou vous pouvez utiliser des composants de fonction. state et implémente des opérations d’état communes entre les composants via des hooks personnalisés.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Qu'est-ce que le hook dans React

React Hook est une nouvelle fonctionnalité introduite dans React, qui permet aux composants de la fonction React d'avoir également un état

Les opérations d'état communes entre les composants peuvent être réalisées via des hooks personnalisés

Signification : Hook est React ; Nouvelles fonctionnalités dans 16.8. Il vous permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classes. Pour faire simple, vous pouvez utiliser des composants de fonction pour utiliser certaines fonctionnalités de React

Problèmes à résoudre :

Résolvez le problème difficile de la réutilisation de la logique d'état entre les composants. Ce que les hooks peuvent résoudre, c'est que vous n'avez pas besoin de le faire. modifiez la structure des composants précédente. Lorsque vous réutilisez la logique d'état, sans utiliser de hooks, vous devez utiliser certaines utilisations avancées telles que des composants avancés, des fournisseurs, des clients, etc. Cette méthode n'est pas très conviviale pour les novices et peut être plus facile à comprendre.

Pour les composants complexes, vous pouvez diviser leur logique. Par exemple, lorsque vous utilisez des fonctions de cycle de vie, différents cycles de vie doivent être effectués à des moments différents. Par conséquent, pour les composants complexes à ce stade, certaines fonctions de cycle de vie sont nombreuses. de logique, ce qui réduit considérablement la lisibilité. Lorsque vous utilisez des hooks, vous pouvez diviser la logique des composants et intégrer la même logique ensemble, ce qui augmente considérablement la lisibilité et facilite la maintenance d'une part. Aucune compréhension des composants de classe n'est requise lors de l'apprentissage pour la première fois. de ce mot-clé dans le composant actuel, mais il n'est pas nécessaire dans le hook. Cela peut résoudre le problème de l'incarnation des caractéristiques de React sans utiliser de composants de classe

Une chose à noter est que les composants hook et de classe ne peuvent pas être utilisés en même temps. Vous devez faire attention pendant le processus d'utilisation réel, sinon une erreur se produira. .

Utilisation de React-hook

react fournit deux fonctions de hook, useState et useEffect, pour créer des hooks de pile et des hooks d'effet

state hook

L'utilisation de useState dans un composant de fonction peut utiliser l'état pour le composant ;

Le paramètre d'entrée de useState est l'état initial, et le paramètre de sortie est l'état actuel et la fonction qui met à jour l'état ;

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState créera un état lors de sa première exécution, et cet état sera utilisé dans les exécutions ultérieures ;

effect hook

use useEffect peut ajouter une logique d'effets secondaires aux composants

Ma compréhension personnelle des soi-disant effets secondaires est l'interaction avec le monde en dehors du cadre de React, comme les opérations DOM ; , requêtes réseau, etc. (Pour être honnête, je n'ai pas bien compris ce que sont les effets secondaires)

useEffect a deux paramètres d'entrée, le premier paramètre est une fonction d'effet secondaire et le deuxième paramètre est un tableau utilisé pour déterminer. s'il faut exécuter l'effet secondaire ;

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

L'effet secondaire a un processus d'exécution et un processus de nettoyage facultatif. La fonction d'effet secondaire définit le processus d'exécution, sa fonction de valeur de retour définit le processus de nettoyage

Les effets secondaires définis dans le fichier. La fonction du composant fait partie du résultat du rendu. Les effets secondaires seront exécutés après chaque rendu, et les effets secondaires précédents seront effacés avant le rendu et avant la destruction du composant. Cela permet à nos effets secondaires de lire les accessoires et de les indiquer chacun ; time;

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

Si vous ne souhaitez pas exécuter d'effets secondaires à chaque rendu, vous pouvez passer un tableau au deuxième paramètre de useEffect. Lorsque les éléments du tableau ne changent pas, les effets secondaires ne seront pas déclenchés. ;

Hook personnalisé

Un hook personnalisé est en fait une fonction ordinaire qui utilise useState et useEffect en interne, et le nom de la fonction commence par use ;

L'utilisation d'un hook personnalisé peut extraire la logique des composants dans une fonction réutilisable ;

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });
  return isOnline;
}

TODO

Accessoires de rendu, composants d'ordre élevé et notes sur l'optimisation des performances des effets

Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!