Последнее обновление 26.05.2023 — Василий Иванов
Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.
Как разработчик React, вы обязательно сделаете несколько ошибок при написании кода с использованием фреймворка. Некоторые из этих ошибок довольно распространены. И из-за их тонкой природы вам может быть трудно идентифицировать эти проблемы для отладки вашего приложения.
Узнайте о трех самых распространенных ошибках React, которые допускают разработчики. Вы можете совершать эти ошибки как начинающий, средний или продвинутый разработчик React. Но узнав о них и их последствиях, вы сможете их избежать и решить.
1. Использование неправильного типа функции обратного вызова
Обработка событий является обычной практикой в React благодаря мощной функции прослушивания событий JavaScript. Возможно, вы хотите изменить цвет кнопки при наведении курсора. Возможно, вы хотите отправить данные формы на сервер при отправке. В обоих этих сценариях вам нужно будет передать функцию обратного вызова событию, чтобы выполнить желаемую реакцию. Именно здесь некоторые разработчики React допускают ошибки.
Рассмотрим, например, следующий компонент:
export default function App() {
function handleSubmit(e) {
e.preventDefault()
console.log("Form submitted!")
}
function print(number) {
console.log("Print", number)
}
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
}
return (
<>
{/* Code will go here */}
</>
)
} Здесь у вас есть три отдельные функции. Хотя первые две функции ничего не возвращают, третья возвращает другую функцию. Вы должны помнить об этом, потому что это будет ключом к пониманию того, что вы будете изучать дальше.
Теперь, переходя к JSX, давайте начнем с первого и наиболее распространенного способа передачи функции в качестве обработчика событий:
<form onSubmit={handleSubmit}>
<input type="text" name="text" defaultValue="initial"/>
<button>Submit</button>
</form> В этом примере имя функции передается событию через свойство onSubmit, поэтому React вызывает handleSubmit, когда вы отправляете форму. Внутри handleSubmit вы можете получить доступ к объекту события, который дает вам доступ к свойствам, таким как event.target.value, и методам, таким как event.preventDefault().
Второй способ передать функцию обработчика событий — вызвать ее внутри функции обратного вызова. По сути, вы передаете onClick функцию, которая вызывает print() для вас:
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => print(number)}>
Print {number}
</button>
)
})} Этот метод полезен в сценариях, когда вы хотите передать функции локальные данные. В приведенном выше примере каждое число передается функции print(). Если бы вы использовали первый метод, вы бы не смогли передать аргументы в функцию.
Третий метод заключается в том, что многие разработчики делают много ошибок. Напомним, что функция удвоения возвращает другую функцию:
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
} Теперь, если вы использовали его в JSX так:
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => doubler(number)}>
Double {number}
</button>
)
})} В этом случае функция, которую вы возвращаете из double(), назначается onClick. По сути, это то же самое, что скопировать возвращаемую функцию и вставить ее в onClick. Этот последний метод не имеет варианта использования. В большинстве случаев вам лучше добавить функцию как переменную (первый метод) или вызвать функцию внутри обратного вызова (второй метод).
Все три метода допустимы, потому что во всех случаях вы передаете функцию событию. В React вам нужно убедиться, что вы передаете функцию свойству события. Это может быть переменная, жестко закодированная функция (встроенная) или объект/функция, которая возвращает другую функцию.
2. Вывод нуля при ложной проверке
Когда вы условно визуализируете элемент в React, вы можете использовать оператор if…else или технику короткого замыкания. Короткое замыкание предполагает использование двойного амперсанда (&&). Если условие перед амперсандом оценивается как истинное, браузер запускает код, следующий за амперсандом. Если нет, то браузер не выполняет никакого кода.
Короткое замыкание — лучший метод благодаря его лаконичному синтаксису, но он имеет побочный эффект, который многие разработчики не замечают. Эта ошибка возникает из-за непонимания того, как именно JSX работает с ложными значениями.
Рассмотрим следующий код:
export default function App() {
const array = [1, 2, 3, 4]
return (
<div>
{array.length && (
<div>
<span>Array items:</span> {array.join(", ")}
</div>
)}
</div>
)
} Пока в массиве есть что-то внутри, React будет печатать каждый элемент на странице. Это связано с тем, что проверка array.length возвращает истинное значение. Но что произойдет, если ваш массив пуст? Во-первых, последующие элементы будут отображаться на странице, чего и следовало ожидать. Однако вы обнаружите, что на вашем экране появляется странный ноль.
Причина этого в том, что array.length возвращает ноль. Нулевое значение является ложным в JavaScript. И проблема в том, что JSX рендерит ноль на экране. Другие ложные значения, такие как null, false и undefined, не отображаются. Это может привести к плохому взаимодействию с пользователем, поскольку на странице всегда будет отображаться ноль. Иногда ноль может быть настолько мал, что вы его даже не замечаете.
Решение состоит в том, чтобы убедиться, что возвращается только null, undefined или false. Вы делаете это, явно проверяя ноль в условии вместо того, чтобы полагаться на ложное значение:
export default function App() {
const array = [1, 2, 3, 4]
return (
<div>
{array.length !== 0 && (
<div>
<span>Array items:</span> {array.join(", ")}
</div>
)}
</div>
)
} Теперь нулевое значение не будет отображаться на экране, даже если массив пуст.
3. Невозможно правильно обновить состояние
Когда вы обновляете состояние в компоненте React, вам нужно делать это правильно, чтобы избежать нежелательных побочных эффектов. Худшие ошибки — это те, которые не вызывают у вас никаких ошибок. Они затрудняют отладку и выяснение проблемы. Плохие обновления состояния, как правило, имеют такой эффект.
Эта ошибка возникает из-за непонимания того, как обновить состояние, когда вы используете существующее состояние. Например, рассмотрим следующий код:
export default function App() {
const [array, setArray] = useState([1, 2, 3])
function addNumberToStart() {
array.unshift(number)
setArray(array)
}
function addNumberToEnd() {
array.unshift(number)
setArray(array)
}
return (
<>
{array.join(", ")}
<br />
<button
onClick={() => {
addNumberToStart(0)
addNumberToEnd(0)
console.log(array)
}}
>
Add 0 to Start/End
</button>
</>
)
} Если бы вы запустили приведенный выше код, вы бы заметили, что обе функции добавляют ноль к началу и концу массива. Но он не добавил нули в массив, напечатанный на странице. Вы можете продолжать нажимать кнопку, но пользовательский интерфейс остается прежним.
Это связано с тем, что в обеих функциях вы изменяете свое состояние с помощью array.push(). React явно предупреждает, что состояние должно быть неизменным в React, то есть вы вообще не можете его изменить. React использует ссылочные значения со своим состоянием.
Решение состоит в том, чтобы получить доступ к текущему состоянию (currentArray), сделать копию этого состояния и внести свои обновления в эту копию:
function addNumberToStart(number) {
setArray((currentArray) => {
return [number, ...currentArray]
})
}
function addNumberToStart(number) {
setArray((currentArray) => {
return [...currentArray, number]
})
} Это правильный метод обновления состояния в React. Теперь, когда вы нажимаете кнопку, она добавляет ноль к началу и концу массива. Но самое главное, обновления сразу же отразятся на странице.
Другие важные концепции JavaScript для React
В этой статье были рассмотрены некоторые распространенные ошибки, которых следует избегать при написании кода в React. Все три описанные здесь ошибки связаны с неправильным пониманием JavaScript. Поскольку React — это среда JavaScript, вам потребуется хорошее понимание JavaScript для работы с React. Это означает изучение важных концепций, которые больше всего относятся к разработке React.
