🤔 Какие значения будут являться falsy значениями?

В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений:

🟠`false`
Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0`
Число ноль.

console.log(Boolean(0)); // false    

🟠`-0`
Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n`
Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка)
Строка без символов.

console.log(Boolean("")); // false    

🟠`null`
Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined`
Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN`
Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

🚩Примеры использования

🟠Проверка значений на falsy
В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах
Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое DOM дерево

- DOM (Document Object Model) — это программный интерфейс для HTML-документов, представляющий структуру страницы в виде дерева узлов.
- DOM позволяет программам читать и изменять документ структурно, стилистически и содержательно, реагируя на пользовательские взаимодействия.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как использовать async await для асинхронных запросов?

async и await — это синтаксический сахар в JavaScript, предназначенный для упрощения работы с промисами и асинхронными операциями. Они позволяют писать асинхронный код, который выглядит как синхронный, улучшая его читаемость и удобство использования.

🚩Основные концепции

🟠`async`
Ключевое слово, которое используется перед функцией для обозначения её как асинхронной. Асинхронная функция всегда возвращает промис.
🟠`await`
Ключевое слово, которое используется внутри асинхронной функции для ожидания выполнения промиса. Оно приостанавливает выполнение функции до тех пор, пока промис не будет выполнен.

🚩Пример использования для асинхронных запросов

Пример с fetch

// Асинхронная функция для выполнения запроса и обработки данных
async function fetchData(url) {
    try {
        // Ожидание выполнения запроса
        const response = await fetch(url);
        
        // Проверка статуса ответа
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        // Ожидание преобразования ответа в JSON
        const data = await response.json();

        // Работа с данными
        console.log(data);
    } catch (error) {
        // Обработка ошибок
        console.error('Fetch error:', error);
    }
}

// Вызов асинхронной функции
fetchData('https://api.example.com/data');

1⃣Объявление асинхронной функции

async function fetchData(url) { ... }   

2⃣Использование await для ожидания выполнения запроса

const response = await fetch(url);   

3⃣Обработка ошибок с использованием try...catch

try {
    ...
} catch (error) {
    ...
}   

4⃣Ожидание преобразования ответа в JSON

const data = await response.json();   

🚩Плюсы

➕Читаемость
Код выглядит как синхронный, что упрощает его понимание и сопровождение.
➕Управление ошибками
Использование блоков try...catch делает обработку ошибок более явной и удобной.
➕Последовательность выполнения
синхронные операции выполняются в логической последовательности, что упрощает написание сложных асинхронных цепочек.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое IIFE?

IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как избежать ссылочной зависимости при копировании объекта?

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

