React v16.3.0 : nouveaux cycles de vie et API contextuelle

Il y a quelques jours, nous avons écrit un article sur les changements à venir dans notre approche traditionnelle du cycle de vie, y compris une stratégie de migration étape par étape. Dans React 16.3.0, nous avons ajouté de nouvelles méthodes de cycle de vie pour faciliter la migration. Nous avons également introduit de nouvelles API pour les fonctionnalités de requête de longue durée : une API de contexte officielle, une API de transfert de référence et une API de référence plus sémantique.

Veuillez poursuivre votre lecture pour en savoir plus sur cette version.

API Context officiellement certifiée

Depuis de nombreuses années, React fournit une API expérimentale pour Context. Bien qu’il s’agisse d’un outil puissant, son utilisation est mal vue en raison de problèmes inhérents à l’API, nous avons donc l’intention de remplacer cette API expérimentale par une meilleure API.

React 16.3 introduit une nouvelle API Context qui est plus efficace et prend en charge la vérification de type statique et les mises à jour approfondies.

Remarque
L'ancienne ContextAPI continuera d'être conservée dans React 16.x, vous aurez donc le temps de migrer.

Voici un exemple de la façon d'injecter un « sujet » à l'aide de la nouvelle API de contexte :

## by 司徒正美
const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = {theme: 'light'};

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

API createRef

Auparavant, React proposait deux façons de gérer les références Méthodes : API de référence de chaîne et API de référence de rappel. Bien que l'API string ref soit plus pratique, elle présente plusieurs inconvénients, notre recommandation officielle est donc d'utiliser la référence de rappel.

React 16.3 fournit une nouvelle solution de gestion des références, qui offre une commodité pour les références de chaîne sans aucun inconvénient :

## by 司徒正美

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

Remarque

En plus du nouveau API createRef, les références de rappel continueront d'être prises en charge.

Vous n'avez pas besoin de remplacer les références de rappel dans le composant. Ils sont légèrement plus flexibles et continueront donc à constituer une fonctionnalité avancée.

API forwardRef

Les composants d'ordre supérieur (ou HOC) sont un moyen courant de réutiliser du code entre les composants. Sur la base de l'exemple de contexte de thème ci-dessus, nous pourrions créer un objet temporaire avec le "thème" actuel injecté comme propriété :

## by 司徒正美

function withTheme(Component) {
  return function ThemedComponent(props) {
    return (
      cc08703116ce42022d08955abae73f54
        {theme => 6ed8e9073d9c761724eb70bf3f0fade5}
      bf7c81c161b24597f4bb608217085ce7
    );
  };
}

Nous pouvons utiliser la méthode spéciale ci-dessus pour connecter le composant au contexte de thème, et Il n'est pas nécessaire d'utiliser directement le contexte du sujet. Par exemple :

## by 司徒正美

class FancyButton extends React.Component {
  buttonRef = React.createRef();

  focus() {
    this.buttonRef.current.focus();
  }

  render() {
    const {label, theme, ...rest} = this.props;
    return (
      3f01e199a4239832cc42b335d0472095

        {label}
      65281c5ac262bf6d81768915a4a77ac0
    );
  }
}

const FancyThemedButton = withTheme(FancyButton);

// We can render FancyThemedButton as if it were a FancyButton
// It will automatically receive the current "theme",
// And the HOC will pass through our other props.
ad6931a2197aede9d7a61bfc94e4cffa;

Les HOC transmettent généralement des accessoires au composant qu'ils enveloppent. Malheureusement, les arbitres n'ont pas pénétré. Cela signifie que si nous utilisons un FancyThemedButton, nous ne pouvons pas ajouter la référence au FancyButton et donc nous ne pouvons pas appeler focus().

La nouvelle API proxy résout ce problème en fournissant un moyen d'intercepter une référence et de la transmettre comme un accessoire normal :

## by 司徒正美

function withTheme(Component) {
  // Note the second param "ref" provided by React.forwardRef.
  // We can attach this to Component directly.
  function ThemedComponent(props, ref) {
    return (
      cc08703116ce42022d08955abae73f54
        {theme => (
          f3d328559b51a9b75ca8e71699437894
        )}
      bf7c81c161b24597f4bb608217085ce7
    );
  }

  // These next lines are not necessary,
  // But they do give the component a better display name in DevTools,
  // e.g. "ForwardRef(withTheme(MyComponent))"
  const name = Component.displayName || Component.name;
  ThemedComponent.displayName = `withTheme(${name})`;

  // Tell React to pass the "ref" to ThemedComponent.
  return React.forwardRef(ThemedComponent);
}

const fancyButtonRef = React.createRef();

// fancyButtonRef will now point to FancyButton
f3c9e20fcfb699cb163492c96d8d5bf1;

Hook du cycle de vie des composants Modifications

Classe de React L'API des composants existe depuis des années avec peu de changements. Mais à mesure que nous ajoutons la prise en charge de fonctionnalités plus avancées, telles que les limites d'erreur et le prochain mode de rendu asynchrone, nous étendons ce modèle d'une manière qui n'était pas prévue à l'origine.

Par exemple, dans l'API actuelle, il est très simple d'empêcher le rendu initial par des moyens inhabituels. Cela est dû en partie au fait qu'il existe de nombreux crochets pour accomplir cette tâche donnée, et il n'est pas clair lequel est le meilleur. Nous avons remarqué que le comportement d'interruption de la gestion des erreurs n'est souvent pas pris en compte et peut entraîner des fuites de mémoire (cela affectera également le prochain mode de rendu asynchrone). L'API actuelle du composant de classe complique également d'autres tâches, telles que le travail de notre optimiseur de code (Prepack).

componentWillMount, componentWillReceiveProps, componentWillUpdateCes hooks peuvent facilement causer des problèmes et perturber sérieusement le cycle de vie de React. Pour ces raisons, nous déprécions ces méthodes au profit de meilleures alternatives.

Nous reconnaissons que ce changement aura un impact sur de nombreux composants existants. Par conséquent, le chemin de migration sera aussi fluide que possible et des options de migration seront proposées. (Chez Facebook, nous avons plus de 50 000 composants React. Nous nous appuyons également sur un cycle de publication progressif !

REMARQUE

Les avertissements de dépréciation seront activés dans les futures versions de React16 et sont conservés jusqu'à ce que 17 est publié.

Même dans React17, ils peuvent toujours être utilisés, mais ils seront préfixés par "UNSAFE_" pour indiquer qu'ils peuvent causer des problèmes. Nous avons également préparé un script automatisé pour cela. code existant

En plus de déprécier les hooks de cycle de vie dangereux, nous avons également ajouté de nouveaux hooks de cycle de vie :

getDerivedStateFromProps pour componentWillReceiveProps

getSnapshotBeforeUpdate , utilisé pour lire en toute sécurité les propriétés du DOM avant la mise à jour. Le composant

StrictMode est spécifiquement conçu pour exposer les problèmes potentiels. Comme

,

ne sera pas affiché dans une vue. et des avertissements pour ses composants enfants Remarque 8a50a6ab2ed5f48935ba47798a0657e420b482145aa8764fe95d208d18a8c1ba<.>Les vérifications ne s'exécutent qu'en mode développement ; elles n'affecteront pas les versions de production 50449077873ac5e8cb1383836e576ad1

Bien que le mode strict puisse ne pas détecter tous les problèmes (tels que comme certains types de falsification), cela peut être très utile aux gens. Si vous voyez des avertissements en mode strict, ces éléments provoquent probablement des erreurs de rendu asynchrone.

Dans la version 16.3, StrictMode aide à :

1. Identifier les composants avec des hooks de cycle de vie dangereux.

2. Avertissement concernant l'utilisation de l'ancienne API de référence de chaîne.

3. Détecter les effets secondaires inattendus

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!