3 ошибки новичка в React, которые могут испортить ваше приложение

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

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

1. Использование неправильного типа функции обратного вызова

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

Рассмотрим, например, следующий компонент:

экспортпо умолчаниюфункцияПриложение() {
функцияручкаОтправить(е) {
 e.preventDefault()
консоль.бревно("Форма отправлена!")
 }
функцияРаспечатать(число) {
консоль.бревно("Распечатать", число)
 }
функцияудвоитель(число) {
возвращаться() => {
консоль.бревно("Двойной", число * 2)
 }
 }
возвращаться (
 <>
 {/* Здесь будет код */}
 </>
 )
}

Здесь у вас есть три отдельные функции. Хотя первые две функции ничего не возвращают, третья возвращает другую функцию. Вы должны помнить об этом, потому что это будет ключом к пониманию того, что вы будете изучать дальше.

Теперь, переходя к JSX, давайте начнем с первого и наиболее распространенного способа передачи функции в качестве обработчика событий:

<формаonSubmit={handleSubmit}>
<входтип="текст"имя="текст"значение по умолчанию="исходный"/>
<кнопка>Представлять на рассмотрениекнопка>
форма>

В этом примере имя функции передается событию через свойство onSubmit, поэтому React вызывает handleSubmit, когда вы отправляете форму. Внутри handleSubmit вы можете получить доступ к объекту события, который дает вам доступ к таким свойствам, как событие.цель.значение и такие методы, как событие.preventDefault().

Второй способ передать функцию обработчика событий — вызвать ее внутри функции обратного вызова. По сути, вы передаете onClick функцию, которая вызывает print() для вас:

{[1, 5, 7].карта((число) => {
возвращаться (
 напечатать (число)}>
 Распечатать {число}
 </button>
 )
})}

Этот метод полезен в сценариях, когда вы хотите передать функции локальные данные. В приведенном выше примере каждое число передается функции print(). Если бы вы использовали первый метод, вы бы не смогли передать аргументы в функцию.

Третий метод заключается в том, что многие разработчики делают много ошибок. Напомним, что функция удвоения возвращает другую функцию:

функцияудвоитель(число) {
возвращаться() => {
консоль.бревно("Двойной", число * 2)
 }
}

Теперь, если вы использовали его в JSX так:

{[1, 5, 7].карта((число) => {
возвращаться (
 удвоитель (число)}>
 Двойной {число}
 </button>
 )
})}

В этом случае функция, которую вы возвращаете из двойной() это то, что назначается onClick. По сути, это то же самое, что скопировать возвращаемую функцию и вставить ее в onClick. Этот последний метод не имеет варианта использования. В большинстве случаев вам лучше добавить функцию как переменную (первый метод) или вызвать функцию внутри обратного вызова (второй метод).

Все три метода допустимы, потому что во всех случаях вы передаете функцию событию. В React вам нужно убедиться, что вы передаете функцию свойству события. Это может быть переменная, жестко закодированная функция (встроенная) или объект/функция, которая возвращает другую функцию.

2. Вывод нуля при ложной проверке

Когда ты условное отображение элемента в React, вы можете использовать оператор if...else или технику короткого замыкания. Короткое замыкание предполагает использование двойного амперсанда (&&). Если условие перед амперсандом оценивается как истинное, браузер запускает код, следующий за амперсандом. Если нет, то браузер не выполняет никакого кода.

Короткое замыкание — лучший метод благодаря его лаконичному синтаксису, но он имеет побочный эффект, который многие разработчики не замечают. Эта ошибка возникает из-за непонимания того, как именно JSX работает с ложными значениями.

Рассмотрим следующий код:

экспортпо умолчаниюфункцияПриложение() {
константа массив = [1, 2, 3, 4]
возвращаться (


 {массив.длина && (


Множество предметы:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Пока в массиве есть что-то внутри, React будет печатать каждый элемент на странице. Это из-за массив.длина check возвращает истинное значение. Но что произойдет, если ваш массив пуст? Во-первых, последующие элементы будут отображаться на странице, чего и следовало ожидать. Однако вы обнаружите, что на вашем экране появляется странный ноль.

Причина в том, что массив.длина возвращает ноль. Нулевое значение является ложным в JavaScript. И проблема в том, что JSX рендерит ноль на экране. Другие ложные значения, такие как null, false и undefined, не отображаются. Это может привести к плохому взаимодействию с пользователем, поскольку на странице всегда будет отображаться ноль. Иногда ноль может быть настолько мал, что вы его даже не замечаете.

Решение состоит в том, чтобы убедиться, что возвращается только null, undefined или false. Вы делаете это, явно проверяя ноль в условии вместо того, чтобы полагаться на ложное значение:

экспортпо умолчаниюфункцияПриложение() {
константа массив = [1, 2, 3, 4]
возвращаться (


 {массив.длина!== 0 && (


Множество предметы:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Теперь нулевое значение не будет отображаться на экране, даже если массив пуст.

3. Невозможно правильно обновить состояние

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

Эта ошибка возникает из-за непонимания того, как обновить состояние, когда вы используете существующее состояние. Например, рассмотрим следующий код:

экспортпо умолчаниюфункцияПриложение() {
константа [массив, setArray] = useState([1, 2, 3])
функцияадднумбертостарт() {
 array.unshift (число)
 setArray (массив)
 }
функцияадднумбертоэнд() {
 array.unshift (число)
 setArray (массив)
 }
возвращаться (
 <>
 {массив.присоединиться(", ")}


 onClick={() => {
 добавить номер в начало (0)
 добавитьЧислоВ Конец(0)
консоль.log (массив)
 }}
 >
 Добавлять 0 к началу/концу
 </button>
 </>
 )
}

Если бы вы запустили приведенный выше код, вы бы заметили, что обе функции добавляют ноль к началу и концу массива. Но он не добавил нули в массив, напечатанный на странице. Вы можете продолжать нажимать кнопку, но пользовательский интерфейс остается прежним.

Это потому, что в обеих функциях вы изменяете свое состояние с помощью массив.push(). React явно предупреждает, что состояние должно быть неизменным в React, то есть вы вообще не можете его изменить. React использует ссылочные значения со своим состоянием.

Решение состоит в том, чтобы получить доступ к текущему состоянию (currentArray), сделать копию этого состояния и внести свои обновления в эту копию:

функцияадднумбертостарт(число) {
 установить массив ((текущий массив) => {
возвращаться [число,... текущий массив]
 })
}
функцияадднумбертостарт(число) {
 установить массив ((текущий массив) => {
возвращаться [...текущий массив, число]
 })
}

Это правильный метод обновления состояния в React. Теперь, когда вы нажимаете кнопку, она добавляет ноль к началу и концу массива. Но самое главное, обновления сразу же отразятся на странице.

Другие важные концепции JavaScript для React

В этой статье были рассмотрены некоторые распространенные ошибки, которых следует избегать при написании кода в React. Все три описанные здесь ошибки связаны с неправильным пониманием JavaScript. Поскольку React — это среда JavaScript, вам потребуется хорошее понимание JavaScript для работы с React. Это означает изучение важных концепций, которые больше всего относятся к разработке React.