🟠Использование JSON.stringify и JSON.parse
Этот метод подходит для простых объектов, не содержащих функций, специальных объектов (например, Date) или циклических ссылок.

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = JSON.parse(JSON.stringify(original));
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

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

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (Array.isArray(obj)) {
        const arrCopy = [];
        obj.forEach((item, index) => {
            arrCopy[index] = deepClone(item);
        });
        return arrCopy;
    }

    const objCopy = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepClone(obj[key]);
        }
    }
    return objCopy;
}

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = deepClone(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

🟠Использование библиотеки lodash
Lodash предоставляет удобную функцию cloneDeep для глубокого копирования объектов.

const _ = require('lodash');

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = _.cloneDeep(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

🟠Использование структурированной клонирования (Structured Clone)
Метод structuredClone позволяет создавать глубокие копии объектов. Этот метод является частью HTML Living Standard и поддерживается в некоторых современных браузерах и средах исполнения.

const original = {
    name: 'Alice',
    age: 25,
    address: {
        city: 'Wonderland',
        zip: '12345'
    }
};

const copy = structuredClone(original);
copy.address.city = 'Otherland';

console.log(original.address.city); // Wonderland
console.log(copy.address.city);     // Otherland

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что приоритетнее использовать TS или JS?

TypeScript предпочтительнее для больших проектов, так как он предоставляет типизацию, которая предотвращает ошибки на этапе компиляции. JS используется в более простых сценариях или там, где требуется гибкость и нет необходимости в строгой типизации.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как отслеживать и обрабатывать ошибки в javascript?

🟠Использование try...catch
Оператор try...catch позволяет обрабатывать ошибки, возникающие в блоке try. Если возникает ошибка, выполнение кода переходит к блоку catch.

try {
    // Код, который может вызвать ошибку
    let result = riskyOperation();
    console.log(result);
} catch (error) {
    // Обработка ошибки
    console.error('Произошла ошибка:', error.message);
}

Пример использования

function riskyOperation() {
    throw new Error('Что-то пошло не так');
}

try {
    riskyOperation();
} catch (error) {
    console.error('Произошла ошибка:', error.message); // Произошла ошибка: Что-то пошло не так
}

🟠Использование блока finally
Блок finally выполняется после того, как были выполнены блоки try и catch. Он выполняется независимо от того, произошла ли ошибка.

try {
    let result = riskyOperation();
    console.log(result);
} catch (error) {
    console.error('Произошла ошибка:', error.message);
} finally {
    console.log('Этот блок выполнится в любом случае');
}

🟠Обработка ошибок в асинхронных функциях
Для обработки ошибок в асинхронных функциях, использующих async/await, также можно использовать try...catch.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Произошла ошибка при получении данных:', error.message);
    }
}

fetchData();

🟠Использование промисов
При работе с промисами можно использовать методы catch и finally для обработки ошибок.

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Произошла ошибка при получении данных:', error.message);
    })
    .finally(() => {
        console.log('Запрос завершен');
    });

🟠Глобальная обработка ошибок
Для глобальной обработки ошибок можно использовать обработчики событий window.onerror и window.onunhandledrejection. Обработка ошибок выполнения

window.onerror = function(message, source, lineno, colno, error) {
    console.error('Произошла глобальная ошибка:', message);
    return true; // предотвращает вывод ошибки в консоль браузера
};

Обработка неотловленных промисов

window.onunhandledrejection = function(event) {
    console.error('Неотловленный отказ в промисе:', event.reason);
};

🟠Пользовательские ошибки
Можно создавать собственные ошибки с помощью класса Error.

class CustomError extends Error {
    constructor(message) {
        super(message);
        this.name = 'CustomError';
    }
}

