محرك تحويل JSX الجديد في مرشح الإصدار 17 من React

يقدم مرشح الإصدار 17 من React طريقة جديدة لتحويل JSX. مع ذلك ، في حزمة ، ليست هناك حاجة إلى React نفسها ، على الرغم من أنها لا تزال ضرورية لاستخدام الخطافات. هذه هي الفائدة الرئيسية للآلية الجديدة. يوجد أدناه ترجمة قصيرة لمقال على مدونة ReactJS .

ما هو تحويل JSX

نظرًا لأن المتصفحات لا تفهم JSX خارج الصندوق ، يعتمد المطورون على برامج التحويل البرمجي مثل Babel أو Typescript لتحويل JSX إلى JS عادي. يقدم React 17 Release Candidate آلية تحويل JSX جديدة اختيارية إلى JS.



فيما يلي الفوائد:

• استخدام JSX دون استيراد React
• اعتمادًا على الإعدادات ، قد تكون الحزمة أصغر قليلاً
• في المستقبل ، ستتوفر الميزات لتبسيط العمل باستخدام رد الفعل

(ربما لم أقم بترجمتها بدقة - ها هو الأصل: سيمكن التحسينات المستقبلية التي تقلل من عدد المفاهيم التي تحتاجها لتعلم React )



الترقية لا تغير JSX نفسها بأي شكل من الأشكال وعمل جميع المترجمين وسيعملون. لا توجد خطط للتخلي عنهم. من المخطط دعم آلية تحويل JSX الجديدة للإصدارات الأقدم من React: 16.x ، 15.x ، 14.x ، فيما يلي تعليمات الترقية.

ما الذي تغير

عملت عملية تحويل JSX القديمة على النحو التالي:



Code

import React from 'react';

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

تحولت إلى

import React from 'react';

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

لكنها ليست رائعة ، وإليك السبب:

• نظرًا لأن JSX يترجم إلى React.createElement ، يجب أن تكون React في النطاق
• هناك عدة خيارات لتحسين السرعة وتبسيط كتل React.createElement

لمعالجة هذا الأمر ، تقدم React 17 نقطتي إدخال جديدتين مخصصتين للاستخدام بواسطة أدوات أخرى مثل Babel و Typescript ، والآن بدلاً من التحويل إلى React.createElement ، يتم استيراد واستدعاء وظائف جديدة من حزمة React.



لنفترض أن الكود الخاص بك يشبه هذا:

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

بعد تحول جديد ، سيبدو كما يلي:

// 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' });
}

الآلية الجديدة لا تستورد React ، على الرغم من أنها لا تزال مطلوبة حتى تعمل الخطافات.



التحويل الجديد متوافق تمامًا مع جميع رموز JSX الحالية ، ولا يتعين عليك تغيير أي شيء. هنا هي التفاصيل التقنية لكيفية JSX جديد تحويل الأعمال.

كيفية الترقية

إذا لم تكن مستعدًا للترقية أو كنت تستخدم JSX لمكتبات أخرى ، فلا تقلق ، فلن تتم إزالة التحويل القديم وسيتم دعمه.



تتطلب الترقية شيئين:

• رد الفعل مع دعم التحول الجديد. حتى الآن هو 17 فقط ، ولكن في المستقبل 16.x و 15.x و 14.x
• مترجم متوافق (انظر أدناه)

إنشاء تطبيق



React سيكون دعم تطبيق React في الإصدار v4.0 وهو الآن قيد الاختبار التجريبي (اعتبارًا من



09/22/2020 ) يستخدم



Next.js Next.js v9.5.3 + بالفعل تحويل React الجديد للإصدارات المتوافقة. يستخدم



Gatsby



Gatsby v2.24.5 + بالفعل تحويل React الجديد للإصدارات المتوافقة.









دعم تكوين Babel اليدوي من الإصدار 7.9.0 وما فوق.



إذا كنت تستخدم ملفاتبابل/ plugin-transform-reaction-jsx:



# npm

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

# yarn

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



إذا كنت تستخدمبابل/ preset-



reaction : # npm

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

# yarn

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



الآن لتحويل JSX ، إلىبابل/ plugin-transform-reaction-jsx و in بابل/ preset-reaction ، الافتراضي هو {"runtime": "classic"} هذا هو الإصدار القديم من التحويل. لتمكين تحويل جديد ، تحتاج إلى خيار {"وقت التشغيل": "تلقائي"}



إذا كنت تستخدمبابل/ رد فعل مسبق:

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

إذا كنت تستخدم ملفات بابل/ plugin-transform-reaction-jsx:

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

اعتبارًا من Babel 8 ، ستكون كلمة "تلقائية" هي الخيار الافتراضي لكلا المكونين الإضافيين. يوجد المزيد من الوثائق التفصيلية هنا @ babel / plugin-transform-reaction-jsx و @ babel / preset- reaction .





ESLint



إذا كان لديك المكون الإضافي eslint-plugin- reaction ، فلن تكون هناك حاجة لقواعد نطاق رد فعل / jsx-الاستخدامات-التفاعل والتفاعل / رد الفعل-في-jsx ويمكن إزالتها.

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

دعم TypeScript لتحويلات JSX منذ الإصدار 4.1 بيتا . دعم



التدفق لتحويلات JSX



من الإصدار 0.126.0 والإصدارات الأحدث.

كيفية استبعاد واردات React غير المستخدمة

نظرًا لأن تحويل JSX الجديد سوف يستورد رد فعل / jsx-runtime تلقائيًا ، لم تعد هناك حاجة إلى React في النطاق لاستخدام JSX. لا تعتبر عمليات الاستيراد غير المستخدمة مهمة ، ولكن إذا كنت تريد إزالتها ، فمن المستحسن استخدام البرنامج النصي codemod.

cd your_project
npx react-codemod update-react-imports

كنتيجة ل:

• قم بإزالة أي واردات غير مستخدمة من React
• سيتم تغيير جميع الواردات مثل import React من "React" إلى استيراد مسمى {useState} من "رد فعل". هذه هي طريقة الاستيراد المفضلة. لن يؤثر Codemod على الواردات مثل الاستيراد * مثل React من "التفاعل" ، وهذا أيضًا استيراد صالح وسيعمل في الإصدار 17 ، ولكن في المستقبل سنطلب منك التخلص منه

الرمز:

import React from 'react';

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

سيتم استبداله بما يلي:

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

إذا كنت تستخدم شيئًا آخر في التفاعل (على سبيل المثال خطاف) ، فسيظهر الاستيراد المسمى في الكود:



Code

import React from 'react';

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

تم استبداله بالرمز:

import { useState } from 'react';

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

ستساعد إزالة الواردات غير المستخدمة في التحضير للإصدارات التالية من React (وليس 17) حيث سيكون هناك دعم لوحدات ES ولن يكون هناك تصدير افتراضي.

شكر وتقدير

نود أن نشكر فرق Babel و TypeScript و Create React App و Next.js و Gatsby و ESLint و Flow لمساعدتهم في دمج محرك تحويل JSX الجديد. نشكر أيضًا مجتمع React على ملاحظاتهم ومناقشاتهم حول RFC .