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

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

С помощью бесконечной прокрутки и отложенной загрузки мы можем улучшить производительность и удобство наших приложений React. Представьте, что у вас есть около 10 000 объектов данных, и каждый объект данных должен иметь отдельный компонент. Если вы визуализируете все компоненты одновременно, приложению React потребуется много времени для визуализации всех компонентов одновременно, что создаст проблемы с производительностью и негативно повлияет на взаимодействие с пользователем.

Вот где пригодятся бесконечная прокрутка и отложенная загрузка. С помощью бесконечной прокрутки мы можем ограничить компоненты, которые будут отображаться на начальном этапе, и по мере того, как мы продолжаем прокручивать, остальные компоненты могут отображаться постепенно. Теперь есть определенные вещи, которые мы можем сделать, чтобы еще больше повысить нашу производительность и удобство для пользователей. Например, компонент также отображает изображение с динамическим URL-адресом. Каждый компонент, отображающий изображение из URL-адреса, потребует времени. В то же время мы могли отображать статическое изображение для всех компонентов, в то время как функция отложенной загрузки загружала изображение в фоновом режиме. Для этого мы создадим два компонента - List и Image. В списке будет реализована бесконечная прокрутка, а изображение будет лениво загружаться в наш компонент списка для улучшения нашего приложения. Реализация представлена ​​с примерами Gist ниже.

Приступим к реализации бесконечной прокрутки и отложенной загрузки в нашем приложении. Мы бы создали приложение React, которое будет вызывать API с открытым исходным кодом. В API есть страница параметров запроса. Каждая страница имеет целочисленное значение и возвращает массив из 30 объектов. У каждого объекта будет имя и поле изображения. Приложение будет отображать имя и изображение каждого человека вместе с жестко запрограммированным значением Architect и Engineer. Реализация показана ниже.

Для реализации бесконечной прокрутки мы будем использовать прослушиватель событий прокрутки. Слушатель событий прокрутки дает нам доступ к окну и высоте документа, текущей позиции прокрутки, которой будет достаточно, чтобы вычислить конец страницы. Теперь приложение будет начинаться с страницы, инициализированной значением 1, и по мере того, как пользователь достигнет конца страницы, каждый раз, когда значение страницы будет увеличиваться на +1. . Теперь, как только страница загрузится, будет выполнен вызов API с использованием UseEffect (то же, что и componentDidMount), и данные будут извлечены для страницы 1. И когда пользователь достигнет конца страницы, прослушиватель событий прокрутки позволит нам узнать положение прокрутки с помощью функции handleScroll, значение страницы будет увеличено, и данные будут извлечены для последующих страниц и будет отображаться пользователю.

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

Теперь для реализации отложенной загрузки мы будем использовать Suspense и Lazy, которые являются новым дополнением к React. Итак, давайте узнаем больше о Suspense и Lazy. Приостановка для получения данных - это новая функция, которая позволяет вам также использовать <Suspense> для декларативного «ожидания» чего-либо еще, включая данные. Эта страница посвящена варианту использования получения данных, но также может ожидать изображений , скрипты или другая асинхронная работа. Suspense позволяет вашим компонентам «ждать» чего-то, прежде чем они смогут выполнить рендеринг. В нашем приложении мы будем использовать Suspense, чтобы ждать, пока изображение будет отрисовано, а тем временем мы будем отображать статическое общее изображение для всех компонентов для пользователя, используя свойство fallback, и как только изображение будет загружено, наш резервный компонент будет размонтирован, а компонент изображения будет установлен.

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

И компонент изображения будет выглядеть так -

Итак, давайте нарушим код -

  • Поскольку мы используем хуки, мы используем компоненты useState и useEffect. Suspense - последнее дополнение к React для создания отложенной загрузки. Вы можете прочитать об этом подробнее здесь - https://reactjs.org/docs/code-splitting.html
  • Теперь мы создаем простой компонент изображения, который будет лениво загружаться с помощью React.lazy.
  • Теперь мы будем использовать 3 состояния -
    listItems - массив данных, получаемых с сервера
    isfetching - логическое значение, когда мы дойдем до конца page должно быть установлено значение true
    page - номер страницы для получения данных с сервера увеличивается на +1, когда isfetching имеет значение true и изначально установлено на 1.
  • useEffect () - точно так же, как componentDidMount запускается один раз для получения данных с сервера для страницы 1 и добавления прослушивателя событий, связывающего его с функцией handleScroll.
  • handleScroll () - в handleScroll мы используем простую формулу Math.ceil (window.innerHeight… ..), чтобы определить, когда пользователь переходит в конец прокрутки или на страницу. . Math.ceil очень удобен, когда пользователь использует функцию масштабирования в современных браузерах и устанавливает для isFetching значение true.
  • Теперь мы используем useEffect для определения любых изменений в isFetching, и как только isFetching изменяется и становится истинным, мы вызываем функцию fetchMoreData.
  • А fetchMoreData вызывает fetchData, в котором есть функция setTimeOut, чтобы просто показать переход и ничего более. fetchData увеличивает страницу на +1, а затем соответственно вызывает API и помещает данные в массив listItems.
  • Метод возврата прост, за исключением Suspense. Резервный вариант в Suspense будет отображаться изначально, и как только ImageComponent будет загружен, резервный вариант будет отключен и будет отображаться ImageComponent.

Полный код Github - https://github.com/ANUPAMCHAUDHARY1117/React-Infinte-Scroll-And-lazy-Loading

Примечание от Plain English

Вы знали, что мы запустили канал на YouTube? Каждое видео, которое мы снимаем, будет направлено на то, чтобы научить вас чему-то новому. Проверьте нас, нажав здесь, и обязательно подпишитесь на канал 😎