Тостер

2022-07-11 08:00:52 Ограничения React

Кривая обучения. Будучи библиотекой, а не полноценным фреймворком, он требует глубоких знаний по внедрению UI в MVC (Model-View-Controller, Модель-Представление-Контроллер) фреймворки;
Одним из недостатков React также является ориентированность на слой представления. Для решения проблем "Представления" требуется поиск подходящей "Модели" и "Контроллера";
Разработка приложения без использования изоморфного подхода приводит к проблемам с индексацией приложения поисковыми роботами.

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

2022-07-09 08:00:28 Для чего используется clearInterval()?

Данный метод используется для остановки таймера, запущенного с помощью setInterval(). Для этого идентификатор таймера записывается в переменную, которая затем передается clearInterval() в качестве аргумента.

let i = 1
const timer = setInterval(() => {
console.log(i)
i++

if (i === 3) clearInterval(timer)
}, 1000)

В приведенном примере в консоль каждую секунду выводится значение переменной i, которое каждый раз увеличивается на 1 (1, 2). Когда значение i становится равным 3, таймер останавливается.

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

2022-07-08 08:30:35 Какие существуют псевдоэлементы и для чего они используются?

Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. 

Псевдоэлементы: :after, :before, :first-letter, :first-line.

:after — применяется для вставки нужного контента после выбранного элемента. Применяется со свойством content, которое определяет содержимое для вставки.

:before — применяется для вставки нужного контента до выбранного элемента. Также необходимо задать свойство content с содержимым для вставки.

:first-letter — добавляет к первому элементу в тексте и определяет его стиль: можно создавать буквицу (увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) или выступающий инициал (увеличенная прописная буква, линия которой совпадает с линией основного текста).

:first-line — используется для изменения первой строки блочного текста.

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

2022-07-07 08:30:52 Что такое объект arguments?

arguments — это массивоподобный объект (псевдомассив), содержащий переданные функции аргументы:

function sum () {
let total = 0
for (let i = 0; i < arguments.length; i++) {
total += arguments[i]
}
return total

// или
let total = 0
for (const i of arguments) {
total += i
}
return total

// или
return Array.from(arguments).reduce((acc, cur) => acc + cur)

}

sum(1, 2, 3) // 6

Обратите внимание, что стрелочные функции не имеют arguments. Вместо arguments рекомендуется использовать оператор rest… (прочие параметры), который работает как в обычных, так и в стрелочных функциях:

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

sum(1, 2, 3) // 6


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

2022-07-06 08:00:30 Для чего используется clearTimeout()?

Данный метод используется для остановки таймера, запущенного с помощью setTimeout(). Для этого идентификатор таймера записывается в переменную, которая затем передается clearTimeout() в качестве аргумента.

const timer = setTimeout(() => {
console.log('Привет!')
clearTimeout(timer)
}, 2000)

В приведенном примере через две секунды в консоль выводится сообщение «Привет!», после чего таймер останавливается. Это делается для того, чтобы сборщик мусора мог удалить выполненный таймер.

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

2022-07-05 12:30:28 Для чего в setState() передается функция?

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

Решение проблемы - передача в setState() функции с предыдущим состоянием в качестве аргумента. Это позволяет избежать проблем, связанных с получением старого состояния из-за асинхронной природы setState().
Допустим, начальным значением count является 0. Несмотря на три последовательных вызова операции по увеличению значения, count равняется 1:

// пусть this.state.count === 0
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
// this.state.count === 1, а не 2

Если мы передадим функцию в setState() значение count увеличится корректно:

this.setState((prevState, props) => ({
count: prevState.count + props.increment
}))
// this.state.count === 2

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

2022-07-04 08:01:04 Преимущества React

Использование виртуального DOM для определения того, какие части UI подверглись изменениям, и повторный рендеринг только этих частей в обычном DOM существенно повышает производительность;
JSX (JavaScript и XML) делает код компонентов/блоков более читаемым. Он отчетливо показывает, как компоненты связаны (скомбинированы) между собой;
Дружелюбность по отношению к SEO (search engine optimization, поисковая оптимизация). React предоставляет возможность рендеринга страниц на стороне сервера и регистрации обработчиков событий на стороне клиента:
React.renderToString() вызывается на сервере
React.render() вызывается на клиенте
React сохраняет разметку, сгенерированную на сервере, и добавляет к ней обработчики событий.

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

2022-07-02 08:00:49 Особенности синтаксиса JSON

Данные представляют собой пары ключ/значение;
Ключ и значение оборачиваются в двойные кавычки, кроме случаев, когда значение является числом («key»: «value»);
Данные разделяются запятыми;
Объекты оборачиваются в фигурные скобки;
Массивы оборачиваются в квадратные скобки;

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

2022-06-30 08:01:55 Плавающие элементы (floats). Что такое и как работают?

При применении этого свойства происходит следующее:

Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left) или вправо (для right) до того как коснётся либо границы родителя, либо другого элемента с float;
Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться;
Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока;
Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

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

2022-06-29 08:01:22 Почему JavaScript называют однопоточным?

JavaScript является однопоточным или синхронным языком программирования. Это означает, что в один момент времени может выполняться только одна задача.

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

Браузер перестает реагировать на действия пользователя и другие события. Для решения данной проблемы применяются колбэки, промисы, async/await, воркеры и другие инструменты для работы с асинхронным кодом. В JavaScript в отличие, например, от Java, Go или C++ нет возможности создавать дополнительные потоки или процессы.

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