Quelles sont les nouveautés de React 16 ? Introduction aux nouvelles fonctionnalités et fonctions de React16

Cet article présente principalement quelques nouvelles fonctionnalités de react16, ainsi qu'une introduction détaillée des fonctions de réagir16. Jetons un coup d'œil au contenu principal de cet article

Mise à jour de React 16

Nouvelles exigences de l'environnement js

react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）

Nouvelles fonctionnalités

- Fragments：render函数可以返回数组和字符串
- error boundaries：错误处理
- portals ：支持声明性地将子树渲染到另一个DOM节点
- custom DOM attributes ：ReactDom允许传递非标准属性
- improved server-side rendering:提升服务端渲染性能

1. Fragments

   render() {
     return [
       <li key="A"/>First item</li>,
       <li key="B"/>Second item</li>,
       <li key="C"/>Third item</li>,
     ];
   }

   Voir l'API pour plus de détails

2. limites d'erreur

   Avant, une fois qu'une erreur se produit dans un composant, l'intégralité de l'arborescence des composants sera démontée du nœud racine. React 16 corrige ce problème et introduit le concept de limite d'erreur, qui est traduit par « limite d'erreur » en chinois. Lorsqu'une erreur se produit dans un composant, nous pouvons capturer l'erreur via la limite d'erreur et la gérer avec élégance, par exemple en utilisant la limite d'erreur. . Le contenu remplace le composant d'erreur. Error Boundary peut être considéré comme un composant React spécial. Il dispose d'une nouvelle fonction de cycle de vie, composantDidCatch, qui peut capturer les erreurs sur lui-même et ses sous-arborescences et les gérer avec élégance, notamment en signalant les journaux d'erreurs et en affichant des invites d'erreur. (Remarque : il ne capture pas toutes les erreurs d'exécution, telles que les erreurs dans les événements de rappel de composants. Vous pouvez le considérer comme une instruction try-catch traditionnelle)

   Pratique :

   Vérification abstraite des erreurs Limite composant public :

   class ErrorBoundary extends React.Component{
       constructor(props){
           super(props);
           this.state=({
               ifError:false
           });
       }
   
       componentDidCatch(err, info) {
           this.setState({ ifError: true })
           console.log(err);
       }
   
       render(){
           if(this.state.ifError){
               return `this or its children has error`;
           }
           return this.props.children
       }
   }

   Créez un composant enfant simple contenant des erreurs :

   class ErrorComponent extends React.Component{
       render(){
           const str = '123';
           return str.toFixed(2);
       }
   }

   Utilisez un composant de bordure d'erreur pour envelopper le composant susceptible de mal fonctionner

   class MainShowComponent extends React.Component{
       render(){
           return (
               <p>
                   <ErrorBoundary>
                       <ErrorComponent/>
                   </ErrorBoundary>
               </p>
           )
       }
   }

   Lorsqu'une erreur se produit dans un composant enfant enveloppé par un composant de limite d'erreur, le composant d'erreur sera remplacé par une chaîne : celui-ci ou ses enfants ont une erreur, sans provoquer le déchargement de l'ensemble de l'arborescence des composants. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois React Reference Manual pour en savoir plus)

3. Portails

   Les portails fournissent un premier -class pour restituer les enfants vers des nœuds DOM en dehors de la hiérarchie DOM du composant parent.

   ReactDOM.createPortal(
     child,
     container
   );

   Le premier paramètre (enfant) est tout élément enfant React rendu tel qu'un élément, une chaîne ou un fragment. Le deuxième paramètre (conteneur) est un élément DOM.

   Normalement, lorsque vous renvoyez un élément depuis la méthode de rendu d'un composant, il sera chargé dans le DOM en tant qu'enfant du nœud parent le plus proche :

   render() {
     // React mounts a new p and renders the children into it
     return (
       <p>
         {this.props.children}
       </p>
     );
   }

   Cependant, parfois l'enfant Insertion vers d'autres emplacements du DOM serait utile :

   render() {
     // React does *not* create a new p. It renders the children into `pNode`.
     // `pNode` is any valid DOM node, regardless of its location in the DOM.
     return React.createPortal(
       this.props.children,
       pNode,
     );
   }

   Pour plus de détails sur les portails et leurs événements bouillonnants, consultez le site officiel et les exemples CodePen

4. attributs DOM personnalisés

   Prise en charge des attributs DOM personnalisés non standard. Dans les versions précédentes, React ignorerait les attributs HTML et SVG non reconnus. Les attributs personnalisés ne pouvaient être ajoutés que via le formulaire data-*. DOM, ce changement permet à React de supprimer la liste blanche des attributs, réduisant ainsi la taille du fichier. Mais lorsque l’attribut personnalisé passé par le DOM est un type de fonction ou un type de gestionnaire d’événements, il sera également ignoré par React.

   <p a={()=>{}}></p>   //错误

5. rendu côté serveur amélioré

   Améliorer les performances de rendu côté serveur, le SSR de React 16 a été complètement réécrit, la nouvelle implémentation est très rapide, près de 3 fois les performances dans React 15, fournit désormais un mode de streaming qui peut envoyer plus rapidement les octets rendus au client.

Modifications avec rupture

• Modifications de la planification et du cycle de vie

