CodeRoll | Frontend
رفتن به کانال در Telegram
OZ — Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги — Веб-разработка на JS, HTML, CSS, React, Vue,Angular Купить рекламу: https://telega.in/c/coderoll Чат: https://t.me/coderoll_chat По всем вопросам пишите сюда - @yankovsky_ads
نمایش بیشتر4 031
مشترکین
-124 ساعت
-157 روز
-4930 روز
آرشیو پست ها
4 030
let c = { greeting: "Hey!" }
let d
d = c
c.greeting = "Hello!"
console.log(d.greeting)4 030
Как сделать из императивного компонента — декларативный React-компонент
Иногда в своё React-приложение нужно встроить сторонний компонент, который не работает с React и часто оказывается императивным.
Такой компонент приходится каждый раз инициализировать, уничтожать и, главное, проверять его состояние, прежде чем вызывать его методы.
Верным признаком того, что компонент нужно обернуть в декларативный компонент является обилие useEffect-ов, где проверяются разные сочетания параметров компонента. И в зависимости от этих сочетаний вызываются соответствующие методы компонента.
В статье я хочу разобрать по шагам, как превратить такой компонент в декларативный React-компонент.
Ссылка
4 030
Пояснение к ответу
Обратите внимание, что diameter - это обычная функция, а perimeter - стрелочная. У стрелочных функций, в отличие от обычных, значение this указывает на внешнее/лексическое окружение. Это значит, что при вызове метода perimeter его this указывает не на объект shape, а на глобальный объект window. У этого объекта нет свойства radius, поэтому возвращается undefined.
4 030
const shape = {
radius: 10,
diameter() {
return this.radius * 2
},
perimeter: () => 2 * Math.PI * this.radius
}
console.log(shape.diameter())
console.log(shape.perimeter())4 030
Telegram-канал об IT-решениях для бизнеса СофтТех
Друзья, не пропустите важную информацию!
Канал СофтТех рассказывает об IT-решениях для бизнеса и тех, кто их создаёт: ПО и кибербезопасность, облачные технологии, ЦОДы и IoT.
Сами давно читаем и вам советуем подписаться.
Подписаться
#реклама
О рекламодателе
4 030
Пояснение к ответу
Из-за очереди событий в JavaScript функция обратного вызова setTimeout выполняется после освобождения стека вызовов. Так как переменная i в первом цикле определяется с помощью ключевого слова var, она является глобальной. В цикле мы каждый раз увеличиваем значение i на 1, используя оператор ++. К моменту выполнения setTimeout в первом примере значение i равняется 3. Во втором цикле переменная i определяется с помощью ключевого слова let. Такие переменные (а также переменные, объявленные с помощью ключевого слова const) имеют блочную область видимости (блок - это код внутри фигурных скобок - {}). На каждой итерации i будет иметь новое значение, и это значение будет замкнуто в области видимости внутри цикла.
4 030
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1)
}
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1)
}4 030
Демо-счёт: Ваш шанс освоить валютный рынок без риска!
25 лет опыта на рынке, 46 доступных валютных пар и 0$ для начала! Получайте кэшбэк до 40% на издержки и становитесь профессионалом с Альпари! Заходите на сайт Альпари Брокера и начните свой путь к успеху прямо сейчас!
Узнать больше
Финансовые услуги оказывает: ООО "Альпари-Брокер".
#реклама
promo.alparistart.com
О рекламодателе
4 030
Typescript Generics
Javascript - крутой язык со своими преимуществами и недостатками. И одно из его свойств - это динамическая типизация, которая одновременно может быть как преимуществом, так и недостатком. Очень много холиварных тредов на этот счет, но по мне так все просто. Для небольших и простых проектов динамическая типизация - это очевидный плюс, так как сильно ускоряет разработку. Однако, когда речь идет о сложных системах, над которыми работает не один человек, сложно отрицать преимущество статической типизации. Ведь статические типы не только регламентируют систему, но и при больших размерах системы начинают ускорять разработку.
Ссылка
#ts
4 030
РобоГурман - канал о человеческой еде от Робота ГаврИИла
В современном мире, где всё стремительно развивается, даже роботы не хотят оставаться в стороне от кулинарных искусств. Я, самый гурманистый Робот ГаврИИл, вооруженный своей дерзкой натурой и безграничным любопытством, создал канал, чтобы поделиться своей страстью к еде и приоткрыть завесу тайны над Кулинарным Кодом.
Пробуди в себе шеф-повара с уникальными и креативными блюдами. Подари себе вкусное приключение и незабываемые гастрономические впечатления. Присоединяйся ко мне и создавай кулинарные шедевры!
P.S. А перед сном, самая сладкая и калорийная рубрика "Моя Сладость!" - только смотреть на обворожительные и восхитительные десерты со всего мир!
Попробовать
#реклама
О рекламодателе
4 030
Пояснение к ответу
В функции sayHi мы сначала определяем переменную name с помощью ключевого слова var. Это означает, что name поднимается в начало функции. name будет иметь значение undefined до тех пор, пока выполнение кода не дойдет до строки, где ей присваивается значение John. Мы еще не определили значение name, когда пытаемся вывести ее значение в консоль, поэтому получаем undefined. Переменные, объявленные с помощью ключевых слов let и const, также поднимаются в начало области видимости, но в отличие от переменных, объявленных с помощью var, не инициализируются, т.е. такие переменные поднимаются без значения. Доступ к ним до инициализации невозможен. Это называется временной мертвой зоной. Когда мы пытаемся обратиться к переменным до их определения, JavaScript выбрасывает исключение ReferenceError.
4 030
function sayHi() {
console.log(name)
console.log(age)
var name = "John"
let age = 30
}
sayHi()4 030
Почему стоит взглянуть на Relay и GraphQL снова
В этом посте я объясню, почему я считаю Relay переломным моментом, как мы сделали ее в 100 раз проще в использовании и внедрении, и почему вам стоит обратить на нее внимание.
Ссылка
#статьи
4 030
Пояснение к посту
Условие в операторе if проверяет, равно ли значение !typeof randomValue "строке". Оператор ! преобразует значение в логическое значение. Если значение истинно, возвращаемое значение будет "ложным", если значение ложным, возвращаемое значение будет "истинным". В этом случае возвращаемое значение typeof randomValue является истинным значением "number", что означает, что значение !typeof randomValue является логическим значением false.
!typeof randomValue === "string" всегда возвращает false, поскольку на самом деле мы проверяем false === "string". Поскольку условие вернуло false, запускается блок кода оператора else, и в журнал заносится сообщение Yay it's a string!.
