Тостер

2022-06-27 08:01:36 Как работает React?

Разрабатывая клиентские приложения, команда разработчиков Facebook осознала, что DOM является медленным. Для того, чтобы сделать его быстрее, React использует виртуальный DOM, который, по сути, является представлением DOM-дерева в JavaScript.

Когда возникает необходимость чтения или записи в DOM, используется данное представление. Затем виртуальный DOM пытается определить наиболее эффективный способ обновления браузерного DOM.
В отличие от DOM-элементов браузера, создание элементов в React обходится гораздо дешевле.

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

#react Адкрыць / каментаваць

2022-06-25 08:00:53 Для чего используется setInterval()?

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

В следующем примере мы выводим сообщение в консоль каждые 2 секунды:

setInterval(() => console.log('Привет!'), 2000)

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

let i = 0
const timer = setInterval(() => {
console.log('Привет!')
i++

if (i == 2) {
clearInterval(timer)
}
}, 2000)

#javascript Адкрыць / каментаваць

2022-06-23 08:00:49 Что такое специфичность CSS-селекторов и как она работает?

В списке типы селекторов расположены по возрастанию специфичности:

0. Cелекторы типов элементов (например, h1) и псевдоэлементов (например, ::before);
1. Cелекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover);
2. Cелекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют)

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности
тег и псевдоэлемент имеют специфичность 0001;
класс, псевдокласс, атрибут - 0010;
id имеет специфичность 0100;
инлайновый стиль имеет приоритет 1000;

#css Адкрыць / каментаваць

2022-06-22 08:00:27 Для чего используется setTimeout()?

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

setTimeout(() => console.log('Привет!'), 2000)

// во избежание утечек памяти, рекомендуется делать так
const timer = setTimeout(() => {
console.log('Привет!')
clearTimeout(timer)
}, 2000)

#javascript Адкрыць / каментаваць

2022-06-20 08:00:40 Что такое React?

React - это JavaScript-библиотека, предназначенная для создания быстрых и интерактивных пользовательских интерфейсов (user interfaces, UI) для веб- и мобильных приложений. Это открытая (с открытым исходным кодом), основанная на компонентах, библиотека для фронтенда, отвечающая только за слой представления (view layer) приложения.

Основная задача React - разработка быстрых пользовательских интерфейсов. В нем используется виртуальная объектная модель документа (virtual document object model (DOM) - программный интерфейс приложения (application programming interface (API)), для HTML и XML-документов. Он определяет логическую структуру документа, способы доступа к документу и управления им.

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

#react Адкрыць / каментаваць

2022-06-19 10:01:09 Для чего используется tree shaking (встряхивание дерева)?

Tree shaking может существенно уменьшить размер сборки (бандла) за счет удаления из нее кода неиспользуемых модулей. Чем меньше размер сборки, тем выше производительность приложения. Tree shaking реализован в таких сборщиках модулей, как Rollup и Webpack.

#javascript Адкрыць / каментаваць

2022-06-18 18:03:47 Что такое tree shaking (встряхивание дерева)?

Tree shaking — это удаление кода неиспользуемых модулей. Такие модули не включаются в окончательную сборку (бандл). Для того, чтобы сборщик модулей (бандлер) мог определить, какие модули используются, а какие нет, структура программы должна быть основана на ES6 модулях. Данная техника была популяризована бандлером Rollup.

#javascript Адкрыць / каментаваць

2022-06-17 08:30:20 В чем разница между значениями inline и inline-block?

Inline и inline-block - это значения, которые можно назначить свойству display.

При использовании inline для любого элемента он становится строчным. Inline-block объединяет в себе характеристики как строчных, так и блочных элементов: блочный элемент с поведением, как у строчного.

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

#css Адкрыць / каментаваць

2022-06-16 18:03:49 Какой второй опциональный аргумент может быть передан setState() и в чем его назначение?

Таким аргументом является коллбек, вызываемый после обновления состояния и повторного рендеринга компонента.

Функция setState() является асинхронной, поэтому она принимает коллбек в качестве второго параметра.

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

this.setState(
{ username: 'Alex' },
() => console.log('Обновление состояние завершено и компонент повторно отрисован.')
)

setState() всегда влечет за собой повторный рендеринг, пока shouldComponentUpdate() не вернет false. Во избежание лишних рендерингов, вызывайте setState() только когда новое состояние отличается от предыдущего. Также избегайте вызова setState() в таких методах жизненного цикла, как componentDidUpdate(), поскольку это может привести к бесконечному циклу.

#react Адкрыць / каментаваць

2022-06-16 17:14:47 Как реализовать функцию, возвращающую случайное целое число в заданном диапазоне?

Такую функцию можно реализовать с помощью методов Math.random() и Math.floor() объекта Math:

const getRandomInteger = (min, max) => Math.floor(min + Math.random() * (max + 1 - min))

#js Адкрыць / каментаваць