Clever Geek Handbook

Neue JSX Transformation Engine in React 17 Release Candidate

React 17 Release Candidate bietet eine neue Möglichkeit zur Transformation von JSX. In einem Bundle wird React selbst nicht benötigt, obwohl es immer noch benötigt wird, um Hooks zu verwenden. Dies ist der Hauptvorteil des neuen Mechanismus. Unten finden Sie eine kurze Übersetzung eines Artikels im ReactJS-Blog .



Was ist JSX-Transformation?



Da Browser JSX nicht sofort verstehen, verlassen sich Entwickler auf Compiler wie Babel oder Typescript, um JSX in einfaches JS umzuwandeln. React 17 Release Candidate führt einen neuen, optionalen JSX-zu-JS-Transformationsmechanismus ein.



Hier sind die Vorteile:



  • Verwenden von JSX ohne React Import
  • Abhängig von den Einstellungen kann das Bundle etwas kleiner sein
  • In Zukunft werden Funktionen verfügbar sein, um die Arbeit mit React zu vereinfachen


(Vielleicht habe ich es nicht ganz richtig übersetzt - hier ist das Original: Es wird zukünftige Verbesserungen ermöglichen, die die Anzahl der Konzepte reduzieren, die Sie zum Erlernen von React benötigen. ) Das



Upgrade ändert JSX selbst in keiner Weise und alle Compiler haben funktioniert und werden funktionieren. Es gibt keine Pläne, sie aufzugeben. Es ist geplant, den neuen JSX-Transformationsmechanismus für ältere Versionen von React zu unterstützen: 16.x, 15.x, 14.x. Hier finden Sie die Anweisungen für das Upgrade.



Was hat sich geändert



Die alte JSX-Transformation funktionierte folgendermaßen:



Code 



import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}


Umgewandelt in 



import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}


Aber es ist nicht großartig und hier ist der Grund:





Um dies zu beheben, werden in React 17 zwei neue Einstiegspunkte eingeführt, die von anderen Tools wie Babel und Typescript verwendet werden sollen. Statt in React.createElement zu transformieren, werden jetzt neue Funktionen aus dem React-Paket importiert und aufgerufen.



Angenommen, Ihr Code sah folgendermaßen aus: 



function App() {
  return <h1>Hello World</h1>;
}


Nach einer neuen Transformation sieht es folgendermaßen aus: 



// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}


Der neue Mechanismus importiert React nicht, obwohl er weiterhin benötigt wird, damit die Hooks funktionieren.



Die neue Transformation ist vollständig kompatibel mit allen vorhandenen JSX-Codes. Sie müssen nichts ändern. Hier finden Sie die technischen Details zur Funktionsweise der neuen JSX-Transformation.



So aktualisieren Sie



Wenn Sie nicht bereit sind, ein Upgrade durchzuführen oder JSX für andere Bibliotheken verwenden, machen Sie sich keine Sorgen, die alte Umwandlung wird nicht entfernt und unterstützt.



Das Upgrade erfordert zwei Dinge:



  • Reagieren Sie auf die Version mit neuer Transformationsunterstützung. Bisher sind es nur 17, aber in Zukunft 16.x, 15.x und 14.x.
  • Kompatibler Compiler (siehe unten)


React App erstellen Die React App



erstellen Die Unterstützung für React App wird in Version 4.0 verfügbar sein, jetzt im Beta-Test (Stand



22.09.20 ). Next.js



Next.js v9.5.3 + verwendet bereits die neue React-Umwandlung für kompatible Versionen.



Gatsby



Gatsby v2.24.5 + verwendet bereits die neue React-Transformation für kompatible Versionen.



Hinweis
Gatsby 17.0.0-rc.2, npm update



Manuelle Babel-Konfigurationsunterstützung



ab Version 7.9.0 .



Wenn Sie verwendenbabel/ plugin-transform-react-jsx:



# npm

npm update @babel/core @babel/plugin-transform-react-jsx

# garn

yarn upgrade @babel/core @babel/plugin-transform-react-jsx



Wenn Sie verwendenbabel/ preset-react:



# npm

npm update @babel/core @babel/preset-react

# yarn

yarn upgrade @babel/core @babel/preset-react



Nun zur Transformation von JSX inbabel/ plugin-transform-react-jsx und in babel/ preset-react, der Standardwert ist {"runtime": "classic"} Dies ist die alte Version der Transformation. Um eine neue Transformation zu aktivieren, benötigen Sie die Option {"Laufzeit": "Automatisch"},



wenn Sie verwendenbabel/ voreingestellt reagieren: 



{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}


Wenn Sie verwenden babel/ plugin-transform-react-jsx: 



{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}


Ab Babel 8 ist "automatisch" die Standardeinstellung für beide Plugins. Eine ausführlichere Dokumentation finden Sie hier @ babel / plugin-transform-react-jsx und @ babel / preset -react .



Hinweis
, importSource , . , .



ESLint



Wenn Sie das Eslint-Plugin-React-Plugin haben, werden die Regeln " Reagieren / JSX-Verwendet-Reagieren" und "Reagieren / Reagieren im JSX-Bereich" nicht mehr benötigt und können entfernt werden. 



{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}


TypeScript-



Unterstützung für JSX-Transformationen seit Version 4.1 Beta .



Flow-



Unterstützung für JSX-Transformationen ab Version 0.126.0 .



So entfernen Sie nicht verwendete React-Importe



Da die neue JSX-Transformation react / jsx-runtime automatisch importiert, wird React im Bereich für die Verwendung von JSX nicht mehr benötigt. Nicht verwendete Importe sind nicht kritisch, aber wenn Sie sie entfernen möchten, wird empfohlen, das Codemod-Skript zu verwenden. 



cd your_project
npx react-codemod update-react-imports


Ergebend:



  • Entfernen Sie alle nicht verwendeten React-Importe
  • Alle Importe wie der Import Reagieren von "Reagieren" werden in "Importieren {useState} von" Reagieren "geändert. Dies ist die bevorzugte Importmethode. Codemod hat keine Auswirkungen auf Importe wie import * als React from "react". Dies ist ebenfalls ein gültiger Import und in Version 17 wird es funktionieren. In Zukunft werden wir Sie jedoch bitten, ihn zu entfernen


Der Code: 



import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}


Wird ersetzt durch: 



function App() {
  return <h1>Hello World</h1>;
}


Wenn Sie in der Reaktion etwas anderes verwenden (z. B. einen Hook), wird der benannte Import im Code



Code angezeigt 



import React from 'react';

function App() {
  const [text, setText] = React.useState('Hello World');
  return <h1>{text}</h1>;
}


Ersetzt durch den Code: 



import { useState } from 'react';

function App() {
  const [text, setText] = useState('Hello World');
  return <h1>{text}</h1>;
}


Durch das Entfernen nicht verwendeter Importe können Sie sich auf die nächsten Versionen von React (nicht 17) vorbereiten, in denen ES-Module unterstützt werden und kein Standardexport erfolgt.



Danksagung



Wir möchten den Teams Babel, TypeScript, Create React App, Next.js, Gatsby, ESLint und Flow für ihre Hilfe bei der Integration der neuen JSX-Transformations-Engine danken. Wir danken auch der React-Community für ihr Feedback und ihre Diskussionen zum RFC .


More articles:


All Articles