Учитесь на моих ошибках при создании продуктов с полным стеком (Fullstack на основе Javascript: #ReactJS #NodeJS #Meteor #MySql #ReactivePrograming)
Почему я решил написать эту статью
Делюсь своими ошибками + я не хочу повторять подобные ошибки снова
1. Напрасная трата ресурсов на загрузку и зря рендеринга.
Пустая трата ресурсов на загрузку и трата времени на рендеринг замедляют и негативно влияют на ваш продукт. Таким образом, всегда используются или используются только ресурсы предварительной загрузки.
Что я хочу реализовать: я хочу показать список коротких фильмов, связанных с текущими воспроизводимыми фильмами Когда пользователь делает паузу в конце видео && этот тип видео - фильм && видео воспроизводится в полноэкранном режиме.
Его редко показывают, поэтому мне не следует предварительно загружать ‹ShortMovies /› все время
Плохой:
ShortMovies - это компонент, показывающий список фильмов
Хорошо:
Решение 1: используйте дисплей вместо видимости.
Обратите внимание, что при использовании display, ‹ShortMovies /› все еще отображается независимо от того, display = none или нет. Разница между отображением и видимостью заключается в том, что когда display = none все ресурсы изображений не загружаются через сеть, а все ресурсы изображений всегда будут загружаться с видимостью. Вы можете проверить это, просмотрев из DOM.
Решение 2: отображайте ‹ShortMovies /› только при необходимости.
‹ShortMovies /› не будет отображаться, и все ресурсы изображения не будут загружены, если willShow = true.
2. Забудьте добавлять метатеги для сайта.
Вот мой пример добавления мета-тегов описания для SEO:
Добавление метатегов помогает отображать все содержание веб-сайта в Google следующим образом:
Для получения дополнительной информации о добавлении метатегов:
3. Сохранение и чтение скрытых данных в DOM вместо чтения из состояния React (модели).
Если вы используете React, вам не следует читать / хранить скрытые данные в DOM.
Если вы используете React, вам не следует читать / хранить данные в DOM. Когда элементы исчезли, или еще не отрисованы, или не существуют, и много неизвестных случаев… В этих случаях результаты чтения данных в DOM будут нулевыми = ›Ой, мистер Баг, начало здесь! Вот почему вместо чтения данных из DOM вы должны читать их из модели. В большинстве случаев вам просто нужно прочитать данные из состояния React или хранилища Redux ...
Помните, что React предназначен для выполнения всех этих задач, взаимодействующих с DOM за вас. Вы не должны этого делать.
