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

Итак начнем.

Не забывайте, что каждое изменение маршрута монтирует и демонтирует компонент

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

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

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

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

Не используйте неправильный синтаксис setState

Каждый раз, когда вы объявляете состояние внутри компонента на основе класса, это всегда такой объект:

this.state = {
 counter: 0
}

Итак, каждый раз, когда вы используете форму обновления синтаксиса setState для обновления состояния, это выглядит следующим образом:

this.setState((prevState) => {
  return {
    counter: prevState.counter + 1
  };
});

Поскольку состояние – это объект, prevState также является объектом, поэтому вы получаете доступ к counter использование prevState.counter.

Но при использовании функциональных компонентов с React Hooks состояние может быть объектным или необъектным значением, как показано ниже:

const [counter, setCounter] = useState(0);

Здесь значение counter это не объект, а число. Итак, чтобы обновить состояние с помощью синтаксиса программы обновления, вы напишете код следующим образом:

setCounter((prevCounter) => prevCounter + 1);

Вот, prevCounter является числом. Поэтому вы не используете prevCounter.counter – просто prevCounter. Или вы можете упростить это, как показано ниже:

setCounter((counter) => counter + 1);

Просмотрите статью здесь для полного ввода в состояние React.

Не вызывайте хуки из компонент класса

Начиная с версии 16.8.0, React представил Hooks. Они позволяют писать лучший код React и использовать методы состояния и жизненного цикла компонентов внутри функциональных компонентов.

Просмотрите статью здесь, чтобы ознакомиться с хуками React.

Чтобы облегчить кодирование, React предоставляет много крючков, например:

• The useParams крючок для доступа к параметрам URL-адреса при использовании React Routing
• The useHistory хук, чтобы получить доступ к API истории внутри любого компонента
• The useRef хук, чтобы получить доступ к элементу DOM

и многие другие крючки.

Но все эти крючки (которые обычно начинаются с use ключевые слова) работают только внутри функциональных компонентов.

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

Не забудьте добавить ключевую опору при использовании массива map Метод

Посмотрите на демонстрацию Code Sandbox.

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

const Items = ({ items }) => (
  <ol>
    {items.map((item) => (
      <Item item={item} />
    ))}
  </ol>
);

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

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

Это потому, что каждый раз, когда вы используете массив map метода циклического перемещения элементов, вам нужно предоставить уникальный key опора. React использует это, чтобы определить, какие элементы на экране нужно воспроизвести, поэтому добавив key prop помогает вам избежать ненужного повторного рендеринга в вашем приложении.

Вот обновленная демонстрация кодовой песочницы с добавленными key опора.

Здесь я предоставил уникальный key prop к каждому элементу, который мы выбираем так:

<Item item={item} key={index} />

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

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

Не используйте встроенные функции неправильно

Посмотрите на демонстрацию Code Sandbox.

Здесь я добавил некоторые элементы в состояние:

const [items, setItems] = useState(["one", "two"]);

и мы прокручиваем их, чтобы отобразить на экране:

{items.map((item, index) => (
  <li key={index}>
    {item} <button onClick={handleRemoveItem(item)}>Remove</button>
  </li>
))}

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

Это из-за onClick обработчик кнопки:

<button onClick={handleRemoveItem(item)}>Remove</button>

Вот мы звоним handleRemoveItem метод, когда пользователь нажимает кнопку, но способ, которым мы вызываем метод, неверен.

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

<button onClick={handleRemoveItem}>Remove</button>

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

<button onClick={() => handleRemoveItem(item)}>Remove</button>

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

Вот обновленная рабочая демонстрационная программа Code Sandbox.

Спасибо, что прочли!

Начиная с ES6, есть много полезных дополнений к JavaScript, например:

• ES6 Деструктуризация
• Синтаксис импорта и экспорта
• Функции стрелки
• Обещания
• Асинхронно/ждите
• Дополнительный оператор цепи и многое другое.

Вы можете подробно узнать все о всех функциях ES6+ в моей книге Mastering Modern JavaScript.

Ознакомьтесь с бесплатным предварительным просмотром содержимого книги здесь.

Кроме того, вы можете проверить мой бесплатно Курс «Ввод в React Router», чтобы изучить React Router с нуля.

Хотите быть в курсе регулярного контента по JavaScript, React, Node.js? Следите за мной на LinkedIn.