Réf.

Dans le développement des composants

React, la gestion des effets secondaires et l'interaction DOM sont essentielles.

Et le refuge de rappel est deux outils puissants. useEffect Il s'agit d'un crochet multi-fonctions pour gérer divers effets secondaires, et le Recovery Ref fournit des méthodes plus directes et plus efficaces dans des scénarios spécifiques. useEffect

RETOUR REF Explication détaillée

return Ref permet un accès direct à l'élément DOM réel dans un composant fonctionnel. Passez la fonction de rappel à l'attribut

de l'élément. Cette fonction d'ajustement reçoit l'élément DOM en tant que paramètre, vous permettant de: ref

Fonctionner directement DOM: définissez la mise au point, ajustez la taille de l'élément, le style d'application, etc.
Interaction avec la troisième bibliothèque par partie: intégrée à la bibliothèque de fonctionnement direct de l'élément DOM (comme la galerie, la bibliothèque Canvas).

Quand utiliser la référence de rappel

Opération DOM directe:
• Vous devez définir ou nettoyer la logique liée à DOM (comme la gestion de la mise au point et ajuster les éléments). Le rendement de la référence peut accéder directement à l'élément DOM pour obtenir des opérations précises et efficaces.
Bibliothèque de troisième partie:
• Initialiser ou interagir avec le fonctionnement direct de l'élément DOM (tel que la galerie intégrée, l'interaction de canevas de traitement). Le retour de refaire vous permet de passer l'élément DOM directement à l'API de la bibliothèque.
Évitez les dépendances re-Rendaring:
• Les éléments dépendants peuvent conduire à un re-redringage inutile, ce qui affecte les performances. En utilisant la référence de rappel, vous pouvez éviter de contenir l'élément DOM lui-même dans le tableau dépendant de
  • , réduisant ainsi le nombre de rendu. useEffect useEffect
Exemple: gestion de la mise au point

Exemple: roulez vers le bas

<code class="language-javascript">import React, { useRef } from 'react';

function InputWithFocus() {
  const inputRef = useRef(null);

  const handleRef = (element) => {
    if (element) {
      element.focus();
    }
  };

  return <input ref={handleRef} />;
}</code>

RETOUR REF:

:

<code class="language-javascript">import React, { useState, useRef, useCallback } from 'react';

function Chat() {
  const [messages, setMessages] = useState([]);
  const messagesEndRef = useRef(null);

  const scrollToBottom = useCallback(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [messages]); 

  const handleSendMessage = () => {
    setMessages([...messages, "New Message"]); 
    scrollToBottom(); 
  };

  return (
    <div>
      {messages.map((msg, index) => (
        <div key={index}>{msg}</div>
      ))}
      <div ref={messagesEndRef} />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
}</code>

useEffect Sélectionnez la méthode correcte

<code class="language-javascript">import React, { useState, useEffect, useRef } from 'react';

function Chat() {
  const [messages, setMessages] = useState([]);
  const messagesEndRef = useRef(null);

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const scrollToBottom = () => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleSendMessage = () => {
    setMessages([...messages, "New Message"]); 
  };

  return (
    <div>
      {messages.map((msg, index) => (
        <div key={index}>{msg}</div>
      ))}
      <div ref={messagesEndRef} />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
}</code>

Pour les opérations directes du DOM et éviter le re-redémarrage inutile à une situation vitale, il est généralement préféré de récupérer la réf.

pour les scènes ou les performances plus simples n'est pas le principal point d'attention, «useEffect» est un choix approprié.

• En comprenant les avantages de la réflexion sur le rappel et de «UseEffect», vous pouvez prendre efficacement des décisions sages sur la façon de gérer les effets secondaires dans les composants React et d'interagir avec DOM.

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!