Новое JSX преобразование избавляет тебя от необходимости импортировать React для базового использования JSX, тогда как старое преобразование требовало импортировать React в каждый файл с JSX.
Раньше React приходилось явно импортировать, чтобы использовать JSX:
import React from 'react';
function App() {
return <h1>Good morning!!</h1>;
}
JSX компилятор преобразовывал это в:
import React from 'react';
function App() {
return React.createElement('h1', null, 'Good morning!!');
}
Это требовало, чтобы React был в области видимости, даже если ты не использовал его напрямую в коде.
Новое JSX преобразование убирает эту зависимость в простых случаях:
function App() {
return <h1>Good morning!!</h1>;
}
Компилятор теперь генерирует:
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Good morning!!' });
}
Новый подход автоматически импортирует нужную JSX runtime функцию, делая код чище и избавляя от лишних импортов.
Тебе всё ещё нужно явно импортировать React, когда ты используешь хуки или другие возможности React, требующие прямого доступа к React API. Новое преобразование только убирает необходимость импортировать React для базового JSX рендеринга.
Старому JSX transform требовался явный импорт React в каждом файле, содержащем JSX, потому что компилятор преобразовывал JSX в вызовы React.createElement(), которым нужен React в области видимости.
Новый — ещё не проверен сообществом
Вы