Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Как организовать веб-студию на дому и сколько это может стоить
Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
rockon404

Антон Спирин

Frontend Developer
  • 2336
    вклад
  • 1
    вопрос
  • 1758
    ответов
  • 79%
    решений
Комментарии
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как лучше работать с событием scroll в React?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Павел Диденко, ну смотрите. В компоненте по-умолчанию нет никакой проверки соответствия состояния и вызов setState инициирует его перерисовку. Для того чтобы ее предотвратить достаточно использовать PureComponent или реализовать метод shouldComponentUpdate. Но это не самый верный путь, по-хорошему, вам надо менять алгоритм. Вызовы setState должны происходить только тогда, когда в этом есть необходимость.
    Написано более года назад
  • Как создать структуру фалов с нужным содержанием при запуске npm i?

    rockon404
    Антон Спирин @rockon404
    BD_ l3ftoverZ!, насколько я понял, автор хочет свой boilerplate с базовой структурой, но не знает как это словами описать.
    Написано более года назад
  • Как лучше работать с событием scroll в React?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Павел Диденко, какой смысл выкладывать в песочницу нерабочий код?
    Вы писали:
    componentDidUpdate отрабатывает при каждом скролле
    а это значит, что у вас не аналогично и состояние изменяется каждое событие. По-хорошему, так быть не должно.
    Написано более года назад
  • Как лучше работать с событием scroll в React?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Павел Диденко, я не видел ваш код) В примере в комментарии к ответу совсем простой кейс, где вообще нет смысла слушать скролл.

    Реализацию того, как мне нужно сделать можно посмотреть тут https://skybuy.ru/catalog/smesiteli/ если зайти в категорию, где сайдбар меньше в высоту, чем товары, то там поведение сайдбара меняется

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

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Павел Диденко,
    подскажи, как сделать так, чтобы он не вызывался?

    Использовать фиксированное позиционирование. В данном случае, по сути и не нужно слушать скролл.

    И Реакт же должен смотреть DOM дерево по ключам, если произошли изменения, то перерисовывать, но у меня данные не поменялись, поменялись только координаты блока обертки, почему он тогда перерисовывает вообще все?

    Рендер не означает полное обновление реального DOM и не означает render всех вложенных компонентов. В DOM обновляется только обертка, но чтобы ее обновить, библиотеке надо выполнить render, сравнить две версии Virtual DOM нод и сделать необходимые обновления.

    Еще для частых обновлений вроде обновления top лучше использовать атрибут style, так как Styled Compоnents для каждого значения генерирует класс.

    По вашей задаче, если, допустим, у вас есть Header, который имеет два состояния, то по событию скролл его обновление должно происходить только в тот, момент когда это нужно, а не каждый вызов. То есть при скролле вниз это будет всего одно обновление. Как-то так по-хорошему должно быть. Для этого надо использовать условные операторы.
    Написано более года назад
  • React | Как показывать заглушку пока загружается iframe?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Mikhail Osher, ну мне iframe всего один раз приходилось использовать. Как раз была похожая задача, надо было встроить в приложение сгенерированную статичную документацию по публичному API. Я ее загружал AJAX запросом и по загрузке добавлял свойством srcDoc, убирал прелоадер и снимал с iframe нулевой opacity.
    Все работало без нареканий. Правда пришлось поломать голову как роутинг закостылить.

    Петр Мухуров, да, все верно. Поправил. Спасибо!
    Написано более года назад
  • Как бы выглядел этот код без хуков (hooks) и с компонентами класса, а не с функциональными компонентами?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Петр Мухуров, еще обновление состояния в колбеке таймера. В оригинале в состояние пишется остаток от деления суммы active + 1 + length на length:
    setActive((active + 1 + length) % length)
    Это не дает значению выйти за диапазон индексов массива, а сбрасывает активный элемент в 0 после достижения последнего элемента.
    Написано более года назад
  • Как бы выглядел этот код без хуков (hooks) и с компонентами класса, а не с функциональными компонентами?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    1. Таймаут обязательно надо чистить в componentWillUnmount.
    2. В componentDidMount тоже надо инициировать таймер.
    3. componentDidUpdate у вас написан неправильно. Пытаетесь получить состояние из props. Состояние обновляете неправильно. Внимательно посмотрите исходный вариант.
    4. Опечатка в next.
    Написано более года назад
  • Как правильно изменять store в redux?

    rockon404
    Антон Спирин @rockon404 Куратор тега Redux
    Юра Комаров,
    Состояния сбрасываются потому что ADD_MOSQUITO приходит во все reducers , a так как в каждом есть default return state то и на выходе остается только то что попало под case ADD_MOSQUITO , остальные переписываются в дефолтные

    Повторюсь. Ничего не сбрасывается.
    Действие и должно проходить по всем редьюсерам. В редьюсерах, в которых оно не обрабатывается возвращается не измененное состояние(не начальное).
    Ищите ошибку там, где зачем-то создаете несколько копий хранилищ. Больше без остального кода тут не скажешь.
    Написано более года назад
  • Полностью ли nodejs асинхронен?

    rockon404
    Антон Спирин @rockon404
    IDONTSUDO, а судя по вопросу, посмотрели подкаст, но толком ничего не поняли.
    Написано более года назад
  • Полностью ли nodejs асинхронен?

    rockon404
    Антон Спирин @rockon404
    Изучайте JavaScript.
    Написано более года назад
  • Как сделать чтобы запускалась функция не сразу а через несколько секунд?

    rockon404
    Антон Спирин @rockon404
    Andriy Kosmenyuk, ТС изменил текст и теги вопроса. До этого тут было развернутое задание по React. Тот вопрос он перепубликовал вопрос в упрощенном виде, видимо, чтобы повысить шансы получить ответ. Текст нового вопроса указывает на то, что пара вещей, которые были написаны, в этом были ложью. Более того, судя по почерку попрошайничества, у этого пользователя, возможно, есть еще несколько аккаунтов.
    Как по мне банить таких надо.
    Написано более года назад
  • Как решить проблему с загрузкой изображений большого размера при взаимодействии с API?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    А, что мешает посылать ссылки на изображения, а не сами изображения?
    Написано более года назад
  • Как вызвать метод если статус в state false?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Плохой подход. Опишите задачу, скорей всего, все можно спроектировать иначе.
    Написано более года назад
  • Как объединить react и express при разработке fullstack?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    Вариантов множество. К React и Express ваш вопрос прямого отношения не имеет. Как вариант, поближе познакомиться с сервером Nginx, его возможностями и типовыми кейсами. Не вздумайте раздавать статику в роде с помощью Express.
    Написано более года назад
  • Как исправить ошибку в своей реализации redux?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    1. Неизвестно, зачем вам понадобилась своя реализация Redux + React Redux.
    2. Неизвестно, что вам мешает посмотреть исходный код обоих библиотек.
    Написано более года назад
  • Сессионные cookie?

    rockon404
    Антон Спирин @rockon404
    photosho, да.
    Написано более года назад
  • Как сделать чтобы запускалась функция не сразу а через несколько секунд?

    rockon404
    Антон Спирин @rockon404
    Вас ни капли не смущает, что это задание, а не вопрос?
    Написано более года назад
  • Сессионные cookie?

    rockon404
    Антон Спирин @rockon404
    photosho, да, Expires вы не ставите. Значит браузер делает session restore. Это надо, чтобы восстановить все вкладки после закрытия.
    Написано более года назад
  • Можно ли совместить обычные функции c ES6 классом в React?

    rockon404
    Антон Спирин @rockon404 Куратор тега React
    antonstolar,
    я уже почти весь learn.javascript.ru изучил

    Сомневаюсь. Пробежаться глазами и прорешать до полного понимания это разные вещи. В среднем, человеку для усваивания темы надо выполнить 14 разных примеров. Кому-то больше, кому-то меньше, тут все от способностей зависит.

    По первому вопросу - нет на learn.javascript.ru такого варианта создания функции. Может вы когда-то давно с другого ресурса именно этот момент изучили, а я не видел там такого.

    Методы объекта.

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

    Эта информация есть в любой книге и на любом ресурсе по изучению JavaScript. ЕS6 полностью поддерживает ES5.


    1. Можно в React написать функцию вот так:

    Нет никакого "в React". Чтобы это отчетливо понимать надо знать JavaScript.
    Все, что можно делать в JavaScript, можно делать и в React. React написан на JavaScript и выполняется интерпретатором JavaScript, как любой другой JavaScirpt код. Когда вы описываете React компоненты вы используете JavaScript. А JSX всего лишь синтаксический сахар над вызовом React.createElement.
    Именно поэтому в коде, где используется JSX надо обязательно делать импорт React:

    import React from 'react';
    
    const Foo = () => <div>Bar</div>;

    А так выглядит этот код без сахара:
    import React from 'react';
    
    const Foo = () => React.createElement('div', null, 'Bar');



    2. Можно вот так?
    или вот так:

    Класс: базовый синтаксис
    Написано более года назад
  • ← Предыдущие
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • Следующие →
Самые активные сегодня
  • Василий Банников
    • 12 ответов
    • 0 вопросов
  • justhostRU
    justhostRU
    • 9 ответов
    • 0 вопросов
  • maksim92
    Максим
    • 7 ответов
    • 0 вопросов
  • StarinaDims
    Дмитрий Ларин
    • 7 ответов
    • 0 вопросов
  • FanatPHP
    FanatPHP
    • 6 ответов
    • 0 вопросов
  • samodum
    Developer
    • 6 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации