Студенты, которые более чувствительны к внешней информации, возможно, слышали об этом за последние два дня.GoogleChromeLabs/quicklinkЭтот проект: Он был инициирован Эдди Османи, известным разработчиком в Google, и реализовал:Предварительная выборка ссылок в видимой области страницы во время простоя для ускорения последующей загрузки.Если вы не слышали имя Адди Османи, но его многочисленные выступления или статьи:
и автор книг:
Подожди, может ты не новичок. Продукт, созданный великим богом, должен быть качественным продуктом.Как только проект быстрой ссылки был запущен командой Google, он привлек бесчисленное внимание.
Ориентированная на собственный JavaScript, эта библиотека использует многие функции браузера, продуманно спроектирована и функциональна.Однако, если мы проектируем реагируйте на / ract actor, как использовать QuickLink, добиться страниц, чтобы открыть его?Я полагаю, что этот вопрос возникнет не у одного разработчика.В вопросе о складе парень из Пакистана спросил:How to use with react-native?
Для этого я реализовалreact-quicklink-component, специально для решения этой проблемы: сделайте так, чтобы проекты на основе React/React Native легко привязывались к быстрой ссылке Google.
Прежде чем я начну, позвольте мне вставить рекламу~
С прошлого года я работаю с известными технологическими гигантамиХай Ян ЗеркалоНачал коллекцию, в этом году мы работаем вместе«Управление состоянием React и изоморфизм на практике»Наконец-то официально опубликовано! В этой книге за основу взят стек технологий React.На основе введения в использование React анализируется идея Redux с уровня исходного кода, и в то же время основное внимание уделяется архитектурному шаблону рендеринга на стороне сервера. и изоморфные приложения. Книга содержит множество примеров проектов, которые не только открывают для пользователей дверь в стек технологий React, но и улучшают общее понимание читателем пограничных областей.
Если вы заинтересованы в содержании книги или следующего содержания, пожалуйста, поддержите нас!Подробности в конце статьи, не уходите!
Что такое быстрая ссылка? Анализ принципа реализации
это WebPageTest demoПродемонстрирована функция предварительной выборки quicklink, которая повысила скорость загрузки страницы на 4 секунды! YouTube видеоПосмотреть здесь.
Принцип реализации очень прост, quicklink в основном ускоряет загрузку последующих страниц следующими способами:
-
Обнаружение ссылок в области просмотра (используя Intersection Observerdeveloper.Mozilla.org/en-US/docs/…
-
Подождите, пока браузер будет бездействовать (используя requestIdleCallbackdeveloper.Mozilla.org/en-US/docs/…
-
Проверьте, использует ли пользователь медленное соединение (используя navigator.connection. EffectiveType) или включен ли режим сохранения данных (используя navigator.connection.saveData).
-
Предварительно выберите URL-адрес в области просмотра (используя или XHR). Может управляться в соответствии с приоритетом запроса (переключается, если поддерживается fetch()).
(цитата извеселый перевод)
Реализация исходного кода проекта не сложна.Далее посмотрим, как проект React подключается к quicklink~
расшифровка компонента реакции-быстрой ссылки
Из приведенного выше анализа видно, что для быстрой ссылки требуется предварительная выборка URL-адресов в области просмотра.document.querySelectorAll
Метод перебирает теги соответствующих узлов. В то время как разработка проекта React обычно защищает операции Dom, для этого нам нужно использоватьref
Эта функция получает настоящий узел Dom. После того, как эта ссылка будет завершена, вы можете напрямую использовать API быстрой ссылки. Автор реализовалreact-quicklink-componentВ таком случае использованиеrender prop
Шаблон очень прост в использовании:
<Quicklink quicklink={options}>
<Comp1 />
...
<CompN />
</Quicklink>
Основной код компонента Quicklink также не сложен:
componentDidMount() {
const quicklinkEle = this.quicklinkRef.current;
quicklink({
...this.props.quicklink,
el: quicklinkEle
});
}
render() {
return <div ref={this.quicklinkRef}>{this.props.children}</div>
}
чтоrender prop
Режим?На самом деле, в сообществе уже есть много контента о таком мышлении, и моя новая книга также знакомит с ним и вращается вокругrender prop
Я анализирую больше шаблонов проектирования компонентов React, поэтому я не буду повторять их здесь.
наконец,react-quicklink-componentПриветствуется пиар!
Happy coding!
Книга "React State Management and Isomorphism" написана мной и известным начальником фронтенд-технологий.Ян ХайцзинСовместные усилия сконденсировали наши накопления и опыт в процессе изучения и практики фреймворка React. **Помимо введения в структуру React, основное внимание уделяется анализу управления состоянием и рендеринга на стороне сервера изоморфных приложений. **В то же время он впитал в себя множество отличных идей от сообщества и провел индуктивное сравнение.
Эта книга написана Шэнь Доу, вице-президентом Baidu, Донг Руи, старшим фронтенд-инженером Baidu, Руаном Ифэном, известным экспертом по языку JavaScript, дядей Вольфом, евангелистом Node.js, justjavac, основателем из китайского сообщества Flarum, Сяоли, технический эксперт по интерфейсу в Sina Mobile и старший руководитель Baidu.Совместная рекомендация инженера по интерфейсу Гу Илина и многих других экспертов в круге интерфейса.
Заинтересованные читатели могутНажмите здесь, чтобы узнать подробности.Вы также можете отсканировать QR-код ниже, чтобы совершить покупку. Еще раз спасибо за вашу поддержку и поощрение! Призываю критиковать и исправлять!