Полный видео-курс по Sass

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

1. Что такое Sass?

В этом видео говорим об особенностях Sass, рассматриваем два вида синтаксиса Sass, компилируем стили с sass watch, а также добавляем комментарии в стили. Смотреть на Rutube

2. Все о миксинах в Sass

В этом видео говорим о миксинах (mixin) в Sass, как передавать аргументы в миксины, как передать произвольное количество аргументов в миксины, блок content и т.д. Смотреть на Rutube

3. Переменные Sass и Как переключать темы с CSS и JavaScript в React приложении?

В этом видео говорим о Sass переменных, об областях видимости Sass переменных, нюансах их использования, сравниваем переменные Sass и CSS, а также внедряем динамическое переключение тем в React приложение с помощью CSS переменных и JavaScript. Смотреть на Rutube

4. Интерполяция в Sass?

В этом видео говорим об интерполяции в Sass, особенностях применения интерполяции в Sass и как создавать классы со значениями переменных в именах. Смотреть на Rutube

5. Все секреты вложенности в Sass

В этом видео говорим о вложенности в Sass, рассматриваем вложенность свойств и селекторов, добавляем селектор родителя Sass для имен вложенных классов и создания классов как в методологии BEM. Смотреть на Rutube

6. Все директивы Sass

В этом выпуске поговорим о директивах в Sass, рассмотрим группы директив для импорта, генерации стилей, контроля управления и т.д. Смотреть на Rutube

7. Наследование в Sass - @extend

В этом видео поговорим о наследовании в Sass (Sass inheritance), рассмотрим примеры использования наследования и ключевое слово extend. Рассмотрим примеры приватных placeholder селекторов. Смотреть на Rutube

8. Как написать функцию в Sass?

В этом видео поговорим о функциях в Sass, посмотрим как передавать именованные аргументы, пары ключ-значения, значения по умолчанию и произвольное число аргументов. Напишем несколько кастомных функций для возведения числа в степень и конкатенации строк. Смотреть на Rutube

9. Циклы и условия в Sass: for, while, each, if

В этом видео говорим об управляющих директивах в Sass для проверки условий и запуска циклов. Управляющие директивы Sass включают такие директивы как @if, @each, @while, @for. Смотреть на Rutube

10. Что и для чего: миксины, наследование и функции в Sass

В этом видео рассматриваем особенности использования миксинов, наследования и функций в Sass. Смотреть на Rutube

11. Модули Sass: use, forward, import

В этом видео рассматриваем модули Sass и способы их импорта с помощью use, import и forward. Смотреть на Rutube

12. Как запустить JavaScript функцию в Sass?

Смотреть на Rutube

13. Как скрыть свойство Sass по условию?

Рассматриваем как скрывать свойства в Sass, ключевое слово null и его особенности; как работать с глобальной функцией if, и как определить вызван ли миксин внутри класса или вне его. Смотреть на Rutube

14. Встроенные модули Sass

В этом видео рассматриваем встроенные модули Sass и глобальные функции Sass. Смотреть на Rutube

15. Все о математических функциях в Sass

В этом видео рассматриваем математические функции Sass и нюансы работы с ними. Смотреть на Rutube

16. О типе map в Sass

В этом видео рассматриваем модуль sass:map. Смотреть на Rutube

17. Списки в Sass - тип list

В этом видео рассматриваем модуль sass:list. Смотреть на Rutube Исходный код проекта

В этой статье повнимательнее рассмотрим два новых хука: useTransition() и useDeferredValue(). Эти два хука дают возможность определять приоритет обновления состояния, или, скорее, указывать, является ли обновление менее важным, чем другие, и откладывать его в пользу более срочных.

Какое обновление можно считать срочным, а какое обычным?

• Срочные обновления: отражают прямое взаимодействие, такое как набор текста, клики, нажатия и т. д., т.е. то с чем взаимодействует пользователь. Когда вы вводите текст в поле ввода, вы хотите сразу увидеть введенный вами текст. В противном случае UI будет казаться медленным и подлагивать. Поэтому мы хотим сделать такие обновления приоритетным.
• Обычные обновления: переход пользовательского интерфейса из одного вида в другой. Пользователи знают, что представление должно измениться или обновиться (например, когда ожидается ответ на запрос данных). Даже если есть небольшая задержка, это можно рассматривать как ожидаемое поведение, и это не будет восприниматься как медлительность приложения.

Итак, теперь подробнее рассмотрим эти два новых хука, объясним, когда их можно использовать, и посмотрим на конкретные примеры того, как их реализовать.

Хук useTransition() и функция startTransition()

До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом. С помощью useTransition() теперь можно пометить некоторые обновления состояния как несрочные.

Когда использовать useTransition() ?

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

Как использовать useTransition() ?

function App() {
 const [isPending, startTransition] = useTransition();
 const [searchQuery, setSearchQuery] = useState('');
 
 // запрос данных, который занимает некоторое время
 const filteredResults = getProducts(searchQuery);
 
 function handleQueryChange(event) {
   startTransition(() => {
     // оборачивая setSearchQuery() в startTransition(),
     // мы помечаем эти обновления как менее важные
     setSearchQuery(event.target.value);
   });
 }
 
 return (
   <div>
     <input type="text" onChange={handleQueryChange} />
 
     {isPending && <span>Loading...</span>}
     <ProductsList results={filteredResults} />
   </div>
 );
}

Хук useDeferredValue()

useDeferredValue() очень похож на useTransition() в том, что он позволяет отложить несрочное обновление состояния, но применяется его к части дерева. Это похоже методы debounce и throttle, которые мы часто используем для отложенных обновлений. React будет работать с такими обновлениями, как только завершатся срочные обновления.

Когда использовать useDeferredValue()?

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

Как использовать useDeferredValue() ?

function ProductsList({ results }) {
 // deferredResults получат обновленные данные
 // когда завершатся срочные обновления
 const deferredResults = useDeferredValue(results);
 
 return (
   <ul>
     {deferredResults.map((product) => (
       <li key={product.id}>{product.title}</li>
     ))}
   </ul>
 );
}

Итоги

Эти два новых хука позволяют сделать интерфейсы максимально отзывчивыми, даже в сложных приложениях с большим количеством повторных рендерингов, отдавая приоритет обновлениям, которые имеют решающее значение для взаимодействия с пользователем, и помечая некоторые другие как менее важные. Это не означает, что нужно оборачивать все состояния этими хуками. Их следует использовать в крайнем случае, если приложение или компоненты не могут быть оптимизированы другими способами (например, при помощи lazy loading’а, пагинации, веб-воркеров и т. д.).