Как сделать ваш код обратно совместимым с React 18

Чтобы сделать ваш код обратно совместимым с React 18, вы можете использовать инструмент под названием React codemod. Это инструмент, который автоматически обновляет ваш код до последней версии React, применяя набор предопределенных преобразований.

Вот базовый рабочий процесс использования React codemod, чтобы сделать ваш код совместимым с React 18:

1. Установите React codemod, выполнив следующую команду:

npm install -g react-codemod

2. Перейдите в корневой каталог вашего проекта в терминале.

3. Выполните следующую команду, чтобы применить преобразования, необходимые для совместимости вашего кода с React 18:

react-codemod -t react-codemod/transforms/React-18.js src

Это применит необходимые преобразования ко всем файлам в каталоге src. Вы также можете указать конкретный файл или каталог, заменив src на путь к этому файлу или каталогу.

Примечание. Всегда полезно сделать резервную копию кода перед запуском мода на случай, если что-то пойдет не так.

Пример:

Вот пример того, как вы можете использовать React codemod, чтобы сделать ваш код обратно совместимым с React 18:

Предположим, в вашей кодовой базе есть следующий компонент:

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}

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

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

react-codemod -t react-codemod/transforms/React-18.js src

Это применит необходимые преобразования ко всем файлам в каталоге src. В этом случае трансформация обновит класс MyComponent, расширив класс React.PureComponent вместо React.Component:

import React from 'react';

class MyComponent extends React.PureComponent {
  render() {
    return (
      <div>
        Hello, world!
      </div>
    );
  }
}

По любым вопросам по этому поводу, пожалуйста, пишите мне на [email protected]