Задать вопрос
mbelskiy

Макс

Software Developer
Ответы пользователя по тегу React

  • Когда нужно использовать reselect?

    mbelskiy
    @mbelskiy
    Software Developer
    Реселект нужен в тех случаях, когда в профайлере видно, что компонент перерисовывается, не смотря на то что данные в компонент не изменились.

    Примеры того, когда это может быть: функция внутри useSelector создает и возвращает новый объект/массив. Функция (state) => state.settings[CONST_SECTION].list таковой не является
    Ответ написан
    4 комментария
    4 комментария

  • Можно ли запустить бэкэнд и фронтэнд на одном компьютере без cors error?

    mbelskiy
    @mbelskiy
    Software Developer
    Кроме вебпака, есть вариант сделать прокси на nginx. Кусок конфига:

    location /api/ {
  # …
  proxy_hide_header Access-Control-Allow-Origin;
  add_header Access-Control-Allow-Origin * always;
}
    Ответ написан
    Комментировать
    Комментировать

  • Что лучше использовать Redux или Context?

    mbelskiy
    @mbelskiy
    Software Developer
    TLDR: Лучше использовать то, что подходит для решения конкретных задач в вашем приложении.

    В простом приложении сойдёт и контекст. Начнёт приложение разрастаться, контекста будет не хватать, начнешь накручивать логику. Получится свой редакс на минималках, но скорее всего с худшей реализацией.

    Голый редакс в 2021 лучше не брать. Смотри сразу в сторону redux-toolkit. Если нужен "стор" для кэша данных от веб-сервера, есть смысл посмотреть на redux-toolkit query, буквально неделю как релизнули.

    Хорошая статья по этой теме: https://blog.isquaredsoftware.com/2021/01/context-...
    Ответ написан
    2 комментария
    2 комментария

  • Делить ли React-компоненты на чистые и контейнерные?

    mbelskiy
    @mbelskiy
    Software Developer
    Для проектов с редаксом, в которых используется сторибук и есть компонентное тестирование, разделять желательно, чтобы не городить велосипеды с мокированием стора.

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

    Если ничего из этого нет, а логика сложная и "раздувает" компонент, можно вынести её в кастомный хук.
    Ответ написан
    Комментировать
    Комментировать

  • Почему игнорируется componentDidMount?

    mbelskiy
    @mbelskiy
    Software Developer
    От того что console.log дважды отработал в render, это не значит что компонент был перерисован. Таковы нюансы работы реакта в сборке для разработки. Поэтому ререндеры нужно отлаживать через react dev tools профайлер.

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

    Если не вызывается componentDidUpdate, значит перерисовки не было.
    Ответ написан
    Комментировать
    Комментировать

  • Как запомнить значение переменной что бы не вызывать эффект при монтировании и перемонтировании?

    mbelskiy
    @mbelskiy
    Software Developer
    Нельзя умирающему компоненту сказать: Передай это будущему поколению.

    Раз уже есть редакс, можно организовать на нем кэширование данных. При диспатче проверять наличие данных в кэше, их свежесть. Нет - пошли за данными, положили в кэш. Есть - ничего не делаем, компонент селектом и так их вытянет.
    Ответ написан
    Комментировать
    Комментировать

  • React testing library - заменяет Jest, Enzyme или дополняет?

    mbelskiy
    @mbelskiy
    Software Developer
    Дополняет jest. Является альтернативой enzyme, нагоняет по популярности https://www.npmtrends.com/@testing-library/react-v... но в js state 2019 не попал https://2019.stateofjs.com/testing/#testing_experi...
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно работать с state в Redux?

    mbelskiy
    @mbelskiy
    Software Developer
    Если DialogWindow часть TicketRow, то при клике на кнопку меняйте TicketRow state.isDialogOpen=true, в рендере проверяйте флаг
    А объект тикет передавайте пропсом в DialogWindow.
    Как результат, Redux не нужен
    Ответ написан
    Комментировать
    Комментировать

  • Ререндер - это нормально?

    mbelskiy
    @mbelskiy
    Software Developer
    Ненормально. Кроме того, в реакт версиях до 16.6 нет инструментов контроля перерисовки для функциональных компонентов.
    В класс-компоненте есть два варианта решения вопроса: наследоваться от PureComponent, либо реализовать shouldComponentUpdate. PureComponent стоит использовать только при плоской структуре props/state
    Ответ написан
    Комментировать
    Комментировать

  • Над чем нужно работать, что улучшать?

    mbelskiy
    @mbelskiy
    Software Developer
    Заметил что у вас много функций определяется в методах render. В этом нет необходимости, а скорее нужно избегать - либо выносить на уровень класса, если нужен this, либо выносить за его пределы.
    Еще вы ходите за картинкой и json файлом по ссылке на гитхаб, а можно их подключить через import, они ведь локально доступны для реакт приложения. Если с json еще спорно, то картинку в шапке точно нужно import-ить
    Ответ написан
    1 комментарий
    1 комментарий

  • Где хранить ключ (access_token) env в create-react-app (CRA)?

    mbelskiy
    @mbelskiy
    Software Developer
    Короткая инструкция:
    1. Создать файл .env в корне проекта с содержимым вида REACT_APP_USER_TOKEN=Put token here
    2. Создать файл .env.local в корне проекта с тем же содержимым что и у .env, только вместо Put token here вставить реальный ключ.
    3. Добавить в .gitignore правило: .env*.local
    4. npm run start -- очень важно выполнять сборку проекта при изменении переменных окружения.

    Доступ к значению переменной осуществляется вызовом process.env.REACT_APP_USER_TOKEN

    Полная инструкция
    Ответ написан
    Комментировать
    Комментировать