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

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!».

Читайте также:  Учебное пособие по JavaScript: начало работы с анимацией Canvas

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

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 они называются «антипаттерном». Вы не должны создавать целую страницу со всеми вашими элементами пользовательского интерфейса, втиснутыми в один компонент. Вместо этого вам следует выделить время, чтобы обрисовать различные взаимосвязанные части вашего приложения и превратить их в отдельные компоненты. Когда вы разделяете компоненты таким образом, все части вашего приложения легче поддерживать и при необходимости реструктурировать.

Читайте также:  Python Regex: введение в использование регулярных выражений

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

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

Давайте посмотрим на стандартную структуру папок, которой придерживается сообщество 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, с упражнениями по кодированию в браузере.

Оцените статью
bestprogrammer.ru
Добавить комментарий