Was sind die neuen Funktionen in React 16? Einführung in neue Features und Funktionen von React16

In diesem Artikel werden hauptsächlich einige neue Funktionen von React16 sowie eine detaillierte Funktionseinführung von React16 vorgestellt. Werfen wir einen Blick auf den Hauptinhalt dieses Artikels

React 16-Update

Neue js-Umgebungsanforderungen

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

Neue Funktionen

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

1. Fragmente

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

   Siehe API

2. Fehlergrenzen

   Früher wurde der gesamte Komponentenbaum abgehängt, sobald in einer Komponente ein Fehler auftrat vom Wurzelknoten. React 16 behebt dieses Problem und führt das Konzept der Fehlergrenze ein, das auf Chinesisch als „Fehlergrenze“ übersetzt wird. Wenn in einer Komponente ein Fehler auftritt, können wir den Fehler durch die Fehlergrenze erfassen und ihn elegant behandeln, beispielsweise durch die Verwendung der Fehlergrenze . Der Inhalt ersetzt die Fehlerkomponente. Error Boundary kann als spezielle React-Komponente betrachtet werden. Sie fügt die Lebenszyklusfunktion „componentDidCatch“ hinzu. Sie kann Fehler in sich selbst und ihren Teilbäumen erfassen und ordnungsgemäß verarbeiten, einschließlich der Meldung von Fehlerprotokollen und der Anzeige von Fehleraufforderungen. (Hinweis: Es werden nicht alle Laufzeitfehler erfasst, z. B. Fehler in Komponentenrückrufereignissen. Sie können es sich als herkömmliche Try-Catch-Anweisung vorstellen.)

   Übung:

   Abstrakte Überprüfung von Fehlern Grenze Öffentliche Komponente:

   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
       }
   }

   Erstellen Sie eine einfache untergeordnete Komponente, die Fehler enthält:

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

   Verwenden Sie die Fehlerrahmenkomponente, um Komponenten zu umschließen, die möglicherweise schiefgehen.

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

   Beim Umschließen durch die Fehlerrahmenkomponente Wenn in einer untergeordneten Komponente ein Fehler auftritt, wird die fehlerhafte Komponente durch die Zeichenfolge „diese oder ihre untergeordneten Komponenten haben einen Fehler“ ersetzt, ohne dass der gesamte Komponentenbaum entladen wird. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der chinesischen PHP-Website, um mehr zu erfahren)

3. Portals

   Portals bietet eine Premiere -class-Methode zum Rendern untergeordneter Elemente in DOM-Knoten außerhalb der DOM-Hierarchie der übergeordneten Komponente.

   ReactDOM.createPortal(
     child,
     container
   );

   Der erste Parameter (Kind) ist ein beliebiges renderbares React-Kindelement wie Element, String oder Fragment. Der zweite Parameter (Container) ist ein DOM-Element.

   Wenn Sie ein Element von der Render-Methode einer Komponente zurückgeben, wird es normalerweise als untergeordnetes Element des nächstgelegenen übergeordneten Knotens in das DOM geladen:

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

   Manchmal wird das untergeordnete Element jedoch eingefügt Andere Orte im DOM, die nützlich wären:

   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,
     );
   }

   Einzelheiten zu Portalen und deren Event-Bubbling finden Sie auf der offiziellen Website und in CodePen-Beispielen

4. benutzerdefinierte DOM-Attribute

   Unterstützt nicht standardmäßige benutzerdefinierte DOM-Attribute. In früheren Versionen konnten benutzerdefinierte Attribute nur im data-*-Format hinzugefügt werden Die Änderung ermöglicht es React, die Whitelist von Attributen zu entfernen und dadurch die Dateigröße zu reduzieren. Wenn das vom DOM übergebene benutzerdefinierte Attribut jedoch ein Funktionstyp oder ein Ereignishandlertyp ist, wird es von React ebenfalls ignoriert.

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

5. verbessertes serverseitiges Rendering

   Verbesserte serverseitige Rendering-Leistung, der SSR von React 16 wurde komplett neu geschrieben, die neue Implementierung ist sehr schnell, fast dreimal so viel Leistung React 15 bietet jetzt einen Streaming-Modus, der gerenderte Bytes schneller an den Client senden kann.

Breaking Changes

• Planungs- und Lebenszyklusänderungen

• Der Aufruf von setState gibt null zurück Das Rendern wird nicht aktualisiert, sodass Sie entscheiden können, ob Sie die Aktualisierung in der Aktualisierungsmethode durchführen möchten.

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

• Der Aufruf von setState in der Render-Methode führt immer zu einer Aktualisierung. Frühere Versionen haben dies nicht unterstützt, aber versuchen Sie, setState nicht im Render aufzurufen.

• Die Rückruffunktion von setState wird sofort nach der Ausführung von ComponentDidMount/ ComponentDidUpdate ausgeführt, nicht nachdem alle Komponenten gerendert wurden.

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

