Разница между Context API и Redux
Context API и Redux решают схожие задачи, но применяются в разных ситуациях. Обе технологии используются для управления состоянием в React-приложениях, но подход к их применению и масштаб использования различен.
📌 Context API хорош для передачи статичных данных или тех, что редко изменяются. Однако он не рассчитан на сложное управление состоянием, особенно если его много, и если нужно отслеживать изменения.
📌 Redux нужен там, где важно чётко отслеживать все изменения состояния, легко тестировать и логировать эти изменения, а также предсказуемо управлять ими. Он даёт больше возможностей и контроля, но требует больше кода и сложнее в настройке по сравнению с Context API.
#redux #frontend #react #context
Context API и Redux решают схожие задачи, но применяются в разных ситуациях. Обе технологии используются для управления состоянием в React-приложениях, но подход к их применению и масштаб использования различен.
Context API в React удобен, когда нужно передать данные на несколько уровней глубже по иерархии компонентов, минуя промежуточные. Например, у вас есть тема оформления (светлая/тёмная), которая должна быть доступна на любом уровне приложения. Использовать props для передачи таких данных на каждом уровне неэффективно и приводит к "props drilling". Context API позволяет создать глобальный контекст для темы, к которому любой компонент может обратиться напрямую, не завися от промежуточных компонентов.
Redux стоит использовать, когда приложение сложное и нужно централизованное управление состоянием. Представьте крупное приложение с корзиной покупок, аутентификацией, и несколькими взаимодействующими страницами. Каждая часть приложения может нуждаться в доступе к общим данным и реагировать на их изменения. В Redux есть одно глобальное хранилище, где хранится все состояние приложения. Компоненты могут получать данные из этого хранилища и отправлять туда изменения через экшены.
#redux #frontend #react #context
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Отличие useMemo от useCallback
📌 useMemo():
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.
📌 useCallback():
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.
Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.
#react #memo #useMemo #useCallback
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.
Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.
#react #memo #useMemo #useCallback
Please open Telegram to view this post
VIEW IN TELEGRAM
Менторство — самый эффективный способ обучения. В отличие от многих менторов, которые ограничиваются перепиской и предоставлением материалов, я глубоко вовлечен в процесс. Мой подход — развитие сообщества и постоянное улучшение обучения.
В IT нет такой конкуренции, как это часто изображают. Один из моих учеников за неделю прошел 5 скринингов, 3 из них привели к приглашению на технические собеседования, сейчас ожидаем фидбек от двух компаний. Диапазон зарплат — от 150 до 250 тысяч рублей. Он практикуется в Ехабе уже 1.5 месяца и посещает каждый день созвоны.
Моя программа охватывает 90% вопросов, которые могут задать на собеседовании. Ученики уверенно рассказывают о своем опыте и процессах, как отче наш. Зачем начинать с позиции джуна за 40 тысяч, если можно претендовать на мидл-уровень с зарплатой 200 тысяч? Это не фантазии — это реальность, которую я наблюдаю ежедневно, когда ребята получают офферы на 150к+.
Мой подход позволяет новичкам без опыта быть сильнее специалистов с 1-3 годами стажа. Мы изучаем полный стек, архитектуру, рабочие кейсы, а также прокачиваемся в Ехабе, работая в команде из 30 человек с ежедневными дейликами, канбан доской, планированием и ретроспективой.
К концу года каждый из вас, кто имеет базу, может найти работу с зарплатой от 150 тысяч. А новички смогут освоить стек, чтобы после Нового года приступить к поиску работы. Просто представьте, что вы работаете в сфере, которая вам нравится и получаете 150к. Это может стать правдой, если взять все в свои руки.
До конца августа сделаю скидку 10% на обучение. Это отличный шанс для тех, кто сомневался.
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
#mentor #react #frontend
В IT нет такой конкуренции, как это часто изображают. Один из моих учеников за неделю прошел 5 скринингов, 3 из них привели к приглашению на технические собеседования, сейчас ожидаем фидбек от двух компаний. Диапазон зарплат — от 150 до 250 тысяч рублей. Он практикуется в Ехабе уже 1.5 месяца и посещает каждый день созвоны.
Моя программа охватывает 90% вопросов, которые могут задать на собеседовании. Ученики уверенно рассказывают о своем опыте и процессах, как отче наш. Зачем начинать с позиции джуна за 40 тысяч, если можно претендовать на мидл-уровень с зарплатой 200 тысяч? Это не фантазии — это реальность, которую я наблюдаю ежедневно, когда ребята получают офферы на 150к+.
Мой подход позволяет новичкам без опыта быть сильнее специалистов с 1-3 годами стажа. Мы изучаем полный стек, архитектуру, рабочие кейсы, а также прокачиваемся в Ехабе, работая в команде из 30 человек с ежедневными дейликами, канбан доской, планированием и ретроспективой.
К концу года каждый из вас, кто имеет базу, может найти работу с зарплатой от 150 тысяч. А новички смогут освоить стек, чтобы после Нового года приступить к поиску работы. Просто представьте, что вы работаете в сфере, которая вам нравится и получаете 150к. Это может стать правдой, если взять все в свои руки.
До конца августа сделаю скидку 10% на обучение. Это отличный шанс для тех, кто сомневался.
Сайт с ценами:
https://reactify.ru
Канал с полным обзором обучения:
@mentor_reactify
На канале также есть гайд — заходите и забирайте себе!
#mentor #react #frontend
Какой будет порядок логов? И Что будет в этих логах?
#frontend #react
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
function App() {
const [state, setState] = useState(0)
console.log(state)
useEffect(() => {
setState(state => state + 1)
}, [])
useEffect(() => {
console.log(state)
setTimeout(() => {
console.log(state)
}, 100)
}, [])
return null
}
ReactDOM.render(<App/>, document.getElementById('root'))
#frontend #react
Render Props
Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.
Зачем нужно?
✔️ Повторное использование логики: Логику можно вынести в один компонент и использовать с разным UI.
✔️ Гибкость: Позволяет передавать любую JSX разметку, что делает компонент более универсальным.
#frontend #react
Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.
Зачем нужно?
#frontend #react
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео мы подробно рассмотрим архитектуру Frontend-приложений, начиная с технологий и инструментов, заканчивая настройками и деплоем. Это будет комплексный обзор всех ключевых компонентов архитектуры: React, Redux, Storybook, Webpack, Docker, Nginx, CI/CD и других технологий.
В следующих видео мы детально разберем каждую технологию по отдельности и начнем пошаговое создание собственного приложения с нуля.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #react #docker #cicd #deploy
Please open Telegram to view this post
VIEW IN TELEGRAM
Ранее React использовал механизм Stack Reconciler для обновления интерфейсов, что приводило к проблемам с производительностью. Одним из главных недостатков было невозможность приостановить и возобновить рендеринг, что могло вызывать "замораживание" интерфейса при выполнении тяжёлых операций. Чтобы устранить этот недостаток, начиная с React 16, была создана новая архитектура — React Fiber.
React Fiber — это переработанная структура внутреннего устройства React, которая управляет процессом рендеринга и согласования (reconciliation). Основное нововведение заключается в том, что теперь React разбивает весь процесс обновления на мелкие задачи, которые можно:
1. Приостанавливать.
2. Прерывать для выполнения более важных операций.
3. Возобновлять с того же места.
4. Отменять обновления, если компонент больше не нужен.
Эта архитектура помогает React быть более отзывчивым и гибким в работе с сложными интерфейсами.
Вместо использования традиционного стека для отслеживания состояния компонентов, Fiber создаёт связанную структуру данных для каждого элемента виртуального DOM. Это позволяет React двигаться вперед и назад по компонентному дереву, задавать приоритет задач и управлять состояниями на уровне узлов.
Каждый узел Fiber содержит:
- Тип компонента (функциональный, классовый или элемент DOM).
- Ссылки на дочерние, родительские и соседние узлы.
- Текущее состояние и приоритет выполнения.
Такой подход позволяет React выполнять задачи в соответствии с их приоритетом:
- Высокий приоритет: действия пользователя (клики, ввод текста).
- Низкий приоритет: обновление анимации или загрузка данных.
React Fiber использует две основные фазы рендеринга:
React создаёт новое дерево Fiber, вычисляя, какие изменения должны быть сделаны.
Эта фаза может прерываться и возобновляться.
Все изменения применяются к реальному DOM.
Происходит быстро и синхронно, чтобы интерфейс обновлялся без задержек.
- Time Slicing: React разбивает выполнение задач на короткие промежутки времени, чтобы не блокировать интерфейс.
- Асинхронный рендеринг: позволяет приостанавливать и возобновлять рендеринг компонентов.
- Гибкое управление задачами: React определяет, какие задачи выполнять первыми, а какие можно отложить, чтобы обеспечить плавное взаимодействие с пользователем.
#frontend #react
Please open Telegram to view this post
VIEW IN TELEGRAM
В React рендеринг — это процесс, при котором компонент заново отрисовывается на основе новых данных. Этот процесс происходит по нескольким причинам:
Если состояние компонента меняется, React автоматически запускает его ререндеринг. Например:
const CounterButton = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Click me {count} times
</button>
);
};
Когда мы вызываем setCount, значение count меняется, что приводит к ререндерингу компонента, чтобы отобразить обновлённое число.
Пропсы сами по себе не являются первичной причиной ререндеринга, а скорее следствием изменения состояния в родительском компоненте. Если состояние родителя обновляется, он перерисовывается и передает изменённые пропсы дочернему компоненту. Это приводит к ререндерингу дочернего компонента:
// Родительский компонент
const Parent = () => {
const [text, setText] = useState('Hello');
return (
<>
<Child message={text} />
<button onClick={() => setText('Hello, World!')}>Change Text</button>
</>
);
};
// Дочерний компонент
const Child = ({ message }) => <div>{message}</div>;
Когда setText меняет состояние text, компонент Parent перерисовывается, и передаёт новое значение пропса message в Child, что вызывает ререндеринг дочернего компонента.
Примечание: При использовании React.memo изменения пропсов действительно считаются причиной ререндеринга, если новый пропс отличается от предыдущего.
Если компонент использует контекст (useContext или <Context.Consumer>), и его значение меняется, то все компоненты, подписанные на этот контекст, будут перерисованы:
const ThemeContext = React.createContext('light');
const Parent = () => {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Child />
<button onClick={() => setTheme('dark')}>Toggle Theme</button>
</ThemeContext.Provider>
);
};
const Child = () => {
const theme = useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
};
Когда значение контекста theme изменяется (например, с 'light' на 'dark'), компонент Child ререндерится, чтобы отобразить новое значение темы.
Даже если состояние компонента и его пропсы остаются неизменными, он будет перерисован, если родительский компонент ререндерится (даже без видимых изменений). Это связано с тем, что дочерние компоненты автоматически ререндерятся вместе с родительским компонентом. Например:
const Parent = () => {
const [count, setCount] = useState(0);
return (
<>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child />
</>
);
};
const Child = () => <div>I'm a child</div>;
Здесь Child не зависит от состояния count, но каждый раз, когда Parent ререндерится, Child ререндерится тоже. Это можно предотвратить с помощью React.memo.
#react #frontend #memo #render
Please open Telegram to view this post
VIEW IN TELEGRAM
Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.
В Redux есть только одно общее хранилище, которое содержит все состояние приложения. Это облегчает управление состоянием и делает его предсказуемым.
Поскольку всё состояние хранится в одном месте, легче отследить изменения и управлять ими. Это позволяет избежать проблем с синхронизацией, которые могут возникнуть, если состояние хранится в разных местах.
const initialState = {
todos: [],
user: null,
};
// Всё состояние хранится в одном объекте
const state = {
todos: ['Задача 1', 'Задача 2'],
user: { name: 'Иван', age: 30 },
};
Единственным способом изменения состояния является отправка действия (action). Это гарантирует, что изменения состояния происходят только через определенные точки (actions), что делает их предсказуемыми.
Когда состояние приложения меняется, это происходит только через отправку действий. Это делает все изменения явными и отслеживаемыми.
// Действие для добавления задачи
const addTodo = (text) => ({
type: 'ADD_TODO',
payload: text,
});
// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));
Редюсеры должны быть чистыми функциями. Это значит, что для одинаковых входных данных они всегда должны возвращать одинаковый результат, и они не должны изменять свои входные данные.
Чистые функции делают состояние предсказуемым и упрощают отладку. Они не имеют побочных эффектов и не влияют на внешние состояния.
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload],
};
default:
return state; // Возвращаем новое состояние, не изменяя текущее
}
};
Поток данных в Redux всегда односторонний. Это означает, что данные передаются от состояния к представлению, и изменения состояния происходят только через действия.
Однонаправленный поток данных упрощает понимание, как данные перемещаются в приложении. Он делает отладку проще, поскольку вы всегда знаете, откуда приходят данные и как они изменяются.
// Пример потока данных
const mapStateToProps = (state) => ({
todos: state.todos,
});
// Компонент получает данные
const TodoList = ({ todos }) => (
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
);
// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);
#redux #frontend #react #flux
Please open Telegram to view this post
VIEW IN TELEGRAM
Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.
При загрузке страницы браузер загружает все ресурсы сразу, даже те, которые пользователь не видит. Это увеличивает время загрузки и может ухудшить пользовательский опыт.
Lazy-loading изображений
Современный HTML позволяет указать атрибут loading="lazy":
<img src="example.jpg" alt="Описание" loading="lazy" />
Это простой и поддерживаемый способ ленивой загрузки.
Lazy-loading компонентов в React
В React можно использовать React.lazy и Suspense:
import React, { Suspense } from 'react';
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<div>
<h1>Главная страница</h1>
<Suspense fallback={<div>Загрузка...</div>}>
<HeavyComponent />
</Suspense>
</div>
);
}
Компонент HeavyComponent загрузится только тогда, когда он понадобится.
- Ускоряет загрузку страницы.
- Снижает объем передаваемых данных.
- Улучшает производительность и SEO.
Используйте lazy-loading, чтобы сделать ваши проекты быстрее и удобнее для пользователей.
#lazy #react #optimization
Please open Telegram to view this post
VIEW IN TELEGRAM
Каждый разработчик хочет писать универсальный, чистый код, который не будет повторяться, будет оптимизированным и легкомасштабируемым. В этом видео мы разберем 5 продвинутых паттернов и подходов в React
- Slot Pattern (Component Injection)
- Render Prop
- Proxy Component
- Function as a Child
- Compound Components
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #react #patterns
Please open Telegram to view this post
VIEW IN TELEGRAM
Принципы SOLID помогают строить приложения, которые проще развивать и поддерживать в долгосрочной перспективе. Они помогают выстроить архитектуру с учетом будущих расширений и изменений. Изучив эти принципы, вы научитесь думать на шаг вперед, проектируя гибкие и масштабируемые системы.
- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#react #solid #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракцию — и покажем, как они работают в React. Узнаем, что такое Render Props, Component Injection, композиция и декомпозиция, и применим их в функциональных компонентах, Custom Hooks и HOCs.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #react #ооп
Please open Telegram to view this post
VIEW IN TELEGRAM
Выпущено три видео по паттернам и принципам программирования:
Формирование архитектурного мышления важно уже на этапе обучения. Понимание принципов и подходов к разработке помогает писать более чистый, масштабируемый код. Чем раньше вы начнете разбираться в паттернах, тем быстрее сможете применять их в своих проектах и развивать свои навыки.
Сначала может быть сложно увидеть, где и как использовать тот или иной паттерн, но с опытом вы научитесь понимать, когда он действительно необходим, а когда избыточен.
#frontend #react #solid #oop
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
5 продвинутых паттернов в React
Каждый разработчик хочет писать универсальный, чистый код, который не будет повторяться, будет оптимизированным и легкомасштабируемым. В этом видео мы разберем 5 продвинутых паттернов и подходов в React
- Slot Pattern (Component Injection)
- Render Prop…
- Slot Pattern (Component Injection)
- Render Prop…
UI Kit представляет собой систематизированную коллекцию интерфейсных компонентов, которая служит фундаментом для разработки приложений. В современных проектах наличие продуманного UI Kit перешло из категории рекомендаций в обязательное требование по нескольким ключевым причинам.
[Картинка 1: Пример Storybook]
UI Kit — это не просто коллекция кнопок и полей ввода. Это комплексная система, включающая:
- Базовые компоненты интерфейса (кнопки, формы, переключатели)
- Типографику и иерархию текста
- Цветовую палитру с семантическим значением цветов
- Систему отступов и размеров
- Состояния элементов (активное, неактивное, hover, focus)
[Картинка 2 и 3: Дизайн в Figma]
При создании компонентов для UI Kit необходимо придерживаться нескольких фундаментальных принципов
1. Семантическая корректность
Каждый компонент должен максимально точно отражать свою суть на уровне HTML-разметки. Кнопка — это <button> или <input type="button">, ссылка — <a>, поле ввода — <input> или <textarea>. Это важно не только для доступности (accessibility), но и для правильной работы в различных контекстах (например, в формах или при навигации).
2. Полнота свойств
Компонент должен поддерживать все стандартные HTML-атрибуты соответствующего элемента. Для кнопки это включает type (button, submit, reset), disabled, autofocus и другие.
3. Управляемость извне
Компонент не должен содержать внутреннюю логику состояния (где это возможно). Все состояния (активное, неактивное, загружающееся) должны управляться через пропсы. Это делает компонент предсказуемым и легко интегрируемым в любую архитектуру.
4. Принцип открытости/закрытости
Компонент должен быть закрыт для модификаций (его базовое поведение нельзя изменить), но открыт для расширения. На практике это означает:
- Возможность добавления классов через className
- Возможность передачи произвольных атрибутов
- Гибкость в контенте через children
5. Единый источник правды
Изменение компонента в UI Kit должно автоматически отражаться во всех местах его использования. Это требует тщательного проектирования API компонента на этапе создания, чтобы избежать необходимости "ветвления" логики в будущем.
Оптимальная структура для UI Kit в проекте выглядит следующим образом:
src/
ui/
Button/
Button.tsx # React-компонент
Button.stories.tsx # Документация в Storybook
Button.test.tsx # Тесты компонента
Button.module.css # Стили компонента
Input/ # Аналогичная структура для других компонентов
...
styles/
variables.css # CSS-переменные (цвета, отступы, шрифты)
typography.css # Типографика
animations.css # Анимации
global.css # Глобальные стили
Перед разработкой тщательно изучаем макеты и выделяем все варианты кнопок: Варианты по стилю, Размеры, Состояния, Дополнительные требования (иконки, текст).
[Картинка 4: Компонент Button]
При стилизации используем CSS-переменные из дизайн-системы, Для каждого варианта прописываем цвета для всех состояний.
[Картинка 5: CSS-переменные]
Создаем подробные TypeScript-интерфейсы: Объединение с нативными атрибутами button и a, Поддержка всех стандартных HTML-атрибутов, Четкое разделение кастомных и стандартных пропсов
[Картинка 6: Типизация кнопки]
Далее создаем сторисы для всех вариантов: Основной вид, Все состояния, Примеры с иконками, Вариант как ссылки
#ui #storybook #button #react
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯 Подборка сложных вопросов с собеседований
1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.
CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.
2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.
3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).
4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.
5. Как в runtime проверить поддержку CSS-свойства?
Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
В CSS:
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
Импорт типа (TypeScript 4.5+):
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript
1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.
CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.
2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.
3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).
4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.
<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->
5. Как в runtime проверить поддержку CSS-свойства?
if (CSS.supports('display', 'grid')) {
console.log('Grid поддерживается!');
} Альтернатива: @supports в CSS.
6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.
7. Как определить системную тему (dark/light)?
В JS:
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Следить за изменением темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');
});
В CSS:
@media (prefers-color-scheme: dark) {
body { background: #000; color: #fff; }
}
8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).
.container { container-type: inline-size; }
@container (max-width: 500px) {
.card { flex-direction: column; }
}
9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.
Вывод: так писать нельзя, только padding: 1.5px.
10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
const arr = [1, 2, 3] as const; // Делаем кортеж
type T = typeof arr[number]; // 1 | 2 | 3
Без as const тип будет number[].
11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:
import { ReactNode } from 'react'; // Может попасть в бандл.
Импорт типа (TypeScript 4.5+):
import { type ReactNode } from 'react'; // Удаляется при компиляции.
Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).
#собеседования #react #javascript #typescript