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

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

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

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

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

Хабровчане vs. цифровые сервисы банков: итоги
Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

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

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

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

Владимир Проскурин

Front-end разработчик
  • 1648
    вклад
  • 7
    вопросов
  • 1321
    ответ
  • 63%
    решений
Ответы
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Когда использовать React.memo?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    но почему его почти не используют ?

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

    (без собственного состояния)

    Внутренний стейт компонента не влияет на результат работы своего memo, memo сравнивает только пропсы.

    По логике вещей каждый компонент (без собственного состояния), даже который не использует props, должен быть обернут в memo, но так не делают, почему?


    Тут есть условности. У меня например вот такие правила:

    Оборачиваем в memo обязательно, если - родительский компонент часто перерендеривается без изменений пропсов вашего компонента. Если ваш компонент не обернуть в memo, то он будет столько же перерендериваться, сколько и родительский. Но тут я бы обернул ваш компонент в родительском в useMemo (если на хуках писать).

    Не оборачиваем в memo, т.к. если обернуть, это ничего не даст или сделает хуже, если - родительский компонент перерендеривается только при изменении пропсов, которые передаются в ваш компонент. Другими словами, если ваш компонент перерендеривается из-за родителя только тогда, когда меняются значения его пропсов, то memo будет проверяться зря (а memo тоже тяжелый).

    Можно обернуть в memo, если - компонент рисует сложную верстку с большим количеством других компонентов, и имеет сложный код в рендере или в useEffect (без зависимостей, который выполняется на каждый рендер).

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

    Еще важно следить за перерендерами, чтобы родитель не передавал пропсы, у которых на каждом рендере разная ссылка, пример:
    <MemoComp onClick={() => console.warn('hello')} />
    в таком случае, memo не будет работать. Это можно еще случайно пропустить, если не используете TypeScript/Flow, то вот такой код
    <MemoComp isActive={item || isEnabled} />
    будет перерендериваться лишний раз, если вдруг окажется, что item это объект с нестабильной ссылкой.

    В общем, главное понимать, что простой memo быстрее простого рендера, нужно просто не допустить двойную работу, когда при любом рендере будет сравниваться memo и происходить рендер.
    Ответ написан 13 дек. 2020
    1 комментарий
    Нравится 1 1 комментарий
  • Почему при наведении на ссылку страница скачет?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега HTML
    Front-end разработчик
    У вас при наведении на кнопки, появляется тултип с сломанными стилями
    0c76_gkkp9gjpxc8swnfocivkoo.png
    Ответ написан 10 нояб. 2020
    5 комментариев
    Нравится 2 5 комментариев
  • Не работает ссылка?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега CSS
    Front-end разработчик
    У вас все перекрывает элемент .gradient
    Ответ написан 05 нояб. 2020
    1 комментарий
    Нравится 1 комментарий
  • Что делает elem.offsetHeight?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Она производит принудительную перерисовку https://gist.github.com/paulirish/5d52fb081b3570c81e3a в данном случае для того, чтобы анимировать переход высоты из offsetHeight в 0. Попробуйте ее убрать, и увидите, что анимации нет.
    Ответ написан 21 сент. 2020
    12 комментариев
    Нравится 1 12 комментариев
  • Почему кнопка не работает?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    У вас ошибка в коде, взгляните на него
    let name=prompt('If you want catch the cat, please say us, what is your name?',';h1.name='+name+';);

    с подсветкой видно, что не хватает закрывающейся кавычки, вот так
    let name=prompt('If you want catch the cat, please say us, what is your name?',';h1.name='+name+';');


    Это первое, а второе это то, что вы неправильно обращаетесь к DOM элементу. Вы просто пишете name, а такой переменной нет. Нужно сначала найти необходимый вам элемент, почитайте это https://learn.javascript.ru/searching-elements-dom
    Ответ написан 01 сент. 2020
    Комментировать
    Нравится 1 Комментировать
  • Вылезла ошибка "TypeError: Cannot read property 'filter' of undefined", знает кто как её решить?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    files будет равняться undefined, если пришла ошибка err. Смотрите сначала ошибку, и если ее нет, то уже пытайтесь итерироваться по файлам.
    Проверьте, есть ли у вас вообще директория с таким именем E:\game\kioko\cmds
    Ответ написан 31 авг. 2020
    Комментировать
    Нравится 1 Комментировать
  • Планирование спринта и поток задач, как совместить?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    Тут надо сразу прикидывать, сколько часов в день у вас продуктивной работы, помимо ответов на призывы/сообщения, всяких ревью, встреч, кофе и прочего. И уже давать оценку задачкам на основе этого времени.
    Если требуют что-то большое сделать, просите оформить задачку и говорите "запланируем в следующий спринт". Если "срочно горит" то пишите PM (или кому нужно) что "нарисовалась задачка, просят выполнить, поменяем в спринте на что-то другое?". Да и не грех на следующем планировании сказать "Я из своего спринта не успел сделать задачу, т.к. взял срочную задачку, поэтому моя задача перейдет в следующий спринт", но лучше заранее предупредить своего PM.
    - Аналитик, помги тут срочно, у нас соседи не справляются с задачами, реши им хоть одну проблему.

    У соседей есть свой PM, пусть через него и просят у вашего PM. В большинстве случаев, после разговора оказывается, что задачка не такая уж и срочная, подождет до следующего спринта.
    Ответ написан 31 авг. 2020
    2 комментария
    Нравится 1 2 комментария
  • Как захватить класс в функции reactjs?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега CSS
    Front-end разработчик
    В реакте не стоит обращаться к элементам DOM не через реакт, это плохая практика. Почитайте про рефы на DOM элементы https://ru.reactjs.org/docs/refs-and-the-dom.html

    UPD: И как правильно заметил Pardon Me! Where Do I Find 4giveness? ваша функция bar реализуется реактивностью. Обращение к элементам DOM нужно только в крайних случаях (например, для получения каких-то свойств типа offsetHeight), это не тот случай.
    Ответ написан 25 авг. 2020
    1 комментарий
    Нравится 1 комментарий
  • Стоит ли читать книгу Владимира Дронова по Django2.1?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    Возможно стоило бы, если бы не существовало https://djbook.ru/rel3.0/
    Ответ написан 18 авг. 2020
    Комментировать
    Нравится 1 Комментировать
  • Почему не работает .scrollIntoView()?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вот так

    document.querySelector(`.${sections[a].className}`)

    не делает никогда, т.к. если у элемента появится второй класс, то селектор будет невалидным. Типа
    .button active
    вместо
    .button.active

    У вас уже есть ссылка на элемент, сразу у нее и вызывайте scrollIntoView

    function scrollTo(a) {
        sections[a].scrollIntoView();
    }
    Ответ написан 17 авг. 2020
    5 комментариев
    Нравится 5 комментариев
  • Почему вложенные операторы if не срабатывают?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    Вы немного неправильно понимаете условные операторы

    if guess == number:
        print('Число выбрано верно')
    else:
        print('Число выбрано неверно')


    В вашем же случае, блок
    if True:
        print('Число выбрано верно')

    выполняется всегда, т.к. True истина. А этот блок
    if False:
        print('Число выбрано неверно')

    никогда не выполняется. А т.к. if True у вас внутри if guess == number, надпись выводится толлько если число выбрано верно, в противном случае ничего не выводится
    Ответ написан 17 авг. 2020
    3 комментария
    Нравится 3 3 комментария
  • Почему разработчики пишут к примеру на html + css, а не юзают конструкторы?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    Спроси его, сможет ли он создать хабр на конструкторе.
    Для простых лендингов без уникального дизайна, действительно, можно использовать конструкторы. Конструкторы подходят для того, чтобы делать что-то типовое.
    Ответ написан 03 авг. 2020
    1 комментарий
    Нравится 11 1 комментарий
  • Нужно увеличить ячейки массива в 5 раз?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Уберите return, т.к. на первой же итерации происходит выход из функции, и цикл больше не продолжается.

    UPD: еще lenght -> length.Если нужно, чтобы что-то выводилось, перенесите return в конец функции, сразу после цикла.
    Ответ написан 02 авг. 2020
    1 комментарий
    Нравится 2 1 комментарий
  • Менее ресурснозатратный редактор, чем Visual Studio Code, на русском языке, 2 на 2 разделение экрана, запуск gulp из под редактора?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    VS Code конечно. Просто разберитесь в тормозах. У меня на работе несколько проектов по +2000 ts файлов (еще почти столько же в сумме стили и svg иконки), и я переключаюсь спокойно между проектами через Project Manager, и стоит десяток различных расширений. Работает все не хуже чем в WebStorm с теми же проектами.

    Железо среднее - Macbook pro 2018 i7-8750H 16gb ram.
    Ответ написан 28 июл. 2020
    8 комментариев
    Нравится 8 комментариев
  • Почему элемент выходит за пределы родителя?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Уберите float: left, из-за него вы теряете высоту вашего блока, и поэтому родительский блок имеет высоту без учета вашего . bar
    И вообще, используйте float только по прямому назначению - для обтекания элемента остальными элементами. В данном случае обтекание не нужно.
    Ответ написан 26 июл. 2020
    Комментировать
    Нравится Комментировать
  • React как ограничить вывод?

    Vlad_IT
    Владимир Проскурин @Vlad_IT
    Front-end разработчик
    Object.keys(genriesJson) это массив, а массивы лимитировать можно при помощи среза через slice
    Ответ написан 24 июл. 2020
    Комментировать
    Нравится 1 Комментировать
  • Как передать метод с this из одного компонента в другой?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Не совсем понятно, что значит не работает? Я не вижу реализацию метода save. И точно this это undefined а не сам метод? Можете вместо bind сразу определять метод save как стрелочную функцию, тогда проблем с this не будет.
    По текущему коду сложно понять, в чем у вас проблема. То, что вы делаете, это стандартная задача - передача функции в компонент https://ru.reactjs.org/docs/faq-functions.html
    Ответ написан 21 июл. 2020
    Комментировать
    Нравится 1 Комментировать
  • Как убрать этот горизонтальный скролл?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Это у вас меню Услуги -> Тюнинг -> Автоателье

    1ghbyviprxc0_c56vnriyekbnia.png
    Ответ написан 20 июл. 2020
    3 комментария
    Нравится 1 3 комментария
  • Как сделать плавную прокрутку на странице?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Все решения будут дико тормозить. Сайт по ссылке тормозит на macbook pro 2018 с i7, во время скролла лишь появляется желание побыстрее закрыть сайт.
    Лучше нативного скролла нет ничего, убеждался в этом множество раз. Если нужна плавная прокрутка к нужной позиции, то тоже есть нативные решения: css scroll-behavior или на js параметр behavior у scrollTo
    Ответ написан 19 июл. 2020
    5 комментариев
    Нравится 7 5 комментариев
  • Как Submit`уть форму по нажатию клавиши Enter?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Формы это умеют "из коробки".
    Ответ написан 18 июл. 2020
    Комментировать
    Нравится 4 Комментировать
Оценили как «Нравится»
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • Следующие →
Самые активные сегодня
  • Василий Банников
    • 11 ответов
    • 0 вопросов
  • vesper-bot
    Максим Гришин
    • 11 ответов
    • 0 вопросов
  • rPman
    • 9 ответов
    • 0 вопросов
  • Dr. Bacon
    • 7 ответов
    • 0 вопросов
  • DanceM
    Dance Macabre
    • 6 ответов
    • 0 вопросов
  • galaxy
    • 6 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

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

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