📌 Какие способы изоляции стилей существуют?

💬 Спрашивают в 20% собеседований

Изоляция стилей в веб-разработке важна для предотвращения конфликтов CSS и обеспечения того, чтобы стили одного компонента или раздела страницы не влияли на другие. Существует несколько таких подходов:

1️⃣ Использование уникальных имен классов

Это самый простой способ избежать конфликтов. Может быть достигнуто с помощью методологий именования, таких как BEM (Блок, Элемент, Модификатор), которая предлагает чёткую структуру для именования классов.

2️⃣ CSS-модули

Они представляют собой подход, при котором классы и идентификаторы, определенные в CSS-файле, автоматически преобразуются в уникальные имена. Это позволяет избежать конфликтов имен классов между различными компонентами. Они поддерживаются в сборщиках, таких как Webpack, и во фреймворках, например, в Create React App.

3️⃣ CSS-in-JS

Библиотеки CSS-in-JS, такие как Styled-components и Emotion, позволяют писать CSS прямо в JavaScript-файлах. Это обеспечивает полную изоляцию стилей, поскольку стили применяются непосредственно к компонентам, и конфликты имен классов исключаются.

4️⃣ Shadow DOM

Технология, позволяющая инкапсулировать DOM-дерево и стили компонента так, что они не влияют на основной документ. Это ключевая часть Web Components и позволяет создавать полностью изолированные компоненты.

5️⃣ Scoped CSS

Некоторые современные фреймворки и инструменты, такие как Vue.js, предлагают возможность использования scoped стилей, где CSS применяется исключительно к компоненту, в котором он объявлен, без воздействия на остальную часть приложения.

6️⃣ Использование IFRAME

Размещение контента внутри <iframe> позволяет полностью изолировать его стили от остальной части страницы. Это крайний способ, который может быть полезен для встраивания стороннего контента, но он приносит дополнительную сложность и ограничения.

7️⃣ CSS-переменные для темизации

Сами по себе не обеспечивают изоляцию, их можно использовать для создания гибкой системы тем, которая позволяет контролировать влияние глобальных стилей на компоненты и облегчает поддержание стилевой согласованности.

🤔 Итог:

Изоляция стилей — важный аспект разработки надёжных и масштабируемых веб-приложений. Выбор метода зависит от конкретных требований проекта, технологического стека и предпочтений разработчика. Использование современных инструментов и подходов, таких как CSS-модули, CSS-in-JS и Web Components, может значительно упростить управление стилями и повысить качество конечного продукта.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 В чем различие методов call apply bind?

💬 Спрашивают в 20% собеседований

Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.

🤔 Сall

Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

➕ Пример:

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice".

🤔 Apply

Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

➕ Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

В этом случае он вызывает функцию greet с this, установленным в "Earth", и аргументами, переданными в виде массива.

🤔 Bind

Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

➕ Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

Здесь он используется для создания новой функции greetEarth, которая при вызове выводит тот же результат, что и предыдущие примеры, но с тем отличием, что контекст this и аргументы были заранее заданы.

🤔 Итог:

➕ call вызывает функцию с указанным контекстом this и отдельными аргументами.

➕ apply аналогичен call, но принимает аргументы в виде массива.

➕ bind создаёт новую функцию с предустановленным контекстом this и аргументами, если они были предоставлены, но не вызывает её немедленно.

Эти методы позволяют более гибко управлять контекстом выполнения функций, что является мощным инструментом, особенно при работе с объектно-ориентированным кодом и асинхронными вызовами.


🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Какие способы создания функций знаешь?

💬 Спрашивают в 3% собеседований

В JavaScript существует несколько способов создания функций. Каждый способ имеет свои особенности и применяется в зависимости от контекста. Рассмотрим основные из них: функциональные выражения, функциональные объявления, стрелочные функции и методы объекта.

1️⃣ Функциональное объявление (Function Declaration)
Это наиболее традиционный способ объявления функции. Функция, объявленная таким образом, доступна во всем блоке кода благодаря поднятию (hoisting).

🤔 Пример:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"

🤔 Особенности:

➕ Функция доступна до своего объявления благодаря поднятию.

➕ Легко читается и используется для создания именованных функций.

2️⃣ Функциональное выражение (Function Expression)
Функция, объявленная как выражение, не поднимается. Такая функция может быть анонимной или именованной.

🤔 Пример:

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet("Bob")); // "Hello, Bob!"

🤔 Особенности:

➕ Функция не поднимается, доступна только после её объявления.

➕ Может быть анонимной или именованной.

3️⃣ Стрелочные функции (Arrow Functions)
Стрелочные функции введены в ES6. Они имеют более короткий синтаксис и не имеют своего this, arguments, super, или new.target.

🤔 Пример:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Charlie")); // "Hello, Charlie!"

🤔 Особенности:

➕ Не имеют своего this, используют значение this из внешнего контекста.

➕ Не могут быть использованы в качестве конструкторов.

➕ Подходят для коротких функций и коллбеков.

4️⃣ Методы объекта (Object Methods)
Функции могут быть объявлены как методы объекта. В ES6 для этого используется сокращенный синтаксис.

🤔 Пример:

const person = {
  name: "David",
  greet() {
    return `Hello, ${this.name}!`;
  }
};

console.log(person.greet()); // "Hello, David!"

🤔 Особенности:

➕ Метод объекта имеет доступ к свойствам объекта через this.

➕ Поддерживается краткий синтаксис в ES6.

5️⃣ Конструкторные функции (Constructor Functions)
Конструкторные функции используются для создания объектов с помощью ключевого слова new.

🤔 Пример:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return `Hello, ${this.name}!`;
};

const person = new Person("Eve");
console.log(person.greet()); // "Hello, Eve!"

🤔 Особенности:

➕ Используются с ключевым словом new для создания новых объектов.

➕ Создают экземпляры объектов с общими методами.

6️⃣ Генераторные функции (Generator Functions)

Генераторные функции возвращают объект-итератор и могут приостанавливать своё выполнение с помощью ключевого слова yield.

🤔 Пример:

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

🤔 Особенности:

➕ Возвращают объект-итератор.

➕ Могут приостанавливать и возобновлять выполнение.

🤔 Вкратце:

1️⃣ Функциональное объявление: Классический способ, функция доступна во всём блоке.

2️⃣ Функциональное выражение: Функция объявляется в выражении, не поднимается.

3️⃣ Стрелочные функции: Краткий синтаксис, нет своего this.

4️⃣ Методы объекта: Функции, объявленные внутри объекта.

5️⃣ Конструкторные функции: Используются с new для создания объектов.

6️⃣ Генераторные функции: Возвращают итераторы, могут приостанавливать выполнение.

Короткий ответ: В JavaScript можно создавать функции разными способами: обычные функции, функции внутри переменных, стрелочные функции, функции внутри объектов, функции для создания объектов и специальные функции, которые могут делать паузы.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что известно о различии между function expression и function declaration?

💬 Спрашивают в 20% собеседований

Существует два основных способа объявления функций: Function Declaration (Объявление Функции) и Function Expression (Функциональное Выражение). Хотя оба подхода определяют функции, между ними есть несколько ключевых различий, влияющих на поведение и использование функций в коде.

🤔 Function Declaration (Объявление Функции)

Способ объявления функции, при котором используется ключевое слово function, за которым следует имя функции.

function sum(a, b) {
  return a + b;
}

🤔 Особенности:

➕ Поднятие (Hoisting):

Поднимаются вверх их области видимости перед выполнением кода, что позволяет вызывать функции до их объявления в коде.

➕ Область видимости:

Определяется её местом в коде: в глобальной области видимости, в области видимости другой функции или в блочной области видимости (в строгом режиме).

➕ Мутабельность: Имя функции является неизменным и не может быть переназначено.

🤔 Function Expression (Функциональное Выражение)

Способ объявления функции, при котором функция создаётся в рамках выражения. Функциональные выражения могут быть анонимными или именованными.

const sum = function(a, b) {
  return a + b;
};

🤔 Особенности:

➕ Поднятие (Hoisting):

Переменные, объявленные через var, поднимаются, но инициализируются значением undefined, поэтому функциональное выражение не будет доступно до его объявления в коде. Если функциональное выражение объявлено через let или const, то оно вообще не будет доступно до объявления из-за временной мертвой зоны.

➕ Анонимные и именованные функции:

Функциональные выражения могут быть анонимными (не иметь имени) или именованными. Именованные функциональные выражения могут быть полезны для улучшения читаемости кода и при отладке.

➕ Использование в выражениях:

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

🤔 Итог:

Основное различие между Function Declaration и Function Expression заключается в том, что объявления функций поднимаются и доступны в своей области видимости до выполнения кода, в то время как функциональные выражения доступны только после своего объявления в коде. Выбор между этими двумя способами объявления функций зависит от конкретной задачи, стиля программирования и предпочтений разработчика. Function Expression предоставляет большую гибкость, особенно когда необходимо использовать анонимные функции или присваивать функции переменным.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌В чём разница между классической функцией и стрелочной?

💬 Спрашивают в 20% собеседований

Классические функции (объявленные через ключевое слово function) и стрелочные функции (введённые в ES6 через => синтаксис) являются двумя способами объявления функций, но между ними есть несколько важных различий:

1️⃣ Синтаксис

➕ Классическая функция:

function add(a, b) {
  return a + b;
}

➕Стрелочная функция:

const add = (a, b) => a + b;

Предлагают более краткий синтаксис для написания функций, особенно если функция состоит из одного выражения.

2️⃣ Контекст this

В классических функциях контекст определяется тем, как функция была вызвана. В стрелочных функциях контекст наследуется из окружающего контекста (лексический контекст this), где функция была объявлена.

➕ Пример с классической функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(function() {
      console.log(this.id); // this ссылается на глобальный объект или undefined в строгом режиме, а не на obj
    }, 1000);
  }
};

➕Пример со стрелочной функцией:

const obj = {
  id: 42,
  counter: function() {
    setTimeout(() => {
      console.log(this.id); // this корректно ссылается на obj, так как стрелочная функция наследует this из окружения
    }, 1000);
  }
};

3️⃣ Конструктор

Классические функции могут использоваться с помощью ключевого слова new. Стрелочные функции не могут быть использованы как конструкторы, и попытка это сделать приведет к ошибке.

➕ Пример с классической функцией:

function Person(name) 
{
  this.name = name;
}
const person = new Person("Alice");

➕ Попытка использовать стрелочную функцию как конструктор:

const Person = (name) => {
  this.name = name;
};
// const person = new Person("Alice"); // Ошибка: Person не является конструктором

4️⃣ Аргументы

В классических функциях можно использовать объект arguments, который содержит аргументы, переданные функции. В стрелочных функциях нет объекта arguments, но можно использовать оператор расширения ... для достижения аналогичного результата.

🤔 Итог:

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

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое макро и микро задачи?

💬 Спрашивают в 20% собеседований

Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают.

1️⃣ Микро-задачи (Microtasks)

Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу.

🤔 Примеры:

➕ then, catch, finally

➕ queueMicrotask()

2️⃣ Макро-задачи (Macrotasks)

Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче.

🤔 Примеры:

➕ setTimeout

➕ setInterval

➕ setImmediate (Node.js)

➕ I/O операции

➕ Интерактивные действия, такие как клики мыши и нажатия клавиш

🤔 Различия и порядок выполнения

Основное различие между макро- и микро-задачами заключается в их приоритете выполнения:

➕ После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами.

➕ Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются.

➕ Пример:

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

🤔 Итог:

Понимание различий между макро- и микро-задачами важно для эффективной работы с асинхронным кодом, поскольку это влияет на порядок выполнения операций и может быть источником трудноуловимых ошибок или неожиданного поведения программы.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Что такое this?

💬 Спрашивают в 17% собеседований

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

🤔Контексты использования:

1️⃣ Глобальный контекст:

В глобальном контексте (вне каких-либо функций) он ссылается на глобальный объект. В браузере глобальным объектом является window, в Node.js — global.

console.log(this === window); // в браузере вернет true

2️⃣ Функции (не строгий режим):

В функциях, вызванных обычным способом (не как методы объекта), он ссылается на глобальный объект. В строгом режиме ("use strict") this будет undefined, если функция вызвана не как метод объекта.

   function show() {
      console.log(this === window); // true в браузере в нестрогом режиме
      console.log(this); // undefined в строгом режиме
    }
    show();

3️⃣ Методы объекта:

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

const obj = {
      myMethod() {
        console.log(this);
      }
    };
    obj.myMethod(); // this ссылается на obj

4️⃣ Конструкторы:

В функции-конструкторе, вызванной с new, он ссылается на вновь созданный объект.

function Person(name) {
      this.name = name;
    }
    const person = new Person("Alice");
    console.log(person.name); // Alice

5️⃣ Стрелочные функции:

Стрелочные функции не имеют собственного контекста, вместо этого они захватывают его из внешнего лексического окружения.

const obj = {
      method: function() {
        const arrowFunc = () => console.log(this);
        arrowFunc(); // this ссылается на obj
      }
    };
    obj.method();

6️⃣ Явное привязывание:

С помощью методов call, apply и bind можно явно указать контекст для функции.

function show() {
      console.log(this);
    }
    const obj = {name: "Explicit context"};
    show.call(obj); // this в show() ссылается на obj

🤔 Итог:

Важность понимания this
Понимание механизма его работы важно для эффективного использования, особенно при работе с объектно-ориентированным кодом и при создании сложных веб-приложений, где часто требуется контролировать контекст выполнения функций и методов.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Для чего был создан react?

💬 Спрашивают в 3% собеседований

React — это библиотека JavaScript для построения пользовательских интерфейсов, разработанная Facebook. React был создан для решения ряда проблем, с которыми сталкивались разработчики веб-приложений, особенно в крупных и динамических проектах. Давайте рассмотрим ключевые цели и преимущества, которые мотивировали создание React:

🤔 Основные причины создания React:

1️⃣ Компонентный подход:

➕ Проблема: Разработка крупных веб-приложений становится сложной из-за сложности управления состоянием и взаимосвязями между различными частями пользовательского интерфейса.

➕ Решение: React использует компонентный подход, который разбивает интерфейс на небольшие, изолированные и переиспользуемые компоненты. Каждый компонент управляет своим состоянием и логикой, что упрощает разработку и поддержку кода.

2️⃣ Виртуальный DOM:

➕ Проблема: Операции с реальным DOM медленные и неэффективные, особенно при частых обновлениях пользовательского интерфейса.

➕ Решение: React внедряет концепцию виртуального DOM, который представляет собой легковесную копию реального DOM. React сначала обновляет виртуальный DOM, затем вычисляет разницу (diff) с реальным DOM и минимально обновляет реальный DOM, что значительно повышает производительность.

3️⃣ Однонаправленный поток данных:

➕ Проблема: Двусторонняя привязка данных в крупных приложениях может привести к сложностям в отслеживании изменений и ошибок.

➕ Решение: React использует однонаправленный поток данных, где данные передаются вниз по дереву компонентов через свойства (props), а события и изменения поднимаются вверх. Это делает управление состоянием и данными более предсказуемым и легким для понимания.

🤔 Компонентный подход:

// Определение простого компонента
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Использование компонента
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

export default App;

🤔 Виртуальный DOM:

React автоматически обрабатывает обновления виртуального DOM, что позволяет разработчикам сосредоточиться на логике и интерфейсе, а не на оптимизации работы с DOM.

// Компонент, который обновляет состояние и интерфейс
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

🤔 Однонаправленный поток данных:

// Компонент родитель
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'Initial Value' };
  }

  handleChange = (newValue) => {
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <ChildComponent value={this.state.value} onChange={this.handleChange} />
      </div>
    );
  }
}

// Компонент потомок
function ChildComponent(props) {
  return (
    <div>
      <input
        type="text"
        value={props.value}
        onChange={(e) => props.onChange(e.target.value)}
      />
    </div>
  );
}

export default ParentComponent;

🤔 Заключение

React был создан для упрощения разработки сложных и динамических веб-приложений. Его компонентный подход, использование виртуального DOM, однонаправленный поток данных и поддержка мощной экосистемы инструментов делают его мощным и гибким инструментом для создания пользовательских интерфейсов.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Как отрисовать компонент по условию?

💬 Спрашивают в 6% собеседований

В React отрисовка компонентов по условию осуществляется с помощью условных операторов JavaScript внутри JSX. Это позволяет отображать компоненты или элементы только тогда, когда выполняется определенное условие. Рассмотрим несколько способов условной отрисовки компонентов в React.

1️⃣ Использование тернарного оператора

Тернарный оператор ? : позволяет компактно проверять условие и отрисовывать один из двух компонентов.

🤔 Пример:

import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
        </div>
    );
};

export default MyComponent;

2️⃣ Логическое И (&&)

Можно использовать логический оператор && для отрисовки компонента только тогда, когда условие истинно.

🤔 Пример:

import React from 'react';
const MyComponent = ({ showDetails }) => {
    return (
        <div>
            <h1>Item</h1>
            {showDetails && <p>Here are the details...</p>}
        </div>
    );
};
export default MyComponent;

3️⃣ Условный рендеринг с if...else

Для более сложной логики условного рендеринга можно использовать обычные операторы if...else внутри функции компонента.

🤔 Пример:

import React from 'react';
const MyComponent = ({ status }) => {
    if (status === 'loading') {
        return <p>Loading...</p>;
    } else if (status === 'error') {
        return <p>Error occurred!</p>;
    } else if (status === 'success') {
        return <p>Data loaded successfully!</p>;
    } else {
        return null; // Возвращаем null, чтобы не отрисовывать ничего
    }
};
export default MyComponent;

4️⃣ Условный рендеринг с помощью функций

Можно вынести условную логику рендеринга в отдельную функцию для лучшей читаемости и повторного использования.

🤔 Пример:

import React from 'react';
const renderContent = (status) => {
    switch (status) {
        case 'loading':
            return <p>Loading...</p>;
        case 'error':
            return <p>Error occurred!</p>;
        case 'success':
            return <p>Data loaded successfully!</p>;
        default:
            return null;
    }
};
const MyComponent = ({ status }) => {
    return (
        <div>
            {renderContent(status)}
        </div>
    );
};
export default MyComponent;

5️⃣ Использование IIFE (немедленно вызываемые функциональные выражения)

Можно использовать IIFE (Immediately Invoked Function Expression) для выполнения более сложной логики рендеринга внутри JSX.

🤔 Пример:

import React from 'react';
const MyComponent = ({ isLoggedIn, userName }) => {
    return (
        <div>
            {(() => {
                if (isLoggedIn) {
                    return <p>Welcome back, {userName}!</p>;
                } else {
                    return <p>Please log in.</p>;
                }
            })()}
        </div>
    );
};
export default MyComponent;

🤔 Итог

Условная отрисовка компонентов в React может быть выполнена различными способами, в зависимости от сложности логики и предпочтений:

1️⃣ Тернарный оператор: Компактный и удобный для простых условий.
2️⃣ Логическое И (&&): Легкий способ отрисовать компонент, если условие истинно.
3️⃣ if...else: Подходит для более сложной логики.
4️⃣ Функции: Помогают структурировать код и повторно использовать логику.
5️⃣ IIFE: Используются для более сложных выражений внутри JSX.

Короче говоря: Для условной отрисовки компонентов в React используйте тернарный оператор, логическое И, if...else, функции или IIFE. Выбор метода зависит от сложности условий и структуры кода.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых

📌 Какой классовый компонент не нужен при использовании хуков?

💬 Спрашивают в 3% собеседований

С появлением хуков (hooks) в React стало возможным использовать функциональные компоненты вместо классовых для выполнения задач, которые ранее могли быть реализованы только в классовых компонентах. Благодаря хукам, большинство классовых компонентов могут быть заменены функциональными компонентами. Рассмотрим, какие классовые компоненты становятся ненужными при использовании хуков и как они могут быть преобразованы.

🤔 Основные хуки, заменяющие классовые компоненты

1️⃣ useState:

➕ Позволяет использовать состояние в функциональных компонентах.

Классовый компонент:

   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }

     increment = () => {
       this.setState({ count: this.state.count + 1 });
     };

     render() {
       return (
         <div>
           <p>Count: {this.state.count}</p>
           <button onClick={this.increment}>Increment</button>
         </div>
       );
     }
   }
   

Функциональный компонент с `useState`:

   import React, { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   }
   

2️⃣ useEffect:

➕ Замена методов жизненного цикла, таких как componentDidMount, componentDidUpdate и componentWillUnmount.

Классовый компонент:

   class DataFetcher extends React.Component {
     constructor(props) {
       super(props);
       this.state = { data: null };
     }

     componentDidMount() {
       fetchData().then(data => {
         this.setState({ data });
       });
     }

     render() {
       return <div>Data: {this.state.data}</div>;
     }
   }
   

Функциональный компонент с `useEffect`:

   import React, { useState, useEffect } from 'react';

   function DataFetcher() {
     const [data, setData] = useState(null);

     useEffect(() => {
       fetchData().then(data => {
         setData(data);
       });
     }, []); // Пустой массив означает, что эффект выполняется только при монтировании

     return <div>Data: {data}</div>;
   }
   

3️⃣ useContext:

➕ Позволяет использовать контекст в функциональных компонентах, заменяя необходимость использования contextType или Context.Consumer.

Классовый компонент:

   const MyContext = React.createContext();

   class MyComponent extends React.Component {
     render() {
       return (
         <MyContext.Consumer>
           {value => <div>{value}</div>}
         </MyContext.Consumer>
       );
     }
   }
   

Функциональный компонент с `useContext`:

   import React, { useContext } from 'react';

   const MyContext = React.createContext();

   function MyComponent() {
     const value = useContext(MyContext);
     return <div>{value}</div>;
   }
   

🤔 Примеры других хуков:

➕ useReducer: Альтернатива useState для сложных состояний и логики обновления.

➕ useMemo: Мемоизация значений для оптимизации производительности.

➕ useCallback: Мемоизация функций для оптимизации производительности.

➕ useRef: Создание ссылок для доступа к DOM-элементам или хранения мутирующих значений без повторного рендера.

🤔 Заключение

С введением хуков в React большинство классовых компонентов становятся ненужными, так как их функциональность может быть реализована с помощью функциональных компонентов и хуков. Это упрощает код, улучшает читаемость и поддержку, а также предоставляет более гибкие возможности для управления состоянием и жизненным циклом компонентов.

Коротко: Благодаря хукам, такие как useState, useEffect и useContext, большинство классовых компонентов в React могут быть заменены функциональными компонентами, что упрощает и улучшает код.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых