Обновите ReactJS.NET 5.0.0 и React 16.8 для проекта ASP.NET, часть 2. Используйте синтаксис ES6.

Введение

О настройке окружения мы упоминали в предыдущей статье.

Второй этап обновления проекта — рефакторинг компонента React с синтаксисом ES6. Мы можем преобразовать компонент в компонент класса или компонент функции, что зависит от свойства компонента.

В этой статье будет представлена фаза 2 — использование синтаксиса ES6. Он включает в себя следующие пункты.

Реагировать компоненты
Жизненный цикл компонента класса React?
Рефакторинг классов React с синтаксисом ES6 автоматически
Чистые предупреждения от Eslint

1. Реагировать компонент

Компонент класса

Компонент класса является классом ES6 и расширяет React.Component. Простой компонент Class должен содержать render.
Мы называем компонент класса компонентом состояния, поскольку он может содержать состояния и функции жизненного цикла.

Превратите функции в стрелочные функции

Функция стрелки помогает нам улучшить код, сделать его более понятным и читаемым. Однако у него есть несколько свойств, на которые мы должны обратить внимание.

Свойства

У стрелочной функции нет this, arguments, super, new.target. Он улавливает это из поезда прицела.
Мы не можем использовать apply, call, bind, чтобы назначить это функции стрелки.

Не

Не используйте функцию стрелки в качестве конструктора.
Не определяйте функции в буквальном объекте.
Не определяйте функции для свойств прототипа.

Функциональная составляющая

Функциональный компонент использует функцию стрелки ES6. Мы не можем использовать состояния и функции жизненного цикла.
Мы можем использовать компоненты без сохранения состояния, если хотим только отображать страницу. Однако нам не подходит его использование, если нам все еще нужно поддерживать локальное состояние в компоненте.
Он будет потреблять меньше ресурсов, чем компонент класса.

2. Жизненный цикл компонента React Class?

Жизненный цикл компонента React Class состоит из трех фаз.

установлен

Функции будут выполняться при рендеринге компонента.

конструктор()
— здесь начальные состояния.
— здесь связываются методы с этим.
componentWillMount (UNSAFE_componentWillMount())
— он будет удален в ReactJS 17.
— он будет выполняться один раз перед выполнением рендеринга.
getDerivedStateFromProps(props, state):
— Обновить состояния на основе реквизитов. Вернуть объект, если мы хотим обновить состояния.
- Вот официальный пример.
render()
— не вызывайте setState здесь.
componentDidMount()
-Выполняется один раз после выполнения render().
- Вызов выборки, AJAX
- Примечание: не вызывайте setState() здесь . Вызовите setState(), если условные операторы

Вот пример казни.

Обновлено

Функции будут выполняться при рендеринге компонента.

componentWillReceiveProps(UNSAFE_componentWillReceiveProps(nextProps))
— будет удален в ReactJS 17.
getDerivedStateFromProps(props, state):
— Обновить состояния на основе реквизитов. Вернуть объект, если мы хотим обновить состояния.
- Вот официальный пример.
shouldComponentUpdate(nextProps, nextState):
— Возвращает true, если мы хотим выполнить повторный рендеринг при обновлении состояний. Значение по умолчанию верно.

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

componentWillMount (UNSAFE_componentWillMount())
— он будет удален в ReactJS 17.
— он будет выполняться один раз перед выполнением render().
оказывать()
getSnapshotBeforeUpdate (prevProps, prevState)
componentDidUpdate (prevProps, prevState, моментальный снимок)

Размонтированный

componentWillUnmount()
— Делать что-то, когда элемент размонтирован, например удалить привязку, очистить cookie или localStorage.

3. Рефакторинг классов React с синтаксисом ES6 автоматически

Мы можем использовать инструменты, которые помогут нам автоматически реорганизовать классы React с синтаксисом ES6.

Установите jscodeshift и react-codemd

npm install -g jscodeshift
git clone https://github.com/reactjs/react-codemod.git
cd react-codemod
npm install

Проверьте версию jscodeshift

jscodeshift --version

Версия, которую я использовал, похожа на следующий снимок экрана.

Используйте следующие команды для рефакторинга кода

jscodeshift -t react-codemod/transforms/class.js <your file or folder's name> --explicit-require=false --no-babel --verbose 2

Примечание об использовании jscodeshift

Он работает для «React.createClass» вместо «react.createClass».
Исправьте удаленные устаревшие вызовы API, такие как getDOMNode, isMounted, replaceProps, replaceState и setPropsbefore, перед использованием jscodeshift.
Для файлов JSX вы можете использовать —extension, чтобы указать расширение файла

jscodeshift -t react-codemod/transforms/class.js <your file or folder's name> --explicit-require=false --no-babel --verbose 2 --extension=jsx

4.Убрать предупреждения от Eslint

Eslint существует в Visual Studio 2019 по умолчанию. Это может дать нам предупреждения. Мы также можем изменить правила из C:\Users\User\.eslintrc по запросу.

Следующие правила являются значениями значений.

0: выкл. Отключите правило.
1: Предупредить. Включите правило в качестве предупреждения. Не влияет на код выхода.
2: Ошибка. Включите правило как ошибку. Код выхода равен 1 при срабатывании.

Вот несколько предупреждающих сообщений, которые я получил при рефакторинге.

1. Компонент [ESlint] xxx следует размещать после компонента componentwillunmount.

Правило: реагировать/сортировать-комп.
Описание: конфигурация по умолчанию обеспечивает следующий порядок.
1. статические методы и свойства
2. методы жизненного цикла
3. пользовательские методы
4. метод рендеринга
Автоматическое решение: используйте jscodeshift

jscodeshift -t react-codemod/transforms/sort-comp.js <your file or folder's name> --explicit-require=false --no-babel --verbose 2

2.[ESlint] Объявлять только один компонент в файле

Правило: реагировать/не использовать несколько композиций
Решение: установите значение 0.

использованная литература

Резюме

Спасибо за вашего пациента. Я Шон. Я работаю инженером-программистом.

Эта статья — моя заметка. Пожалуйста, не стесняйтесь дать мне совет, если какие-либо ошибки. Я с нетерпением жду ваших отзывов.

Похлопайте, если эта статья поможет вам. Спасибо.

Вы также можете подписаться на мою страницу в Facebook.

Профан
Профан. 4 лайка. Страница с информацией о программном обеспечении, фотографии и кофеwww.facebook.com