Frontend | Вопросы собесов

Какие главные особенности куки ? Спросят с вероятностью 7% Cookies (куки) — это небольшие кусочки данных, хранящиеся в браузере и используемые для сохранения информации о пользователе. Вот основные особенности: 1️⃣Хранение данных на клиенте Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта. 2️⃣Ограниченный размер Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных. 3️⃣Срок действия (время жизни) Каждая кука имеет время жизни, которое задается параметром Expires или Max-Age. По истечении этого времени кука автоматически удаляется браузером. 4️⃣Доступность по домену и пути Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов. 5️⃣Безопасность (HTTP-only и Secure) ✅HTTP-only: Куки, установленные с флагом HttpOnly, недоступны через JavaScript, что помогает защитить данные от XSS-атак. ✅Secure: Куки, установленные с флагом Secure, передаются только по защищенному HTTPS соединению. 6️⃣Передача с запросами Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию. Примеры использования куки 1️⃣Установка куки через JavaScript:

      document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
   

2️⃣Чтение куки через JavaScript:

      const getCookie = (name) => {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
   }

   console.log(getCookie('username')); // 'John Doe'
   

3️⃣Удаление куки через JavaScript:

      document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
   

Примеры на сервере 1️⃣Установка куки на сервере (Node.js с Express):

      const express = require('express');
   const app = express();

   app.get('/', (req, res) => {
     res.cookie('username', 'John Doe', { maxAge: 900000, httpOnly: true });
     res.send('Cookie has been set');
   });

   app.listen(3000);
   

2️⃣Чтение куки на сервере (Node.js с Express):

      const express = require('express');
   const cookieParser = require('cookie-parser');
   const app = express();

   app.use(cookieParser());

   app.get('/', (req, res) => {
     const username = req.cookies.username;
     res.send(`Username is: ${username}`);
   });

   app.listen(3000);
   

Куки — это небольшие данные, хранящиеся в браузере. Они имеют ограниченный размер, время жизни, и доступны по определенному домену и пути. Куки могут быть защищены флагами HttpOnly и Secure, и автоматически отправляются серверу с каждым запросом. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Как проверить, что поле является массивом ? Спросят с вероятностью 7% Для проверки, является ли поле массивом, можно использовать несколько методов. Самый распространенный и рекомендуемый способ — это использование метода Array.isArray(). Этот метод проверяет, является ли переданное значение массивом, и возвращает true или false. Пример

const arr = [1, 2, 3];
const notArr = "Hello";

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(notArr)); // false

Альтернативные методы 1️⃣Проверка с помощью instanceof: Этот метод проверяет, является ли объект экземпляром конструктора Array.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(arr instanceof Array); // true
   console.log(notArr instanceof Array); // false
   

2️⃣Проверка с помощью конструктора Object.prototype.toString.call(): Этот метод проверяет тип объекта, возвращаемый методом

Object.prototype.toString.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
   console.log(Object.prototype.toString.call(notArr) === '[object Array]'); // false

Сравнение методов Array.isArray(): ✅Является самым современным и предпочтительным методом. ✅Поддерживается всеми современными браузерами. ✅Легко читается и понимается. instanceof: ✅Работает корректно в большинстве случаев.

  - Может давать неверные результаты, если массив создан в другом контексте (например, в iframe).

- Object.prototype.toString.call():
  - Универсальный метод для проверки различных типов объектов.
  - Меньше подвержен проблемам с контекстом, но выглядит менее читаемым по сравнению с Array.isArray().

Для проверки, является ли поле массивом, рекомендуется использовать метод Array.isArray(), так как он простой, эффективный и работает корректно в большинстве ситуаций. Чтобы проверить, является ли поле массивом, можно использовать метод Array.isArray(). Этот метод возвращает true, если значение является массивом, и false в противном случае. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

– Помощь с pet-проектом – Составление roadmap – Проведение код-ревью и mock-собеседования – Помощь с трудоустройством Все это и многое другое может Ментор. Он обеспечит вам необходимый boost, ускорит и упростит вход в IT. 🔥 Здесь размещен список менторов, и многие из них предлагают бесплатную первую консультацию

Расскажите о жизненном цикле компонента vue ? Спросят с вероятностью 7% Жизненный цикл компонента Vue.js описывает последовательность этапов, через которые проходит компонент от момента его создания до удаления. Каждый этап жизненного цикла сопровождается вызовом определенных хуков (методов), которые можно использовать для выполнения необходимых операций. Основные этапы: 1️⃣Создание (Creation): ✅beforeCreate(): Вызывается сразу после инициализации экземпляра, до того как будут установлены реактивные свойства. На этом этапе к экземпляру нельзя получить доступ через this. ✅created(): Вызывается после создания экземпляра и установки реактивных свойств. На этом этапе уже можно получить доступ к данным и методам компонента, но ещё нет привязки к DOM.

        new Vue({
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
        console.log(this.message); // 'Hello Vue!'
      }
    });
    

2️⃣Монтирование (Mounting): ✅beforeMount(): Вызывается перед монтированием компонента в DOM. На этом этапе шаблон ещё не скомпилирован и не вставлен в DOM. ✅mounted(): Вызывается после монтирования компонента в DOM. Здесь уже можно выполнять действия, зависящие от DOM, например, инициализировать сторонние библиотеки, работающие с DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
        console.log(this.$el); // доступ к элементу DOM
      }
    });
    

3️⃣Обновление (Updating): ✅beforeUpdate(): Вызывается перед обновлением DOM, когда изменяется реактивное свойство. На этом этапе можно получить текущее состояние до обновления. ✅updated(): Вызывается после обновления DOM. Этот хук можно использовать для выполнения действий, зависящих от нового состояния DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      methods: {
        updateMessage() {
          this.message = 'Hello World!';
        }
      }
    });
    

4️⃣Размонтирование (Unmounting): ✅beforeUnmount(): Вызывается перед размонтированием компонента и его удалением из DOM. Используется для выполнения очистки, например, отмены таймеров или отписки от событий. ✅unmounted(): Вызывается после того, как компонент был размонтирован и удалён из DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUnmount() {
        console.log('beforeUnmount');
      },
      unmounted() {
        console.log('unmounted');
      },
      methods: {
        destroyComponent() {
          this.$destroy();
        }
      }
    });
    

Жизненный цикл компонента Vue.js включает создание, монтирование, обновление и размонтирование. Каждый этап сопровождается вызовом определенных хуков (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted), которые позволяют выполнять различные действия в нужные моменты жизни компонента. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Как работает реактивность в vue.Js ? Спросят с вероятностью 7% Реактивность — это одна из ключевых характеристик фреймворка, которая позволяет автоматически обновлять пользовательский интерфейс при изменении состояния. Вот как это работает: Основные концепции 1️⃣Реактивные данные: Vue использует объекты с реактивными свойствами, чтобы отслеживать изменения. Когда данные изменяются, Vue автоматически обновляет связанные с ними компоненты. 2️⃣Объект Vue: При создании нового экземпляра Vue, он делает все данные, определенные в опции data, реактивными.

      var vm = new Vue({
     data: {
       message: 'Hello Vue!'
     }
   });
   

3️⃣Реактивность через геттеры и сеттеры: Vue использует JavaScript Proxy (или Object.defineProperty в более старых версиях) для создания реактивных свойств. Каждый раз, когда свойство считывается, вызывается геттер, и когда свойство изменяется, вызывается сеттер. Пример реактивности

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

При изменении vm.message интерфейс автоматически обновится:

vm.message = 'Hello World!';

Как это работает "под капотом" 1️⃣Инициализация: При инициализации Vue.js обходит все свойства объекта data и преобразует их в геттеры и сеттеры с помощью Object.defineProperty. Этот процесс называется обсервацией. 2️⃣Детекторы изменений (Observers): Каждый раз, когда создается реактивное свойство, создается объект наблюдателя (Observer), который следит за изменениями этого свойства. 3️⃣Депенденси трекинг (Dependency Tracking): Во время рендера компонента, Vue регистрирует все зависимости (реактивные свойства), которые используются. Это означает, что Vue "запоминает", какие свойства нужно отслеживать для каждого компонента. 4️⃣Реактивное обновление: Когда реактивное свойство изменяется, Vue уведомляет все компоненты, которые зависят от этого свойства, и они автоматически перерисовываются. Реактивные системы в действиях

new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  },
  watch: {
    a(newValue, oldValue) {
      console.log(`a изменилось с ${oldValue} на ${newValue}`);
    }
  }
});

✅Вычисляемые свойства: sum автоматически пересчитывается, когда a или b изменяются. ✅Наблюдатели (watchers): Реагируют на изменения данных и могут выполнять побочные эффекты. Преимущества 1️⃣Простота использования: Можно сосредоточиться на логике приложения, а не на обновлении DOM. 2️⃣Высокая производительность: Vue эффективно отслеживает изменения и обновляет только те части DOM, которые изменились. 3️⃣Поддержка сложных приложений: Реактивная система Vue легко масштабируется для больших и сложных приложений. Реактивность позволяет автоматически обновлять интерфейс при изменении данных. Она работает с использованием геттеров и сеттеров для отслеживания изменений и обновления связанных компонентов. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Совет фронтендерам: уважайте свое время В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации. Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram

Что происходит в момент запроса в браузере ? Спросят с вероятностью 3% Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. Рассмотрим основные этапы, происходящие при выполнении HTTP-запроса в браузере: 1️⃣Ввод URL и начало запроса ✅Пользователь вводит URL в адресную строку браузера. ✅Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы. 2️⃣DNS-разрешение ✅Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера. 3️⃣Установление TCP-соединения После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие: ✅Браузер отправляет SYN-пакет серверу. ✅Сервер отвечает SYN-ACK пакетом. ✅Браузер отправляет ACK-пакет, подтверждая установление соединения. 4️⃣HTTPS и SSL/TLS ✅Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS: ✅Браузер и сервер обмениваются сертификатами и выполняют шифрование данных. 5️⃣Отправка HTTP-запроса ✅Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com
     

6️⃣Обработка запроса на сервере ✅Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц. 7️⃣Получение и обработка HTTP-ответа ✅Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

8️⃣Парсинг и рендеринг страницы ✅Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы. ✅В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки. 9️⃣Выполнение JavaScript ✅После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы. ✅JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки. 🔟Финальная отрисовка ✅После загрузки всех ресурсов и выполнения JavaScript браузер завершает отрисовку страницы. Пользователь видит конечный результат в своем браузере. Когда пользователь вводит URL в браузере и нажимает Enter, происходит следующее: 1️⃣Браузер проверяет кэш и выполняет DNS-запрос для получения IP-адреса. 2️⃣Устанавливается TCP-соединение и, если используется HTTPS, SSL/TLS-соединение. 3️⃣Отправляется HTTP-запрос к серверу. 4️⃣Сервер обрабатывает запрос и возвращает HTTP-ответ. 5️⃣Браузер парсит HTML, загружает и обрабатывает ресурсы (CSS, JavaScript, изображения), строит DOM и CSSOM. 6️⃣Выполняется JavaScript, что может изменять DOM и CSSOM. 7️⃣Страница рендерится и отображается пользователю. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Зачем нужен redux ? Спросят с вероятностью 7% Redux нужен для управления состоянием в JavaScript-приложениях, особенно когда они становятся крупными и сложными. Вот несколько причин, почему он полезен: 1️⃣Централизованное управление состоянием Redux хранит всё состояние приложения в одном месте, называемом хранилищем (store). Это облегчает управление состоянием и делает его предсказуемым. 2️⃣Предсказуемость состояния Благодаря строгим правилам (например, редюсеры должны быть чистыми функциями), состояние в Redux меняется предсказуемо. Это упрощает отладку и тестирование приложения. 3️⃣Удобная отладка Существуют инструменты, такие как Redux DevTools, которые позволяют видеть, как состояние изменяется с каждым действием. Это делает отладку проще и более наглядной. 4️⃣Управление сложным состоянием В больших приложениях состояние может быть очень сложным и распределённым по многим компонентам. Redux помогает управлять этим состоянием, избегая "пробрасывания" пропсов через многие уровни компонентов. 5️⃣Упрощение синхронных и асинхронных операций Redux хорошо сочетается с middleware, такими как Redux Thunk или Redux Saga, для обработки асинхронных операций, например, запросов к API. Это позволяет управлять побочными эффектами централизованно. Пример: 1️⃣Централизованное хранилище: Все состояния приложения хранятся в одном месте, что упрощает управление ими.

      import { createStore } from 'redux';
   const store = createStore(reducer);
   

2️⃣Предсказуемость: Каждый редюсер — чистая функция, которая принимает текущее состояние и действие и возвращает новое состояние.

      function reducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   

3️⃣Отладка: Использование Redux DevTools позволяет видеть историю изменений состояния и отладку приложения.

      // Подключение Redux DevTools
   const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
   

4️⃣Асинхронные операции: С помощью middleware, таких как Redux Thunk, можно обрабатывать асинхронные действия.

      import thunk from 'redux-thunk';
   import { applyMiddleware, createStore } from 'redux';

   const store = createStore(reducer, applyMiddleware(thunk));

   // Асинхронное действие
   const fetchData = () => {
     return async (dispatch) => {
       const response = await fetch('https://api.example.com/data');
       const data = await response.json();
       dispatch({ type: 'DATA_LOADED', payload: data });
     };
   };
   

Redux нужен для централизованного, предсказуемого управления состоянием в больших и сложных JavaScript-приложениях. Он облегчает отладку, управление сложным состоянием и асинхронные операции. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Что такое redux ? Спросят с вероятностью 7% Redux — это библиотека для управления состоянием приложениях, часто используемая с React. Она помогает управлять состоянием приложения предсказуемым образом, облегчая процесс разработки сложных приложений. Основные концепции: 1️⃣Хранилище (Store): Хранилище — это объект, который содержит всё состояние приложения. В Redux может быть только одно хранилище. Оно создается с помощью функции createStore.

      import { createStore } from 'redux';
   const store = createStore(reducer);
   

2️⃣Действия (Actions): Действия — это объекты, которые описывают изменения состояния. Каждое действие имеет тип (свойство type), который указывает, какое изменение должно произойти, и дополнительные данные (payload), если это необходимо.

      const incrementAction = {
     type: 'INCREMENT',
     payload: 1
   };
   

3️⃣Редюсеры (Reducers): Редюсеры — это функции, которые определяют, как состояние приложения изменяется в ответ на действия. Они принимают текущее состояние и действие, а возвращают новое состояние.

      const initialState = { count: 0 };

   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + action.payload };
       case 'DECREMENT':
         return { ...state, count: state.count - action.payload };
       default:
         return state;
     }
   }
   

4️⃣Диспетчеризация (Dispatch): Для изменения состояния приложения необходимо отправить действие в хранилище с помощью метода dispatch.

store.dispatch(incrementAction);

5️⃣Подписка (Subscription): Приложение может подписываться на изменения состояния в хранилище, чтобы обновлять интерфейс пользователя при изменении состояния.

      store.subscribe(() => {
     console.log(store.getState());
   });
   

Пример с React: 1️⃣Установка Redux и React-Redux:

npm install redux react-redux

2️⃣Создание хранилища и редюсера:

      // store.js
   import { createStore } from 'redux';

   const initialState = { count: 0 };

   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + 1 };
       case 'DECREMENT':
         return { ...state, count: state.count - 1 };
       default:
         return state;
     }
   }

   const store = createStore(counterReducer);
   export default store;
   

3️⃣Подключение хранилища к React приложению:

      // index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import App from './App';
   import store from './store';

   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );
   

4️⃣Использование состояния и действий в компонентах:

      // App.js
   import React from 'react';
   import { useSelector, useDispatch } from 'react-redux';

   function App() {
     const count = useSelector(state => state.count);
     const dispatch = useDispatch();

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
       </div>
     );
   }

   export default App;
   

Redux — это библиотека для управления состоянием приложениях. Она использует хранилище для состояния, действия для описания изменений, редюсеры для обработки этих изменений и диспетчеризацию для применения действий. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Назови компоненты жизненного цикл ? Спросят с вероятностью 7% Жизненный цикл компонента состоит из нескольких этапов, которые можно разделить на три основные фазы: монтирование, обновление и размонтирование. Каждый из этих этапов включает в себя определённые методы цикла. 1️⃣Монтирование (Mounting): ✅constructor(): Вызывается перед монтированием компонента. Обычно используется для инициализации состояния и привязки методов. ✅staticgetDerivedStateFromProps(props, state): Вызывается перед рендером компонента как при монтировании, так и при обновлении. Используется для синхронизации состояния с пропсами. ✅render(): Обязательный метод, который возвращает JSX-разметку компонента. ✅componentDidMount(): Вызывается сразу после монтирования компонента. Здесь можно выполнять запросы к API или подписываться на события. 2️⃣Обновление (Updating): ✅staticgetDerivedStateFromProps(props, state): Как и при монтировании, вызывается перед рендером компонента для синхронизации состояния с пропсами. ✅shouldComponentUpdate(nextProps, nextState): Определяет, нужно ли компоненту перерисовываться. Можно использовать для оптимизации производительности. ✅render(): Ререндер компонента на основе новых пропсов или состояния. ✅getSnapshotBeforeUpdate(prevProps, prevState): Вызывается прямо перед тем, как изменённый DOM будет отображен. Полезно для сохранения информации о DOM, которая может измениться после обновления. ✅componentDidUpdate(prevProps, prevState, snapshot): Вызывается сразу после обновления компонента. Можно использовать для выполнения действий после обновления, таких как запросы к API на основе новых пропсов или состояния. 3️⃣Размонтирование (Unmounting): ✅componentWillUnmount(): Вызывается перед размонтированием и удалением компонента. Используется для очистки ресурсов, таких как таймеры, подписки или запросы. Пример:

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

  static getDerivedStateFromProps(nextProps, prevState) {
    // Синхронизация состояния с пропсами
    if (nextProps.count !== prevState.count) {
      return { count: nextProps.count };
    }
    return null;
  }

  componentDidMount() {
    // Выполнение действий после монтирования
    console.log('Component mounted');
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Оптимизация перерисовки
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Сохранение информации о DOM
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Выполнение действий после обновления
    console.log('Component updated');
  }

  componentWillUnmount() {
    // Очистка ресурсов перед удалением компонента
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Жизненный цикл компонента включает три фазы: монтирование, обновление и размонтирование. В каждой фазе есть свои методы, которые выполняют определенные действия для управления состоянием и поведением компонента. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Зачем нужен виртуальный дом ? Спросят с вероятностью 7% Виртуальный DOM (Virtual DOM) — это концепция, используемая в современных фреймворках и библиотеках, таких как React, для оптимизации и ускорения работы с реальным DOM. Реальный DOM медленный при частых изменениях, поэтому виртуальный DOM решает эту проблему, делая процесс более эффективным. Зачем он нужен 1️⃣Улучшение производительности: Значительно уменьшает количество прямых манипуляций с реальным DOM, которые являются дорогостоящими с точки зрения производительности. 2️⃣Упрощение разработки: Работая с ним, можно более эффективно управлять состоянием приложения и его представлением, абстрагируясь от непосредственной работы с реальным DOM. Как он работает 1️⃣Создание: Когда состояние приложения меняется, создаётся новый виртуальный DOM, представляющий обновлённое состояние. 2️⃣Сравнение: Сравниваются старый и новый виртуальные DOM, чтобы определить, какие части реального DOM нужно обновить. Этот процесс называется "диффинг" (diffing). 3️⃣Минимальные: После сравнения, в реальный DOM вносятся только необходимые изменения, что значительно снижает количество операций с ним. Примеры С React

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

export default Counter;

В этом примере при каждом изменении состояния count React создаёт новый виртуальный DOM, затем сравнивает его с предыдущим виртуальным DOM и применяет только те изменения, которые необходимы для реального DOM. Преимущества 1️⃣Повышение производительности: Благодаря уменьшению количества прямых операций с реальным DOM. 2️⃣Кроссбраузерная совместимость: Виртуальный DOM позволяет абстрагироваться от специфичных для браузера особенностей работы с DOM. 3️⃣Лёгкость обновлений и рендеринга: Использование виртуального DOM делает процесс обновления интерфейса приложения более предсказуемым и управляемым. Виртуальный DOM — это оптимизация работы с реальным DOM, обеспечивающая более быструю и эффективную работу приложений. Он позволяет минимизировать количество изменений, вносимых в реальный DOM, что существенно повышает производительность и упрощает разработку. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Cамый простой способ изучить Java — залезть в голову профи Один из лучших айтишников России учит базе кодинга в Telegram. Даже гуманитарий поймёт, как создавать приложения, сайты, игры и чат-боты. Достаточно подписаться на «Секреты Java», где каждый день появляются гайды, готовые примеры кода и лучших практик. И всё это бесплатно — вместо сотен тысяч рублей за курсы. Стартовать в прибыльной профессии с нуля вы сможете гораздо проще! Теперь обучиться Java может каждый: @java_secrets

Что такое стрелочная функция ? Спросят с вероятностью 7% Стрелочная функция (arrow function) — это сокращённый синтаксис для создания функций, введённый в стандарте ES6 (ECMAScript 2015). Стрелочные функции имеют компактный синтаксис и обладают некоторыми особенностями в отношении контекста this. Зачем они нужны Полезны для: 1️⃣Упрощения записи функций. 2️⃣Автоматического привязывания контекста this к окружению, в котором они были созданы (лексическое привязывание). Синтаксис Синтаксис стрелочной функции:

const функция = (аргументы) => {
  // тело функции
};

Примеры 1️⃣Функция без аргументов:

const sayHello = () => {
     console.log('Hello!');
   };

2️⃣Функция с одним аргументом:

const double = num => num * 2;

3️⃣Функция с несколькими аргументами:

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

4️⃣Функция с телом, содержащим несколько выражений:

      const sumAndLog = (a, b) => {
     const result = a + b;
     console.log(result);
     return result;
   };

Особенности 1️⃣Лексическое привязывание this: В стрелочных функциях this привязывается к контексту, в котором функция была определена. Это отличие от обычных функций, где this определяется в момент вызова функции.

      function Person() {
     this.age = 0;
   
     setInterval(() => {
       this.age++;
       console.log(this.age);
     }, 1000);
   }
   
   const person = new Person();
   

В этом примере стрелочная функция внутри setInterval использует this от внешней функции Person, что позволяет корректно увеличивать значение age. 2️⃣Отсутствие своего this, arguments, super и new.target: Стрелочные функции не имеют своих собственных версий этих объектов, что делает их непригодными в некоторых случаях, например, при использовании в качестве методов объекта. 3️⃣Нельзя использовать как конструкторы: Стрелочные функции нельзя использовать с оператором new.

const MyFunc = () => {};
   const instance = new MyFunc(); // Ошибка: MyFunc не является конструктором

Стрелочная функция — это короткий синтаксис для создания функций в JavaScript, который автоматически привязывает this к контексту, в котором она была создана. Они удобны для коротких функций и ситуаций, где требуется лексическое привязывание this. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых