Ошибки при работе c React state.

Сегодня мы поговорим об основных, часто встречающихся ошибках, которые часто допускают разработчики при работе с состоянием (state) при разработке React-приложения.

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

Поскольку мы все учимся, это также означает, что мы все также склонны к ошибкам. Хорошо. Цель - стать лучше и стать лучше. Если ты ошибаешься и учишься на ней, у тебя все отлично! Но если вы не научились чему-то новому и продолжаете повторять одни и те же ошибки, ну ... тогда, похоже, вы застаётесь в своей карьере.

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

1. Изменение состояния напрямую.

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

Скажем, у вас есть состояние, которое выглядит так:



this.state = {
  colors: ['red', 'green', 'blue']
}



И теперь вы хотите добавить цвет «yellow» в этот массив. Может быть заманчиво сделать это:



this.state.colors.push('yellow')



Или даже это:



this.state.colors = [...this.state.colors, 'yellow']



Но оба эти подхода неверны! При обновлении состояния в компоненте класса вам всегда нужно использовать метод setState, и вы всегда должны быть осторожны, чтобы не изменять объекты. Вот правильный способ добавить элемент в массив:



this.setState(prevState => ({ colors: [...prevState.colors, 'yellow'] }))



И это приводит нас прямо к ошибке номер два.



2. Установка состояния, которое опирается на предыдущее состояние без использования функции

Есть два способа использовать метод setState.

Первый способ - предоставить объект в качестве аргумента.

Второй способ - предоставить функцию в качестве аргумента.

Итак, когда вы хотите использовать один поверх другого?

Если бы у вас была, например, кнопка, которую можно включить или отключить, у вас может быть элемент состояния под названием isDisabled, который содержит логическое значение. Если вы хотите переключить кнопку с включенного на отключенное, может возникнуть соблазн написать что-то вроде этого, используя объект в качестве аргумента:



this.setState({ isDisabled: !this.state.isDisabled })



Итак, что с этим не так? Проблема заключается в том, что обновления состояния React могут быть пакетными, а это означает, что в одном цикле обновления может происходить несколько обновлений состояния. Если ваши обновления должны были быть пакетными, и у вас было несколько обновлений до включенного / отключенного состояния, конечный результат может быть не тем, что вы ожидаете.

Более правильным способом обновления состояния здесь было бы предоставление функции предыдущего состояния в качестве аргумента:



this.setState(prevState => ({ isDisabled: !prevState.isDisabled }))



Теперь, даже если обновления вашего состояния являются пакетными, и несколько обновлений в состоянии включенного / выключенного состояния выполняются вместе, каждое обновление будет полагаться на правильное предыдущее состояние, чтобы вы всегда получали результат, который ожидали.

То же самое верно для чего-то вроде увеличения счетчика.

Не делайте этого!!!:



this.setState({ counterValue: this.state.counterValue + 1 })



Делайте правильно!!!:



this.setState(prevState => ({ counterValue: prevState.counterValue + 1 }))




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




3. Не забывайте, что setState является асинхронным

Наконец, важно помнить, что setState является асинхронным методом. В качестве примера, давайте представим, что у нас есть компонент с состоянием, которое выглядит так:



this.state = { name: 'John' }



И затем у нас есть метод, который обновляет состояние и затем выводит состояние на консоль:



this.setState({ name: 'Matt' })
console.log(this.state.name)



Вы можете подумать, что вывод будет 'Matt' на консоль, но это не так! Это будет - «Джон»!

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

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

Правильный способ записать текущее состояние после обновления:



this.setState({ name: 'Matt' }, () => console.log(this.state.name))



Намного лучше! Теперь вывод в консоль будет 'Matt', как и ожидалось.

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

Удачного кодирования!

Оригинал можно посмотреть здесь: Tyler Hawkins                                                                                                                                                              

Телеграм канал - Full Stack JavaScript Developer

---

Помочь проекту (любая валюта). DONATE