• L'appel de setState renvoie null ne mettra pas à jour le rendu, ce qui vous permet de décider s'il faut mettre à jour dans la méthode de mise à jour.

  this.setState(
      (state)=>{
          if(state.curCount%2 === 0){
              return {curCount:state.curCount+1}
          }else{
              return null;
          }
  
      }
  )

• L'appel de setState dans la méthode de rendu entraînera toujours une mise à jour. Les versions précédentes ne le prenaient pas en charge, mais essayez de ne pas appeler setState dans le rendu.

• La fonction de rappel de setState sera exécutée immédiatement après l'exécution de composantDidMount/componentDidUpdate, pas après que tous les composants soient rendus.

      this.setState(
          (state)=>{
              if(state.curCount%2 === 0){
                  return {curCount:state.curCount+1}
              }else{
                  return null;
              }
  
          },
          ()=>{
              console.log(this.state.curCount);
          }
      )

1. ReactDOM.render() et ReactDom.unstable_renderIntoContainer() renverront null s'ils sont appelés dans la fonction de cycle de vie. Donc pour résoudre ce genre de problème, vous pouvez utiliser des portails ou des refs

2. setState change :

3. Lorsque deux composants <A /> et <B / > ;Lors du remplacement, B.componentWillMount sera toujours exécuté avant A.componentWillUnmount, et avant, A.componentWillUnmount peut être exécuté à l'avance.

4. Dans les versions précédentes, lors de la modification de la ref d'un composant, la ref et le dom étaient séparés avant que la méthode de rendu du composant ne soit appelée. Maintenant, nous retardons le changement de ref jusqu'à ce que l'élément dom soit modifié, et le ref ne sera pas séparé du dom.

5. Il n'est pas sûr de restituer le conteneur en utilisant d'autres méthodes que React. Cela aurait pu fonctionner dans les versions précédentes, mais nous pensons que cela n'est pas pris en charge. Nous émettons maintenant un avertissement pour ce cas et vous devez utiliser ReactDOM.unmountComponentAtNode pour effacer votre arborescence de nœuds.

   ReactDOM.render(<App />, p);
   p.innerHTML = 'nope';
   ReactDOM.render(<App />, p);//渲染一些没有被正确清理的东西<p>Et vous avez besoin de : </p>
   <pre class="brush:php;toolbar:false">ReactDOM.render(<App />, p);
   ReactDOM.unmountComponentAtNode(p);
   p.innerHTML = 'nope';
   ReactDOM.render(<App />, p); // Now it's okay

   Voir ce problème

6. Le cycle de vie de composantDidUpdate n'accepte plus le paramètre prevContext.

7. L'utilisation de clés non uniques peut entraîner la duplication ou la perte de sous-composants n'est pas prise en charge et n'a jamais été prise en charge, mais c'était un bug majeur auparavant.

8. Le moteur de rendu peu profond ne déclenche plus composantDidUpdate() car les références DOM ne sont pas disponibles. Cela le rend également cohérent avec l'appel à composantDidMount() dans les versions précédentes.

9. Le moteur de rendu superficiel ne prend plus en charge unstable_batchedUpdates().

10. ReactDOM.unstable_batchedUpdates n'a désormais qu'un seul paramètre supplémentaire après le rappel.

Les noms et chemins des versions du navigateur de fichiers uniques ont été modifiés pour souligner les différences entre les versions de développement et de production

• react/dist/react.js → réagir/umd/react.development.js

• react/dist/react.min.js → réagir/umd/react.production.min . js

• react-dom/dist/react-dom.js → réagir-dom/umd/react-dom.development.js

• réagir-dom/dist/react-dom.min.js → réagir-dom/umd/react-dom.production.min.js

Réécrire et améliorer le moteur de rendu du serveur

• Le rendu du serveur n'utilise plus la validation du balisage et s'ajoute au DOM existant dans la mesure du possible, avertissant des incohérences. Il n'utilise également plus de composants vides et d'annotations pour les propriétés de retour de données sur chaque nœud.

• Il existe désormais une API explicite pour les conteneurs de rendu serveur. Utilisez ReactDOM.hydrate au lieu de ReactDOM.render si vous restaurez le HTML rendu par le serveur. Continuez à utiliser ReactDOM.render si vous effectuez uniquement un rendu côté client.

Lorsqu'une propriété inconnue est transmise à un composant DOM, React la restituera dans le DOM s'il s'agit d'une valeur valide. Afficher la documentation

Les erreurs dans les fonctions de rendu et de cycle de vie déchargeront l'intégralité de l'arborescence DOM par défaut. Pour éviter cela, vous pouvez ajouter des limites d'erreur aux emplacements correspondants dans l'interface utilisateur.

OBSERVÉ

• react-with-addons.js n'est plus construit, tous les addons compatibles sont publiés séparément sur npm, si vous en avez besoin , des versions de navigateur à fichier unique sont disponibles.

• La dépréciation dans la version 15.x a été supprimée du package principal, React.createClass est désormais disponible en tant que create-react-class, React.PropTypes est disponible en tant que prop-types, React .DOM est utilisé commereact-dom-factories,react-addons-test-utilsestutilisé commereact-dom/test-utils et le moteur de rendu superficiel est utilisé commereact-test-renderer/shallow. Consultez les références de la documentation 15.5.0 et 15.6.0.

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual pour en savoir plus). vous pouvez les poser ci-dessous. Laissez un message avec une question.

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!