Qu'est-ce qui a changé dans React ?

En tant que développeur, vous devez rester à jour sur la technologie que vous utilisez. Récemment, la version 19 de React est devenue stable. Dans cet article, vous découvrirez les changements apportés à la version 19.

L'article est divisé en deux parties, la première concerne les nouveautés de la version 19 et les parties qui ont été améliorées dans React. Jetons un coup d'œil à ce qui a été amélioré avant la nouvelle.

donner la référence comme accessoire

Nous devrions utiliser forwardRef pour transmettre les

refs comme accessoires, et ce serait redondant. Et le code écrit dedans serait :

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

Maintenant, la référence peut être donnée directement comme accessoire

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

fonction de nettoyage pour réf

Si la référence est utilisée dans un composant, la référence doit être effacée lorsque le composant est démonté de l'interface utilisateur. Ceci est important pour une gestion efficace de la mémoire et pour éviter les situations inattendues. Dans les versions précédentes, cela était écrit dans la partie return de useEffect :

function Example() {
    const ref = useRef(null);

    useEffect(() => {
        ref.current = null; // Reset ref if needed
    }, [/* dependencies */]);
}

Après le changement dans la version 19, le code ci-dessus s'écrit :

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

Option pour attribuer une valeur initiale à useDeferredValue

vous savez déjà pourquoi initialValue est donné, vous pouvez donc passer à la section suivante)

Prise en charge des métadonnées

Pour attribuer des éléments méta comme

meta, titre à la page souhaitée, vous deviez utiliser useEffect ou des bibliothèques comme réagir-casque.

La version 19 a ajouté la possibilité d'utiliser ces balises directement.

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

enveloppe automatiquement les balises méta dans l'élément

lors du rendu d'un composant React.

Styles de support

Cette version s'est également concentrée sur l'optimisation des styles, en ajoutant la possibilité de télécharger les styles au bon moment et l'attribut de préséance. Cet attribut contrôle l'ordre dans lequel les styles sont ajoutés au DOM. Les styles sont chargés avant le montage de leurs composants dépendants.

Prise en charge des scripts asynchrones

Tout comme les styles, les scripts asynchrones peuvent être téléchargés au moment souhaité. Un composant qui charge des styles et des scripts asynchrones n'a pas à se soucier de les retélécharger lorsqu'ils sont utilisés à plusieurs endroits, car ils sont mis en cache lors du premier chargement)

Précharger les ressources

Télécharger une ressource le plus rapidement possible a un bon effet sur les performances du site. De nouvelles API ont été annoncées dans React 19 pour tirer parti de cette fonctionnalité. Ce sont les suivants

preinit - pour télécharger et utiliser rapidement la ressource (scripts ou modules) ;
précharger - pour télécharger la ressource à l'avance, dans ce cas il n'est pas nécessaire d'utiliser rapidement la ressource chargée (polices, styles)
preconnect - ouvre une connexion au serveur sur lequel vous souhaitez charger la ressource, ce qui accélère le temps de chargement de la ressource.
prefetchDNS fonctionne comme preconnect, sauf qu'il télécharge et met en cache une ressource avant qu'une demande ne soit effectuée sans créer de connexion.

Prise en charge des éléments personnalisés

React ne reconnaissait pas les accessoires lorsque des éléments personnalisés étaient utilisés dans les versions précédentes, à partir de la nouvelle version, ils peuvent être utilisés sans problème. Un exemple d'élément personnalisé -> .

Remarque : à certains endroits, les exemples ne sont pas fournis dans le code, vous pouvez voir des exemples ici

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!