Новые улучшения JSX в React 17

Что нового в JSX в React 17 и почему вам это должно быть небезразлично

Релиз React 17 уникален. Вы вряд ли заметите какие-либо новые функции. Однако вы можете найти несколько значительных улучшений в ядре React. Из них изменения для JSX весьма заметны.

В этой статье будут обсуждаться улучшения JSX, их мотивы и то, что должен знать каждый разработчик перед обновлением до React 17.

Прежде всего, давайте посмотрим на изменения, которые вы испытаете со стороны.

Видимые изменения для разработчиков

Поверхностное изучение React 17 наверняка вас не впечатлит. Самое интересное - это не новые функции, а способ компиляции React.

Чтобы лучше понять это, давайте посмотрим на скомпилированный код JSX в компоненте, который использует более старую версию React.

Вы могли заметить, что в скомпилированной версии используется React.createElement, где в области должна быть доступна зависимость React. Вот почему вам нужно импортировать React в первую очередь в каждый из компонентов.

Теперь давайте посмотрим, как это работает с React 17.

С React 17 вам не нужен импорт React для JSX.

Надеюсь, это дает понять, что скомпилированная версия не требует импорта React. Как вы можете видеть на следующем изображении, компилятор React 17 импортирует новую зависимость из react/jsx-runtime, которая обрабатывает преобразование JSX.

Поэтому, как разработчики, после обновления до React 17 вы можете удалить импорт React из кода вашего компонента, если он существует только для JSX.

Но разве это единственное изменение и имеет ли оно значение?

Как вы уже заметили, со стороны эффект кажется несущественным.

Важно понимать, что общий эффект будет заметен, если в вашей кодовой базе будет больше компонентов React.

Чтобы лучше понять влияние, давайте посмотрим, почему удаление зависимости с React.createElement имеет значение для JSX.

Преимущества удаления React.createElement

Уменьшение размера пакета

После удаления импорта React размер скомпилированного связанного вывода станет немного меньше. Надеюсь, это станет очевидным, поскольку нам нужно удалить импорт React из каждого из компонентов, где компилятор заменяет его подмодулем в React, как показано ниже.

import {jsx as _jsx} from 'react/jsx-runtime';

Совместное использование компонентов стало немного проще

Это может показаться неважным, но всякий раз, когда вы делитесь компонентами React из проекта React в Bit.dev или публикуете компоненты в NPM, вам всегда нужно убедиться, что react не настроен как dependency , а как peerDependency. Это сделано для уменьшения размера пакета ваших компонентов и предотвращения случаев, когда React устанавливается несколько раз с разными версиями (при использовании общих компонентов в приложении).

Уменьшение динамического поиска свойств

Поскольку React 17 больше не использует React.createElement для JSX, отпадает необходимость в динамическом поиске свойств. Как обсуждалось ранее, вы можете найти это в скомпилированной версии кодовой базы внешнего интерфейса.

Однако прирост производительности здесь очень минимален, и вы почти не заметите разницы.

Это потому, что современные движки JavaScript оптимизированы в основном для динамического поиска свойств.

Улучшения, связанные с Props, Args и KeyRef

Что ж, я просто хотел сказать вам, что эти улучшения существуют в React 17.

Однако улучшения слишком технические, чтобы вдаваться в подробности. Если вам интересно, вы можете прочитать о них в create-element-changes в разделе Мотивация.

Так нужен ли нам React.createElement с React 17?

Подожди. Вам все равно понадобится метод React.createElement, если вы создаете динамические элементы вне JSX.

Если вам нужно создать элементы в коде вручную, продолжайте использовать React.createElement.

Кроме того, вы можете задаться вопросом, разве мы все еще не используем react/jsx-runtime для JSX в качестве замены React.createElement на React 17, и исправлены ли там эти проблемы? Короче да!

Когда мы смотрим на новый react/jsx-runtime, он вносит несколько изменений в дизайн, чтобы избежать узких мест, которые появились в React.createElement методе. Некоторые из этих изменений вносятся для развития архитектуры в будущем.

О них вы можете прочитать по той же ссылке create-element-changes в разделе Детальный дизайн.

Что еще я должен знать как разработчик?

Что ж, это не что иное, как уведомления о прекращении поддержки. Было несколько уведомлений, о которых вам следует знать при изменении React 17 JSX.

Устарели компоненты "шаблон модуля"

const Foo = (props) => {
  return {
    onClick() {
      //...
    }
    render() {
      return <div onClick={this.onClick.bind(this)} />;
    }
  }
};

Однако проще выполнить обновление, выполнив два упомянутых ниже изменения.

1. Используйте выражение функции вместо функции стрелки.
2. Добавьте прототип с isReactComponent, чтобы сообщить React различать классы и функциональные компоненты.

Результат выглядит следующим образом.

function Foo(props) {
  return {
    onClick() {
      //...
    }
    render() {
      return <div onClick={this.onClick.bind(this)} />;
    }
  }
};
Foo.prototype = { isReactComponent: true};

Точно так же будут уведомления об устаревании для;

• Устарело defaultProps на функциональных компонентах.
• Устарел ключ распространения от объектов.
• Устарели строковые ссылки (и удалите поле _owner рабочего режима).

О них вы можете прочитать по той же ссылке create-element-changes в разделе Детальный дизайн.

Однако эти предупреждения не являются препятствием для перехода на React 17. У вас также будет время до следующей основной версии, чтобы обновить их.

Заключение

Хорошая новость о преобразовании JSX заключается в том, что он обратно совместим с минимальными изменениями для обновления до React 17. Но я чувствую, что влияние могло быть лучше, поскольку текущие улучшения вряд ли заметны в реальном мире.

Однако также важно понимать, что большинство этих улучшений помогут ускорить выпуск будущих выпусков. Таким образом, обновление до React 17 сделает вашу кодовую базу надежной в будущем. И вам не нужно напоминать себе о необходимости сохранять импорт React в своих файлах JSX.

Кроме того, если вы обновляете старую версию, стоит обратиться к уведомлениям об устаревании, чтобы избежать каких-либо проблем в будущем.

Спасибо за чтение, и если у вас есть какие-либо вопросы, задавайте их в комментариях ниже.

Учить больше