Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
use, чтобы React мог корректно отслеживать его вызовы.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}
В этом примере хук
useWindowWidth отслеживает ширину окна браузера и возвращает её значение. Кастомные хуки позволяют инкапсулировать логику, упрощая её повторное использование в разных компонентах.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
box-shadow используются для создания теней, но работают по-разному. box-shadow применяется к блочным элементам и создает тень вокруг их рамки. Тень может быть смещена, размыта и изменена по цвету.
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
filter: drop-shadow() применяется к содержимому элемента, включая прозрачные области, такие как текст или изображения с альфа-каналом. Тень повторяет форму содержимого.
.element {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}
Основное отличие:
box-shadow работает с рамкой элемента, а drop-shadow учитывает форму содержимого, включая прозрачные части.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
lang в теге <html>. Этот атрибут помогает браузерам и поисковым системам определить язык содержимого страницы.
<html lang="ru">
В примере указан русский язык. Для других языков используются соответствующие коды, например
en для английского или es для испанского. Это важно для accessibility и SEO.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
React.memo для функциональных компонентов или PureComponent для классовых. Эти инструменты позволяют избежать рендера, если пропсы и состояние не изменились.
const MyComponent = React.memo(({ prop1, prop2 }) => {
return <div>{prop1} {prop2}</div>;
});
Для более сложных случаев можно использовать хук
useMemo, чтобы мемоизировать вычисляемые значения, и useCallback, чтобы сохранить ссылки на функции между рендерами. Это уменьшает количество повторных вычислений и рендеров.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🤔1
Пример с переменными:
console.log(x); // undefined
var x = 5;
- Переменные, объявленные через
var, поднимаются, но их значение инициализируется как undefined. Пример с функциями:
foo(); // "Hello"
function foo() {
console.log("Hello");
}
- Объявления функций поднимаются полностью, поэтому их можно вызывать до объявления.
Hoisting не применяется к
let и const, которые остаются в "временной мертвой зоне" до объявления.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
never в TypeScript обозначает значение, которое никогда не должно возникать. Он используется в ситуациях, когда функция не завершается нормально или когда переменная не может иметь значения. Функция, которая всегда выбрасывает ошибку или содержит бесконечный цикл, возвращает
never:
function throwError(message: string): never {
throw new Error(message);
}
Также
never полезен в exhaustive checks для обработки всех вариантов union-типа:
type Shape = 'circle' | 'square';
function handleShape(shape: Shape) {
switch (shape) {
case 'circle': return;
case 'square': return;
default: const _exhaustiveCheck: never = shape; // Ошибка, если Shape расширится
}
}
Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
🔹Тег
Пример:
- Контент внутри
- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.
<nonoscript> используется для отображения контента, если JavaScript отключен в браузере. Он позволяет предоставить альтернативное содержимое или сообщение для пользователей, которые не могут или не хотят использовать JavaScript.Пример:
<nonoscript>
<p>Please enable JavaScript to use this website.</p>
</nonoscript>
- Контент внутри
<nonoscript> отображается только при отключенном JavaScript.- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.
👍2
✔️ Тип
Функция, которая всегда выбрасывает ошибку или содержит бесконечный цикл, возвращает
Также
never в TypeScript обозначает значение, которое никогда не должно возникать. Он используется в ситуациях, когда функция не завершается нормально или когда переменная не может иметь значения. Функция, которая всегда выбрасывает ошибку или содержит бесконечный цикл, возвращает
never:
function throwError(message: string): never {
throw new Error(message);
}
Также
never полезен в exhaustive checks для обработки всех вариантов union-типа:
type Shape = 'circle' | 'square';
function handleShape(shape: Shape) {
switch (shape) {
case 'circle': return;
case 'square': return;
default: const _exhaustiveCheck: never = shape; // Ошибка, если Shape расширится
}
}
👍4❤1