React.memo() — это функция высшего порядка в React, используемая для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры компонента, если его пропсы не изменились. Это особенно полезно для компонентов, которые часто получают одни и те же пропсы.Пример использования
React.memo():
import React from 'react';
const MyComponent = React.memo(({ name }) => {
console.log("Rendering MyComponent");
return <div>Hello, {name}!</div>;
});
export default MyComponent;
В этом примере
MyComponent будет рендериться только тогда, когда его пропсы изменяются. Если name остается прежним, повторный рендер не произойдет, что может значительно улучшить производительность приложения, особенно при работе с большими компонентами или сложными деревьями компонентов.React.memo() работает аналогично PureComponent для классовых компонентов, но предназначен для функциональных компонентов.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
Атрибут
content в мета-тегах HTML используется для задания значения, связанного с определенным мета-тегом. Мета-теги предоставляют метаинформацию о веб-странице, такую как описание, ключевые слова, автор и настройки отображения.Пример использования атрибута
content в мета-тегах:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="denoscription" content="This is an example of a meta denoscription.">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<noscript>Document</noscript>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
В этом примере мета-теги используют атрибут
content для задания описания страницы, ключевых слов, автора и параметров отображения. Эти данные помогают поисковым системам и браузерам лучше понимать и обрабатывать содержимое страницы.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14
useState — это один из основных хуков в React, который позволяет добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления.Пример использования
useState:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Current count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
В этом примере
useState(0) инициализирует состояние count со значением 0. Функция setCount используется для обновления состояния. При каждом вызове setCount, компонент перерисовывается с новым значением состояния.useState упрощает управление состоянием в функциональных компонентах, делая их более компактными и понятными по сравнению с классовыми компонентами.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤2🔥1
Добавление нового свойства в объект JavaScript — это простая и часто используемая операция. Существует несколько способов сделать это.
Первый способ — использование точечной нотации:
const person = {};
person.name = 'John';
Этот код добавляет свойство
name со значением 'John' в объект person.Второй способ — использование квадратных скобок:
const person = {};
person['age'] = 30;
Этот метод полезен, когда имя свойства хранится в переменной или содержит специальные символы.
Также можно использовать метод
Object.assign() для добавления нескольких свойств:
const person = {};
Object.assign(person, { height: 180, weight: 75 });
Этот метод копирует свойства из одного или нескольких объектов в целевой объект.
Каждый из этих способов позволяет гибко и эффективно управлять свойствами объектов в JavaScript.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
Задание шрифта для всего HTML-документа — важный шаг в стилизации веб-страницы. Это можно сделать с помощью CSS, применив стиль к элементу
<body> или к селектору *, который охватывает все элементы.Пример использования селектора
body:
body {
font-family: 'Arial', sans-serif;
}
Этот код устанавливает шрифт Arial для всего содержимого страницы. Если Arial недоступен, будет использован ближайший доступный шрифт без засечек (sans-serif).
Альтернативный способ — использование универсального селектора
*:
* {
font-family: 'Arial', sans-serif;
}
Этот подход также задает шрифт для всех элементов, но может быть менее эффективным, так как затрагивает все элементы, включая те, которые могут не требовать изменения шрифта.
В обоих случаях важно убедиться, что выбранный шрифт поддерживает нужные языки и символы.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤1
Namespaces в TypeScript — это способ организации и группировки кода, чтобы избежать конфликтов имен и улучшить структуру приложения. Они позволяют объединять логически связанные компоненты, такие как классы, интерфейсы и функции, в единое пространство имен.
Пример использования namespace:
namespace Geometry {
export class Circle {
constructor(public radius: number) {}
area(): number {
return Math.PI * this.radius * this.radius;
}
}
}
const circle = new Geometry.Circle(5);
console.log(circle.area());
В этом примере класс
Circle находится в пространстве имен Geometry. Использование export делает класс доступным за пределами namespace.Namespaces полезны в крупных приложениях, но в современных проектах часто предпочитают модули ES6, которые обеспечивают более гибкую систему управления зависимостями.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Указание фавикона на HTML-странице — это простой способ улучшить визуальное восприятие сайта в браузере. Фавикон — это небольшая иконка, отображаемая на вкладке браузера рядом с названием страницы.
Для добавления фавикона используется тег
<link> в разделе <head>:
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">
Атрибут
href указывает путь к файлу иконки. Обычно это файл с расширением .ico, но можно использовать и другие форматы, такие как .png или .noscript.Если требуется поддержка ретина-дисплеев, можно указать несколько иконок разных размеров:
<link rel="icon" href="/path/to/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/path/to/favicon-16x16.png" sizes="16x16" type="image/png">
Эти теги обеспечивают корректное отображение фавикона на всех устройствах и платформах.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Единицы измерения
em и rem в CSS используются для задания относительных размеров элементов, таких как шрифты, отступы и размеры блоков. Они обеспечивают гибкость и адаптивность дизайна.em — это относительная единица, основанная на размере шрифта родительского элемента. Например, если размер шрифта родителя равен 16px, то 1em будет равен 16px. Использование em может привести к каскадному эффекту, где размеры увеличиваются или уменьшаются в зависимости от вложенности.rem — это единица, основанная на размере шрифта корневого элемента (<html>). Например, если размер шрифта корневого элемента равен 16px, то 1rem всегда будет равен 16px, независимо от вложенности.Основное отличие заключается в том, что
em зависит от родителя, а rem — от корня документа. Это делает rem более предсказуемым и удобным для создания адаптивных интерфейсов.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14
Удаление свойства из объекта в JavaScript осуществляется с помощью оператора
delete. Этот оператор позволяет удалить указанное свойство из объекта, изменяя его структуру.Пример использования оператора
delete:
const car = {
brand: 'Toyota',
model: 'Corolla',
year: 2020
};
delete car.year;
В этом примере свойство
year удаляется из объекта car. После выполнения операции объект будет содержать только свойства brand и model.Важно помнить, что
delete изменяет сам объект, и удаленное свойство больше не будет доступно. Однако delete не влияет на прототипы объекта, и не следует использовать его для удаления переменных или функций, объявленных с помощью var, let или const.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Настройка компилятора TypeScript осуществляется через файл
tsconfig.json, который находится в корне проекта. Этот файл определяет корневые файлы и параметры компиляции.Пример базового
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
В
compilerOptions задаются параметры компиляции. Например, target определяет версию ECMAScript, в которую будет транслироваться код, а module указывает систему модулей.Параметры
include и exclude определяют, какие файлы и папки будут включены или исключены из компиляции.Настройка
tsconfig.json позволяет гибко управлять процессом компиляции и адаптировать его под нужды проекта.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Контекст в React — это механизм, позволяющий передавать данные через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий пользователь, тема или настройки локализации.
Создание контекста начинается с
React.createContext():
const ThemeContext = React.createContext('light');
Затем контекст предоставляет данные с помощью компонента
Provider:
<ThemeContext.Provider value="dark">
<App />
</ThemeContext.Provider>
Компоненты, которым нужен доступ к контексту, используют
useContext хук:
const theme = React.useContext(ThemeContext);
Контекст упрощает управление состоянием в сложных приложениях, но его следует использовать с осторожностью, чтобы избежать избыточной зависимости компонентов от глобального состояния.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Свойство
overflow в CSS управляет отображением содержимого, выходящего за пределы контейнера. Оно определяет, как браузер должен обрабатывать избыточное содержимое.Основные значения свойства
overflow:-
visible: содержимое не обрезается и может выходить за границы элемента. Это значение по умолчанию.-
hidden: содержимое обрезается, и невидимая часть не отображается.-
scroll: содержимое обрезается, но появляется полоса прокрутки для просмотра скрытой части.-
auto: добавляет полосы прокрутки только при необходимости, если содержимое превышает размеры контейнера.Пример использования:
.container {
width: 200px;
height: 100px;
overflow: auto;
}
Свойство
overflow помогает контролировать внешний вид и поведение элементов, особенно в адаптивных интерфейсах.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤1🔥1
Атрибут
placeholder в HTML используется в элементах <input> и <textarea> для отображения текстовой подсказки внутри поля ввода. Эта подсказка исчезает, когда пользователь начинает вводить данные.Пример использования атрибута
placeholder:
<input type="text" placeholder="Введите ваше имя">
В этом примере текст "Введите ваше имя" будет отображаться в поле ввода до тех пор, пока пользователь не начнет вводить текст.
Атрибут
placeholder улучшает пользовательский интерфейс, предоставляя контекст и указания по заполнению формы. Однако не следует полагаться на него как на единственный способ передачи информации, так как он исчезает при вводе и может быть недоступен для пользователей с ограниченными возможностями.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14⚡1
Хуки в React — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Они упрощают управление состоянием и жизненным циклом без необходимости использовать классовые компоненты.
Основные хуки:
-
useState: позволяет добавлять состояние в функциональные компоненты. Возвращает текущее значение состояния и функцию для его обновления.
const [count, setCount] = React.useState(0);
-
useEffect: выполняет побочные эффекты в компонентах, такие как загрузка данных или подписка на события. Заменяет методы жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount.
React.useEffect(() => {
// эффект
}, []);
-
useContext: позволяет использовать контекст в функциональных компонентах, упрощая доступ к глобальным данным.
const value = React.useContext(MyContext);
-
useMemo: мемоизирует вычисленные значения, чтобы избежать ненужных повторных вычислений при рендере.
const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);
-
useCallback: мемоизирует функции, чтобы избежать их пересоздания при каждом рендере, что полезно при передаче функций в дочерние компоненты.
const memoizedCallback = React.useCallback(() => {
doSomething(a, b);
}, [a, b]);
-
useRef: создает изменяемый объект, который сохраняется между рендерами. Часто используется для доступа к DOM-элементам или хранения любых изменяемых значений.
const inputRef = React.useRef(null);
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥2
Функция обратного вызова (callback) в JavaScript — это функция, переданная в другую функцию в качестве аргумента и вызываемая после завершения операции.
Пример использования callback:
function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => callback(data))
.catch(error => console.error('Error:', error));
}
function handleData(data) {
console.log('Received data:', data);
}
fetchData('https://api.example.com/data', handleData);
В этом примере
fetchData принимает URL и функцию handleData в качестве callback. После получения данных handleData вызывается для обработки результата.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17💯1
Ambient Declarations в TypeScript используются для описания типов, которые существуют в других файлах или библиотеках, но не определены в текущем коде. Они позволяют TypeScript понимать типы, предоставляемые внешними JavaScript библиотеками, без необходимости переписывать их.
Ambient Declarations создаются с помощью ключевого слова
declare. Например, для использования глобальной переменной, определенной вне TypeScript:
declare const API_URL: string;
Для описания интерфейса библиотеки можно использовать
declare module:
declare module 'my-library' {
export function myFunction(): void;
}
Ambient Declarations часто находятся в файлах с расширением
.d.ts, которые содержат только объявления типов. Эти файлы помогают интегрировать TypeScript с существующими JavaScript проектами и библиотеками, обеспечивая статическую проверку типов и автодополнение в редакторах.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3
Хуки в React были введены для решения нескольких ключевых проблем, связанных с управлением состоянием и логикой в компонентах. До появления хуков использовались классовые компоненты для работы с состоянием и методами жизненного цикла, что приводило к более сложному и менее читаемому коду.
Основные причины введения хуков:
- Упрощение кода: хуки позволяют использовать состояние и другие возможности React в функциональных компонентах, делая код более простым и понятным.
- Повторное использование логики: хуки упрощают повторное использование логики состояния между компонентами без необходимости использовать HOC или render props.
- Управление побочными эффектами:
useEffect заменяет методы жизненного цикла, упрощая управление побочными эффектами и улучшая читаемость кода.- Избежание дублирования: хуки помогают избежать дублирования кода, связанного с состоянием и логикой, улучшая структуру и поддержку компонентов.
Введение хуков значительно улучшило разработку на React, сделав её более гибкой и эффективной.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤2
Подключение CSS к HTML-документу — важный шаг для стилизации веб-страницы. Существует несколько способов сделать это:
1. Внешний файл CSS: наиболее распространенный метод, который позволяет хранить стили отдельно от HTML. Используется тег
<link> в разделе <head>:
<link rel="stylesheet" href="styles.css">
2. Встроенные стили: стили добавляются непосредственно в HTML-документ внутри тега
<style> в разделе <head>:
<style>
body {
background-color: #f0f0f0;
}
</style>
3. Inline-стили: стили применяются непосредственно к элементам через атрибут
style. Этот метод менее предпочтителен из-за плохой читаемости и поддержки:
<div style="color: red;">Hello World</div>
Использование внешнего файла CSS рекомендуется для лучшей организации и повторного использования стилей.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🤔1💯1
Прототипное наследование в JavaScript — это механизм, позволяющий объектам наследовать свойства и методы от других объектов. В основе этого механизма лежит концепция прототипов, где каждый объект может иметь ссылку на другой объект, называемый прототипом.
Когда обращение к свойству объекта происходит, JavaScript сначала ищет это свойство в самом объекте. Если оно не найдено, поиск продолжается в прототипе объекта, и так далее, по цепочке прототипов.
Пример создания объекта с прототипным наследованием:
const animal = {
eat() {
console.log('Eating');
}
};
const dog = Object.create(animal);
dog.bark = function() {
console.log('Barking');
};
dog.eat(); // 'Eating'
dog.bark(); // 'Barking'
В этом примере объект
dog наследует метод eat от объекта animal через прототип. Прототипное наследование позволяет создавать иерархии объектов, обеспечивая гибкость и повторное использование кода.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥3💯1
Тег
<link> в HTML используется для установления связей между текущим документом и внешними ресурсами. Он обычно располагается в разделе <head> и не отображается на странице. Основные применения тега <link> включают:- Подключение CSS: наиболее распространенное использование — подключение внешних таблиц стилей для стилизации веб-страницы.
<link rel="stylesheet" href="styles.css">
- Фавикон: указание иконки сайта, отображаемой на вкладке браузера.
<link rel="icon" href="favicon.ico" type="image/x-icon">
- Шрифты и другие ресурсы: подключение шрифтов или других ресурсов, таких как RSS-ленты.
<link rel="alternate" type="application/rss+xml" href="feed.xml">
Тег
<link> играет важную роль в управлении внешними ресурсами, обеспечивая гибкость и модульность веб-страниц.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥2💯1
"use strict" — это директива в JavaScript, которая активирует строгий режим. Строгий режим изменяет семантику JavaScript, делая его более безопасным и оптимизированным. Он помогает выявлять потенциальные ошибки и улучшает производительность кода.
Пример использования:
"use strict";
function example() {
x = 10; // Ошибка: x не определена
}
example();
В строгом режиме запрещено использование необъявленных переменных, что помогает избежать ошибок. Также он предотвращает дублирование имен параметров в функциях и запрещает использование некоторых зарезервированных слов для будущих версий JavaScript.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤1