• Стоит ли переходить на React.PureComponent по-умолчанию?

    PQR
    @PQR
    React.PureComponent реализует метод shouldComponentUpdate таким образом, что он делает поверхностное сравнение props и state (не глубокое). Вот собственно код:
    https://github.com/facebook/react/blob/c8fbdac2271...
    shouldUpdate =
                !shallowEqual(prevProps, nextProps) ||
                !shallowEqual(inst.state, nextState);


    Что такое shallowEqual? Это по сути сравнение оператором === каждого элемента из prevProps с каждым элементом из nextProps. На всякий случай дам ссылку на реализацию для полного понимания: https://github.com/facebook/react/blob/6963ea4bfcd...

    В итоге всё зависит от структуры ваших props. Если в props вы передаёте объекты которые иногда мутируются, т.е. по ссылке они равны ===, но внутри какие-то данные поменялись (что само по себе выглядит странно в экосистеме redux + reselect, но вполне возможно технически), тогда использование PureComponent вам всё поломает, т.к. на экране какие-то компоненты перестанут перересовываться!

    Если же у вас всё по уму, данные которые передаются через props являются скалярными типами (string, int, float, bool) или immutable объектами, тогда смело используйте PureComponent - в некоторых случаях он поможет избавиться от лишних вызовов render.

    Важное замечание: PureComponent нужно использовать только для так называемых presentational components, т.е. для тех компонент, которые НЕ обёрнуты в вызов redux connect().

    Для container components (т.е. тех компонент, которые обёрнуты в redux connect()) нет смысла наследоваться от PureComponent, т.к. метод connect() оборачивает ваш компонент своей реализацией shouldComponentUpdate, которая также использует shallowEqual. Если вы по недосмотру унаследуете container component от PureComponent - ошибок не будет, но это не имеет никакого смыла, т.к. ваш код по сути будет дважды делать shallowEqual, а зачем делать лишнюю работу?

    Подводя итог, рецепт такой:
    - presentational components наследуем от React.PureComponent
    - container components (которые обёрнуты в redux connect()) наследуем от старого доброго React.Component
    Ответ написан
  • Где могут проверить код?

    Krasnodar_etc
    @Krasnodar_etc
    little front
    Я не знаю насчёт правил ресурса, но вроде можно спрашивать, что можно изменить в коде )
    Только ссылку лучше всё таки на codepen или jsfiddle кидать, если ты фронтенд. Мне лично просто лень было бы клонировать репозиторий с git-а
    Ответ написан
  • Почему html video так сильно грузит сайт?

    justeen
    @justeen
    У меня была похожая проблема и связанна она была со скриптом Яндекс.Метрики с включенным вебвизором. Если у вас таковой есть на сайте, то пишите, помогу с решением
    Ответ написан
  • Где могут проверить код?

    usdglander
    @usdglander
    Yipee-ki-yay
    Я думаю что его сначала на github куда то надо положить, а тут дать ссылку с просьбой оценить. Если код не большой, то появятся люди, которые с удовольствием вам помогут!
    Ответ написан
  • Как автоматически воспроизводить video на Android / iOS?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    На айфоне не запустится, как ни старайся. Это особенность айфона, защита траффика.

    UPD: Спасибо Anton fon Faust за добавление информации по Айфонам
    https://github.com/bfred-it/iphone-inline-video

    Рабочее решение для андройда тут https://arm1.ru/blog/html5-video-kak-fon-stranitsy

    С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тэга video аттрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript-обработчик, который принудительно скажет video, чтобы оно играло:

    var video =  document.getElementById(element);
    video.addEventListener('click',function(){
    	  video.play();
    },false);

    Для определения Android, чтобы добавить аттрибут controls, я просто использовал Detect.js:

    var ua = detect.parse(navigator.userAgent);
    if ( ua.os.family === 'Android' ) {
    	video.setAttribute( 'controls','controls' );
    }

    PS: А вообще, я бы рекомендовал на мобильных устройствах не показывать видео.
    Просто сделать красивую фоновую картинку, реально, зачем тратить трафик людей.
    Не все сидят именно с WI-FI, и важна скорость загрузки сайта с телефона.
    Ответ написан