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

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

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

Мы рассмотрим :

Не создавая достаточно компонентов
Изменение государства напрямую
Проход числа в качестве строки при прохождении реквизита
Не используя ключ в компоненте листинга
Забывая, что Setstate асинхронно
Использование Redux слишком много
Создание и использование компонентов Бога
Не следуя структуре папки ReactJS
Отправка реквизита в виде строк (вместо чисел)
Забыв запустить имя компонента с заглавной буквы
Чему научиться дальше

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

Распространенная ошибка, которую создают разработчики, заключается в том, что они не создают достаточно компонентов. С помощью 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 (
    
      
        {todos.map(({ id, title, completed }) => (
          
        ))}
        
      
      
        Highlight Query for incomplete items:
         setQuery(e.target.value)} />
      
    
  );
};

export default TodoList;

2. Изменение государства напрямую

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

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

const modifyPetsList = (element, id) => {
  petsList[id].checked = element.target.checked;
  setPetsList(petsList);
};

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

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

Давайте переписаем предыдущий пример и используем usESTATE () метод

Примечание : Вы также можете использовать map () и Синтаксис спреда Чтобы не мутировать другие значения состояния.

const modifyPetsList = (element, id) => {
  const { checked } = element.target;
  setpetsList((pets) => {
    return pets.map((pet, index) => {
      if (id === index) {
        pet = { ...pet, checked };
      }
      return pet;
    });
  });
};

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

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

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

class Arrival extends React.Component {
  render() {
    return (
      
        Hi! You arrived {this.props.position === 1 ? "first!" : "last!"} .
      
    );
  }
}

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

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

const element = ;

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

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

const lists = ['cat', 'dog', 'fish'];

render() {
  return (
    
      {lists.map(listNo =>
        {listNo})}
    
  );
}

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

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

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

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


  {lists.map(listNo =>
    {listNo})}

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 () Анкет Вместо этого вы бы использовали Использовать effect () Крюк, чтобы получить тот же результат.

6. Использование Redux слишком много

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

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

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

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

8. Не следуя структуре папки ReactJS

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

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

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

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

React Developers с опытом написания много HTML считает естественным писать что -то вроде этого:

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

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

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

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

class demoComponentName extends React.Component {
}

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

Эта ошибка имеет простое исправление, которое запускает имена компонентов с такими заглавными буквами, как это:

class DemoComponentName extends React.Component {
}

Чему научиться дальше

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

Некоторые рекомендуемые концепции для работы с следующими:

Библиотеки в React
Инициализация пожарной базы в React
Разработка приложений с глобальным государством в React
И т. д.

Чтобы получить практический опыт работы с этими понятиями и многое другое, ознакомьтесь с путем обучения образования, Отрешите на передовые разработчики Анкет Этот путь обучения идеально подходит для вас, если у вас уже есть опыт работы с JavaScript и готовы добавить React к вашим навыкам. Вы охватите все, от основы реагирования до использования шаблонов дизайна при создании приложений в React, все с упражнениями по кодированию в браузере.

Счастливого обучения!

Продолжить чтение о React

Оригинал: “https://dev.to/educative/top-10-mistakes-to-avoid-when-using-react-27hn”