Оптимизация производительности в Angular
1. Изменение входного свойства (
2. Событие внутри компонента (например, клик по кнопке).
3. Использование асинхронного пайпа для подписки на Observable или
Для использования этой стратегии, в декораторе компонента нужно задать свойство
В примере компонент
👉 @sWebDev
ChangeDetectionStrategy.OnPush
работает по принципу, что изменения в компоненте должны происходить только в следующих случаях:1. Изменение входного свойства (
@Input
).2. Событие внутри компонента (например, клик по кнопке).
3. Использование асинхронного пайпа для подписки на Observable или
Promise
.Для использования этой стратегии, в декораторе компонента нужно задать свойство
changeDetection
:import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
@Component({
selector: 'app-user',
template: `
<div>
<p>{{ user.name }}</p>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
@Input() user: { name: string };
}
В примере компонент
UserComponent
будет проверять изменения только тогда, когда свойство user
изменяется. Это значит, что если родительский компонент обновляется, но свойство user остается неизменным, UserComponent
не будет проходить процесс проверки изменений.👉 @sWebDev
👍5
Jdenticon
Jdenticon — это JavaScript-библиотека для генерации уникальных идентиконов (графических аватаров), основанных на хэшах данных. Она создает изображения в формате SVG, которые можно использовать как уникальные иконки для пользователей, файлов или других объектов, где требуется визуальная идентификация. Это особенно полезно в тех случаях, когда нужно быстро создать аватары для пользователей на основе их идентификаторов (например, email или ID), не прибегая к хранению изображений.
👉 @sWebDev
Jdenticon — это JavaScript-библиотека для генерации уникальных идентиконов (графических аватаров), основанных на хэшах данных. Она создает изображения в формате SVG, которые можно использовать как уникальные иконки для пользователей, файлов или других объектов, где требуется визуальная идентификация. Это особенно полезно в тех случаях, когда нужно быстро создать аватары для пользователей на основе их идентификаторов (например, email или ID), не прибегая к хранению изображений.
👉 @sWebDev
👍3
Google Translate может сломать React приложение
Статья обсуждает проблему, связанную с использованием Google Translate в приложениях на React, которая вызывает сбои. Автор описывает, как именно Google Translate конфликтует с React-компонентами, и предлагает возможные решения для устранения этих сбоев.
👉 @sWebDev
Статья обсуждает проблему, связанную с использованием Google Translate в приложениях на React, которая вызывает сбои. Автор описывает, как именно Google Translate конфликтует с React-компонентами, и предлагает возможные решения для устранения этих сбоев.
👉 @sWebDev
🔥3
Micromodal.js
MicroModal.js — это легковесная JavaScript-библиотека для создания модальных окон. Она очень проста в использовании и предназначена для того, чтобы модальные окна были доступны для всех пользователей, включая тех, кто использует клавиатуру и экранные читалки. Поддерживает как обычные модальные окна, так и многостраничные с навигацией между ними. MicroModal.js минималистична по дизайну, что позволяет легко кастомизировать её под нужды конкретного проекта.
👉 @sWebDev
MicroModal.js — это легковесная JavaScript-библиотека для создания модальных окон. Она очень проста в использовании и предназначена для того, чтобы модальные окна были доступны для всех пользователей, включая тех, кто использует клавиатуру и экранные читалки. Поддерживает как обычные модальные окна, так и многостраничные с навигацией между ними. MicroModal.js минималистична по дизайну, что позволяет легко кастомизировать её под нужды конкретного проекта.
👉 @sWebDev
👍5
Работа с ViewContainerRef в Angular
Какой декоратор используется для доступа к
Если забыли, то вернитесь к посту от26.08.2024 .
👉 @sWebDev
Какой декоратор используется для доступа к
ViewContainerRef
в компоненте?Если забыли, то вернитесь к посту от
👉 @sWebDev
👍2
Какой декоратор используется для доступа к ViewContainerRef в компоненте?
Anonymous Quiz
30%
8%
12%
49%
👍2
Использование useFieldArray в React
Пример:
👉 @sWebDev
useFieldArray
— это хук из библиотеки React Hook Form, помогающий управлять массивами полей в динамических формах.Пример:
import React from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';
function DynamicForm() {
const { control, handleSubmit } = useForm({ defaultValues: { items: [''] } });
const { fields, append, remove } = useFieldArray({ control, name: 'items' });
return (
<form onSubmit={handleSubmit(console.log)}>
{fields.map((field, index) => (
<div key={field.id}>
<Controller
name={`items[${index}]`}
control={control}
render={({ field }) => <input {...field} />}
/>
<button type="button" onClick={() => remove(index)}>Удалить</button>
</div>
))}
<button type="button" onClick={() => append('')}>Добавить элемент</button>
<input type="submit" />
</form>
);
}
export default DynamicForm;
👉 @sWebDev
👍3
RoughNotation
RoughNotation — это JavaScript-библиотека для аннотирования текста и элементов веб-страниц с использованием «грубых» или рисованных стилей, похожих на ручные зарисовки.
👉 @sWebDev
RoughNotation — это JavaScript-библиотека для аннотирования текста и элементов веб-страниц с использованием «грубых» или рисованных стилей, похожих на ручные зарисовки.
👉 @sWebDev
👍3
Использование изолированных модулей в Angular
Статья описывает поддержку опции
👉 @sWebDev
Статья описывает поддержку опции
isolatedModules
в Angular 18.2, которая ускоряет сборку приложения на 10% за счёт использования транспиляции TypeScript через бандлер (например, esbuild
) вместо обычного TypeScript. Эта опция позволяет оптимизировать код, инлайнить const
и обычные enum, и убрать необходимость в оптимизациях на основе Babel для TypeScript-кода. Для включения этой функции нужно добавить "isolatedModules": true в tsconfig.json
.👉 @sWebDev
👍3
Superfine
Superfine — это минималистичная JavaScript-библиотека для работы с виртуальным DOM, которая позволяет создавать и обновлять пользовательские интерфейсы с минимальными затратами на производительность.
👉 @sWebDev
Superfine — это минималистичная JavaScript-библиотека для работы с виртуальным DOM, которая позволяет создавать и обновлять пользовательские интерфейсы с минимальными затратами на производительность.
👉 @sWebDev
👍3
Использование ValidatorFn
Что принимает функция-валидатор, созданная с использованием
Если забыли, то вернитесь к посту от02.09.2024 .
👉 @sWebDev
Что принимает функция-валидатор, созданная с использованием
ValidatorFn
?Если забыли, то вернитесь к посту от
👉 @sWebDev
❤3👍1