1. ReactDOM.render() und ReactDom.unstable_renderIntoContainer() geben null zurück, wenn sie in der Lebenszyklusfunktion aufgerufen werden. Um diese Art von Problem zu lösen, können Sie Portale oder Refs verwenden

2. setState-Änderungen:

3. Wenn zwei Komponenten <A /> und <B / > ;Wenn eine Ersetzung erfolgt, wird B.componentWillMount immer vor A.componentWillUnmount ausgeführt, und davor kann A.componentWillUnmount im Voraus ausgeführt werden.

4. In früheren Versionen wurden beim Ändern der Referenz einer Komponente Referenz und Dom getrennt, bevor die Rendermethode der Komponente aufgerufen wurde. Jetzt verzögern wir die Änderung von ref, bis das dom-Element geändert wird und der ref nicht vom dom getrennt wird.

5. Es ist nicht sicher, den Container mit anderen Methoden als React erneut zu rendern. Dies hat möglicherweise in früheren Versionen funktioniert, wir sind jedoch der Meinung, dass dies nicht unterstützt wird. Für diesen Fall geben wir nun eine Warnung aus und Sie müssen ReactDOM.unmountComponentAtNode verwenden, um Ihren Knotenbaum zu löschen.

   ReactDOM.render(<App />, p);
   p.innerHTML = 'nope';
   ReactDOM.render(<App />, p);//渲染一些没有被正确清理的东西<p>Und Sie benötigen: </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

   Dieses Problem anzeigen

6. Der ComponentDidUpdate-Lebenszyklus akzeptiert den prevContext-Parameter nicht mehr.

7. Die Verwendung nicht eindeutiger Schlüssel kann zur Duplizierung oder zum Verlust von Unterkomponenten führen. Die Verwendung nicht eindeutiger Schlüssel wird nicht unterstützt und wurde auch nie unterstützt, war jedoch zuvor ein schwerwiegender Fehler.

8. Der flache Renderer löst „componentDidUpdate()“ nicht mehr aus, da DOM-Refs nicht verfügbar sind. Dadurch ist es auch konsistent mit dem Aufruf von „componentDidMount()“ in früheren Versionen.

9. Shallow Renderer unterstützt unstable_batchedUpdates() nicht mehr.

10. ReactDOM.unstable_batchedUpdates hat jetzt nur noch einen zusätzlichen Parameter nach dem Rückruf.

Die Namen und Pfade für Einzeldatei-Browserversionen wurden geändert, um die Unterschiede zwischen Entwicklungs- und Produktionsversionen hervorzuheben

• react/dist/react.js → reagieren/umd/react.development.js

• react/dist/react.min.js → reagieren/umd/react.produktion.min . js

• react-dom/dist/react-dom.js → reagieren-dom/umd/react-dom.development.js

• reagieren-dom/dist/react-dom.min.js → reagieren-dom/umd/react-dom.produktion.min.js

Den Server-Renderer neu schreiben und verbessern

• Das Server-Rendering verwendet keine Markup-Validierung mehr und hängt stattdessen nach bestem Wissen und Gewissen an das vorhandene DOM an, um vor Inkonsistenzen zu warnen. Außerdem werden keine leeren Komponenten und Anmerkungen mehr für Datenrückmeldungseigenschaften auf jedem Knoten verwendet.

• Es gibt jetzt eine explizite API für Server-Rendering-Container. Verwenden Sie ReactDOM.hydrate anstelle von ReactDOM.render, wenn Sie vom Server gerendertes HTML wiederherstellen. Verwenden Sie ReactDOM.render weiterhin, wenn Sie nur clientseitiges Rendern durchführen.

Wenn eine unbekannte Eigenschaft an eine DOM-Komponente übergeben wird, rendert React sie im DOM, wenn es sich um einen gültigen Wert handelt. Dokumentation anzeigen

Fehler in Render- und Lebenszyklusfunktionen entladen standardmäßig den gesamten DOM-Baum. Um dies zu verhindern, können Sie Fehlergrenzen an den entsprechenden Stellen in der Benutzeroberfläche hinzufügen.

VERALTET

• react-with-addons.js wird nicht mehr erstellt, alle kompatiblen Addons werden separat auf npm veröffentlicht, falls Sie sie benötigen sind Einzeldatei-Browserversionen verfügbar.

• Die veraltete Version 15.x wurde aus dem Kernpaket entfernt, React.createClass ist jetzt als create-react-class verfügbar, React.PropTypes ist als prop-types verfügbar, React .DOM wird als React-Dom-Factories, React-Addons-Test-Utils als React-Dom/Test-Utils und Shallow Renderer als React-Test-Renderer/Shallow verwendet. Siehe die Dokumentationsreferenzen 15.5.0 und 15.6.0.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte React User Manual auf der chinesischen PHP-Website, um mehr zu erfahren). Wenn Sie Fragen haben, können Sie diese unten stellen. Hinterlassen Sie eine Nachricht mit einer Frage.

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen in React 16? Einführung in neue Features und Funktionen von React16. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!