try {
    throw new CustomError('Это пользовательская ошибка');
} catch (error) {
    console.error(error.name + ': ' + error.message); // CustomError: Это пользовательская ошибка
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое Git-flow?

Git-flow — это модель ветвления в Git для управления разработкой, предложенная Винсентом Дриссеном. Она включает основные ветки (`main`, `develop`) и временные ветки (`feature`, `release`, `hotfix`) для разработки, тестирования и исправления ошибок. Git-flow делает процесс разработки структурированным, но может быть избыточным для небольших или быстрых проектов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как получить свойство объекта?

🟠Доступ через точечную нотацию
Точечная нотация является наиболее распространенным способом доступа к свойствам объекта. Она проста и удобна для использования, когда имя свойства известно и является допустимым идентификатором JavaScript.

const person = {
    name: 'Alice',
    age: 25
};

console.log(person.name); // 'Alice'
console.log(person.age);  // 25

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

const person = {
    'first name': 'Alice',
    age: 25
};

console.log(person['first name']); // 'Alice'
console.log(person['age']);        // 25

const propertyName = 'age';
console.log(person[propertyName]); // 25

🟠Деструктуризация объектов
Деструктуризация позволяет извлекать свойства из объекта и присваивать их переменным. Это особенно полезно для извлечения нескольких свойств одновременно.

const person = {
    name: 'Alice',
    age: 25
};

const { name, age } = person;

console.log(name); // 'Alice'
console.log(age);  // 25

🟠Использование Object.keys, Object.values и Object.entries
Эти методы позволяют получать массивы ключей, значений или пар ключ-значение соответственно.
Object.keys: Возвращает массив ключей объекта.

    const person = {
        name: 'Alice',
        age: 25
    };

    const keys = Object.keys(person);
    console.log(keys); // ['name', 'age']
    

Object.values: Возвращает массив значений объекта.

    const person = {
        name: 'Alice',
        age: 25
    };

    const values = Object.values(person);
    console.log(values); // ['Alice', 25]
    

Object.entries: Возвращает массив пар ключ-значение.

    const person = {
        name: 'Alice',
        age: 25
    };

    const entries = Object.entries(person);
    console.log(entries); // [['name', 'Alice'], ['age', 25]]
    

🟠Проверка наличия свойств
Перед доступом к свойству можно проверить его наличие с помощью оператора in или метода hasOwnProperty.
Оператор in

    const person = {
        name: 'Alice',
        age: 25
    };

    console.log('name' in person); // true
    console.log('gender' in person); // false
    

Метод hasOwnProperty

    const person = {
        name: 'Alice',
        age: 25
    };

    console.log(person.hasOwnProperty('name')); // true
    console.log(person.hasOwnProperty('gender')); // false
    

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что делает setstate()?

Это метод в React, который используется для обновления состояния компонента. Когда состояние компонента изменяется, React запускает процесс обновления (рендеринга) компонента и всех его дочерних компонентов, чтобы отобразить актуальные данные.

🚩Основные концепции

🟠АсинхронностьВызов setState() может быть асинхронным. Это означает, что состояние компонента не обязательно будет обновлено сразу после вызова setState(). Вместо этого, React может сгруппировать несколько вызовов setState() для оптимизации производительности.
🟠Мерджинг состояния
При вызове setState() React сливает (мерджит) новый объект состояния с текущим состоянием. Это позволяет обновлять только те части состояния, которые изменились, без перезаписи всего состояния.

🚩Синтаксис

🟠Первый аргумент
Может быть объектом или функцией. Объект: Новый фрагмент состояния, который нужно объединить с текущим состоянием Функция: Функция, которая принимает текущее состояние и пропсы и возвращает новый фрагмент состояния.

🟠Второй аргумент (необязательный)
Колбэк-функция, которая будет вызвана после того, как состояние обновится и компонент перерисуется.

🚩Примеры использования

Объект как аргумент

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState({ count: this.state.count + 1 });
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

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

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState((prevState, props) => ({
            count: prevState.count + 1
        }));
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

🟠Колбэк-функция
Второй аргумент setState() — это колбэк, который вызывается после того, как состояние было обновлено и компонент перерисован.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    incrementCount = () => {
        this.setState({ count: this.state.count + 1 }, () => {
            console.log('Состояние обновлено:', this.state.count);
        });
    }
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.incrementCount}>Increment</button>
            </div>
        );
    }
}

🚩Важные замечания

🟠Не изменяйте состояние напрямую
Изменение состояния напрямую (например, this.state.count = 1) не вызовет перерисовку компонента. Всегда используйте setState().
🟠Batching (группировка)
React может группировать несколько вызовов setState() для повышения производительности. Поэтому состояние может быть обновлено асинхронно.
🟠Компоненты-классы и хуки
В функциональных компонентах для управления состоянием используются хуки, такие как useState. setState() используется только в компонентах-классах.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое семантика в веб-разработке

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как отрисовать массив элементов?

В React для отрисовки массива элементов используется метод map(), который позволяет перебрать массив и вернуть JSX для каждого элемента. Это удобный и декларативный способ создания списков элементов.

🚩Пример использования `map()` для отрисовки массива

import React from 'react';

const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
];

const UserList = () => {
    return (
        <div>
            <h1>User List</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>
                        {user.name} - {user.age} years old
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default UserList;

1⃣Использование map()

{users.map(user => (
    <li key={user.id}>
        {user.name} - {user.age} years old
    </li>
))}   

2⃣Атрибут key

<li key={user.id}>   

🚩Отрисовка сложных компонентов

Если каждый элемент массива представляет собой более сложный компонент, можно создать отдельный компонент для каждого элемента и использовать его внутри map().

import React from 'react';

const users = [
    { id: 1, name: 'Alice', age: 25, email: 'alice@example.com' },
    { id: 2, name: 'Bob', age: 30, email: 'bob@example.com' },
    { id: 3, name: 'Charlie', age: 35, email: 'charlie@example.com' }
];

const UserItem = ({ user }) => {
    return (
        <div className="user-item">
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
        </div>
    );
};

const UserList = () => {
    return (
        <div>
            <h1>User List</h1>
            {users.map(user => (
                <UserItem key={user.id} user={user} />
            ))}
        </div>
    );
};

export default UserList;

1⃣Создание компонента для элемента списка

const UserItem = ({ user }) => {
    return (
        <div className="user-item">
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
        </div>
    );
};   

2⃣Использование компонента внутри map()

{users.map(user => (
    <UserItem key={user.id} user={user} />
))}   

Ставь 👍 и забирай 📚 Базу знаний

🤔 Использование хука useEffect в React

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 В чём отличие между контролируемыми и неконтролируемыми объектами?

В React различают два типа компонентов для обработки пользовательского ввода: контролируемые (controlled) и неконтролируемые (uncontrolled) компоненты. Понимание их различий важно для выбора подходящего способа управления состоянием формы.

🚩Контролируемые компоненты

Контролируемый компонент управляет своим состоянием через React. Это означает, что состояние элемента формы (например, значение текстового поля) хранится в состоянии (state) компонента и обновляется через React.

import React, { useState } from 'react';

const ControlledComponent = () => {
    const [inputValue, setInputValue] = useState('');

    const handleChange = (event) => {
        setInputValue(event.target.value);
    };

    return (
        <div>
            <label>
                Name:
                <input type="text" value={inputValue} onChange={handleChange} />
            </label>
            <p>Current value: {inputValue}</p>
        </div>
    );
};

export default ControlledComponent;

🚩Особенности контролируемых компонентов

🟠Состояние в React
Значение элемента формы хранится в состоянии компонента.
🟠Обработка событий
Все изменения отслеживаются через события (например, onChange) и обновляют состояние компонента.
🟠Односторонний поток данных
Данные идут от состояния компонента к элементу формы, обеспечивая контроль над значением.

🚩Неконтролируемые компоненты

Неконтролируемый компонент управляет своим состоянием через DOM. Значение элемента формы извлекается непосредственно из DOM, а не из состояния компонента.

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
    const inputRef = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Submitted value: ' + inputRef.current.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={inputRef} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};

export default UncontrolledComponent;

🚩Особенности неконтролируемых компонентов

🟠Состояние в DOM
Значение элемента формы хранится в самом DOM-элементе.
🟠Использование рефов
Для доступа к значению элемента используется реф (например, через useRef).
🟠Двусторонний поток данных
Данные могут быть извлечены из DOM в любой момент времени, что делает управление состоянием менее очевидным.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое IIFE?

IIFE (Immediately Invoked Function Expression) — это функция в JavaScript, которая вызывается сразу после определения. Она используется для создания изолированного пространства имён, чтобы избежать конфликтов в глобальной области видимости.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие основные реакт хуки знаешь и используешь?

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

🟠useState
useState позволяет добавить состояние в функциональный компонент.

import React, { useState } from 'react';
const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};
export default Counter;

🟠useContext
useContext позволяет использовать контекст для передачи данных через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях.

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
    const theme = useContext(ThemeContext);
    return <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
        The current theme is {theme}
    </div>;
};
const App = () => {
    return (
        <ThemeContext.Provider value="dark">
            <ThemedComponent />
        </ThemeContext.Provider>
    );
};
export default App;

🟠useReducer
useReducer — это альтернатива useState для управления более сложным состоянием в компоненте.

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}
const Counter = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
};
export default Counter;

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

import React, { useRef } from 'react';
const TextInputWithFocusButton = () => {
    const inputEl = useRef(null);
    const onButtonClick = () => {
        // "current" указывает на смонтированный элемент input
        inputEl.current.focus();
    };
    return (
        <div>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </div>
    );
};
export default TextInputWithFocusButton;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое псевдоэлемент?

Псевдоэлемент — это CSS-конструкция, которая позволяет стилизовать определённые части элемента, например, ::before для добавления контента перед элементом или ::after для добавления после. Это удобно для оформления, не изменяя HTML-структуру.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как отследить демонтирование функционального компонента?

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

🚩Использование `useEffect` для отслеживания демонтирования

Хук useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Функция очистки, возвращаемая из useEffect, выполняется при демонтировании компонента.

import React, { useEffect } from 'react';

const MyComponent = () => {
    useEffect(() => {
        console.log('Component mounted');

        // Функция очистки вызывается при демонтировании компонента
        return () => {
            console.log('Component will unmount');
        };
    }, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании

    return (
        <div>
            <p>My Component</p>
        </div>
    );
};

export default MyComponent;

Хук useEffect

   useEffect(() => {
       console.log('Component mounted');

       return () => {
           console.log('Component will unmount');
       };
   }, []);
   

🚩Пример с реальным использованием

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

const WebSocketComponent = () => {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const socket = new WebSocket('ws://example.com/socket');

        socket.onmessage = (event) => {
            setMessages((prevMessages) => [...prevMessages, event.data]);
        };

        console.log('WebSocket connection opened');

        return () => {
            socket.close();
            console.log('WebSocket connection closed');
        };
    }, []);

    return (
        <div>
            <h1>WebSocket Messages</h1>
            <ul>
                {messages.map((message, index) => (
                    <li key={index}>{message}</li>
                ))}
            </ul>
        </div>
    );
};

export default WebSocketComponent;

Открытие WebSocket соединения

const socket = new WebSocket('ws://example.com/socket');   

Обработка входящих сообщений

   socket.onmessage = (event) => {
       setMessages((prevMessages) => [...prevMessages, event.data]);
   };
   

Закрытие WebSocket соединения при демонтировании

   return () => {
       socket.close();
       console.log('WebSocket connection closed');
   };
   

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое редьюсер, и какие параметры он принимает?

В контексте JavaScript, редьюсер (reducer) — это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редьюсеры широко используются в библиотеке Redux для управления состоянием приложения.

🚩Основная концепция

1⃣Принимает два аргумента
Текущее состояние (state)
Действие (action)
2⃣Возвращает новое состояние.

const reducer = (state, action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
            // Возвращаем новое состояние
            return {
                ...state,
                // Обновляем определенные свойства
            };
        default:
            return state;
    }
};

🚩Пример использования редьюсера

Инициализация состояния

const initialState = {
    count: 0
};

Определение редьюсера

const 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;
    }
};

🚩Использование редьюсера с useReducer в React

React предоставляет хук useReducer для управления состоянием с помощью редьюсера в функциональных компонентах.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

const Counter = () => {
    const [state, dispatch] = useReducer(counterReducer, initialState);

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

export default Counter;

Ставь 👍 и забирай 📚 Базу знаний

🤔 Какими способами можно скрыть элемент?

1. display: none; — элемент удаляется из визуального потока страницы.
2. visibility: hidden; — элемент остаётся на странице, но становится невидимым.
3. opacity: 0; — элемент остаётся видимым для событий, но становится прозрачным.
4. С помощью JavaScript: удаление элемента (removeChild) или добавление атрибута hidden.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний