10 главных ошибок, которых следует избегать при использовании React

React быстро стал самой популярной интерфейсной структурой в мире технологий, которую используют крупные технологические компании, такие как Facebook, Netflix, Airbnb и многие другие. Разработчики React пользуются большим спросом, и спрос продолжает расти.

Сегодня мы рассмотрим 10 основных ошибок разработчиков React и способы их исправить.

1. Недостаточно компонентов

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

Давайте посмотрим на пример TodoListкомпонента:

// ./components/TodoList.js

import React from ‘react’;

import { useTodoList } from ‘../hooks/useTodoList’;

import { useQuery } from ‘../hooks/useQuery’;

import TodoItem from ‘./TodoItem’;

import NewTodo from ‘./NewTodo’;

const TodoList = () => {

  const { getQuery, setQuery } = useQuery();

  const todos = useTodoList();

  return (

    <div>

      <ul>

        {todos.map(({ id, title, completed }) => (

          <TodoItem key={id} id={id} title={title} completed={completed} />

        ))}

        <NewTodo />

      </ul>

      <div>

        Highlight Query for incomplete items:

        <input value={getQuery()} onChange={e => setQuery(e.target.value)} />

      </div>

    </div>

  );

};

export default TodoList;

2. Непосредственное изменение состояния

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

Давайте посмотрим на пример:

const modifyPetsList = (element, id) => {

  petsList[id].checked = element.target.checked;

  setPetsList(petsList);

};

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

Чтобы исправить это, вы можете использовать setState()метод или useState() ловушку. Любой из этих методов гарантирует, что ваши изменения будут подтверждены React и ваша DOM будет правильно повторно отрисована.

Перепишем предыдущий пример и воспользуемся useState()методом.

Примечание. Вы также можете использовать map()и, spread syntaxчтобы избежать изменения других значений состояния.

const modifyPetsList = (element, id) => {

  const { checked } = element.target;

  setpetsList((pets) => {

    return pets.map((pet, index) => {

      if (id === index) {

        pet = { …pet, checked };

      }

      return pet;

    });

  });

};

3. Передача числа в виде строки при передаче реквизита.

Передача числа в виде строки при передаче реквизита может привести к проблемам в программе React.

Начнем с примера:

class Arrival extends React.Component {

  render() {

    return (

      <h1>

        Hi! You arrived {this.props.position === 1 ? «first!» : «last!»} .

      </h1>

    );

  }

}

В этом примере компонент ожидает позицию как опору и объявляет, что позиция должна быть числом. Поскольку вы проводите строгое сравнение, все, что не является числом или не равно 1, вызовет второе выражение и напечатает «last!».

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

const element = <Arrival position={1} />;

4. Не используется key компонент листинга

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

const lists = [‘cat’, ‘dog’, ‘fish’];

render() {

  return (

    <ul>

      {lists.map(listNo =>

        <li>{listNo}</li>)}

    </ul>

  );

}

Если вы работаете с небольшим приложением, это может сработать. Но при работе с большими списками вы столкнетесь с проблемами рендеринга, когда захотите изменить или удалить элемент из списка.

React отслеживает все элементы списка в объектной модели документа (DOM). Без этой записи React не узнает, что изменилось в вашем списке.

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

Вот как это сделать:

<ul>

  {lists.map(listNo =>

    <li key={listNo}>{listNo}</li>)}

</ul>

5. Забыть, что setState является асинхронным

Легко забыть, что состояние в React асинхронно. Об этом забывают даже самые опытные разработчики React.

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

Давайте посмотрим на пример:

handlePetsUpdate = (petCount) => {

  this.setState({ petCount });

  this.props.callback(this.state.petCount); // Old value

};

Вы можете исправить это, указав необязательный второй параметр setState(), который будет действовать как функция обратного вызова. Функция обратного вызова будет вызываться сразу после того, как вы обновите состояние своим изменением.

handlePetsUpdate = (petCount) => {

  this.setState({ petCount }, () => {

    this.props.callback(this.state.petCount); // Updated value

  });

};

Примечание: то же самое верно для useState(), за исключением того, что у них нет аналогичного аргумента обратного вызова для setState(). Вместо этого вы должны использовать useEffect()ловушку, чтобы получить тот же результат.

6. Слишком частое использование Redux

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

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

7. Создание и использование компонентов God

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

8. Несоблюдение структуры папок ReactJS

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

Давайте посмотрим на стандартную структуру папок, которой придерживается сообщество ReactJS:

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

9. Отправка реквизита в виде строк (вместо чисел)

Разработчики React, имеющие опыт написания большого количества HTML, считают естественным написать что-то вроде этого:

<MyComponent value=”4” />

Это свойство value будет фактически отправлено в MyComponent в виде строки. Если вам нужно это число, вы можете решить эту проблему, используя что-то вроде parseInt()функции или вставив фигурные скобки вместо кавычек.

<MyComponent value={4} />

10. Забываете начинать имя компонента с заглавной буквы

Забыть начинать имена компонентов с заглавных букв — это небольшая ошибка, которую очень легко сделать. В JSX компонент, который начинается со строчной буквы, компилируется в элемент HTML.

Допустим, вы написали что-то вроде этого:

class demoComponentName extends React.Component {

}

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

Эту ошибку легко исправить: имена компонентов начинаются с заглавных букв, например:

class DemoComponentName extends React.Component {

}

Что изучать дальше

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

Вот некоторые рекомендуемые концепции для работы:

• Библиотеки в React
• Инициализация Firebase в React
• Разработка приложений с помощью Global State in React
• И т.п.

Чтобы получить практический опыт работы с этими и другими концепциями, ознакомьтесь с планом обучения Educative, React for Front-End Developers. Этот путь обучения идеально подходит для вас, если у вас уже есть опыт работы с JavaScript и вы готовы добавить React в свой набор навыков. Вы охватите все, от основ React до использования шаблонов проектирования при создании приложений в React, с упражнениями по кодированию в браузере.