WebCoder | Frontend
Авторский канал по фронтенду Реклама: @vvladimirovv @Dmitryneg @Shepelev_DmV Главный: @vvladimirovv
Show more- Subscribers
- Post coverage
- ER - engagement ratio
Data loading in progress...
Data loading in progress...
Финансово независим каждый, кто над этим работает. Тут про: — управление личными финансами — психологию денег
simpleObj = {
fieldOne: 1,
fieldTwo: 2,
fieldThree: 3,
};
console.log(simpleObj);
// простой объект - {fieldOne: 1, fieldTwo: 2, fieldThree: 3,}
const simpleObjectCopy = {... simpleObj}; // используем spread для копирования простого объекта
console.log(simpleObjectCopy);
//клонированный простой объект - {fieldOne: 1, fieldTwo: 2, fieldThree: 3,}
simpleObjectCopy.fieldOne = 2; //изменим значение первого поля в копированном объекте, чтоб убедится что эти два объекта не связаны
console.log(simpleObj); // {fieldOne: 1, fieldTwo: 2, fieldThree: 3,}
console.log(simpleObjectCopy); // {fieldOne: 2, fieldTwo: 2, fieldThree: 3,}
const foodInCart = [
{ product: 'Агава', quantity: 3},
{ product: 'Апельсин', quantity: 1 },
{ product: 'Дыня', quantity: 1 },
]
const clonedCart = [...foodInCart]
console.log(clonedCart);
// [
// { product: 'Агава', quantity: 3 },
// { product: 'Апельсин', quantity: 1 },
// { product: 'Дыня', quantity: 1 },
// ]
= 5 // изменяем поле "количество" в объекте под индексом 1
console.log(clonedCart)
// [
// { product: 'Агава', quantity: 3 },
// { product: 'Апельсин', quantity: 5 },
// { product: 'Дыня', quantity: 1 },
// ]
console.log(foodInCart)
// [
// { product: 'Агава', quantity: 3 },
// { product: 'Апельсин', quantity: 5 },
// { product: 'Дыня', quantity: 1 },
// ]
=== clonedCart[1]); //true
const deepClone = JSON.parse(JSON.stringify(foodInCart))
console.log(foodInCart[1] === deepClone[1]) // false
Но данный метод не идеальный, потому что копируемые данные должны быть сериализуемыми. Если у объекта существуют методы или массив содержит функции, то копирование не сработает.
Еще один способ это воспользоваться популярной библиотекой утилит lodashДанный выпуск посвящен ключевому алгоритму реакта "React Reconciliation". Именно он определяет разницу деревьев между обновлениями. Именно он делает так, что практически при любом количестве изменений вы получите заветные 60 кадров в секунду. И именно он настолько пере используем, чтобы работать как для React Native так и для браузера React Reconciliation -
https://reactjs.org/docs/reconciliation.htmlReact Fiber Architecture -
https://github.com/acdlite/react-fiber-architectureReactNext 2016 "What is React Fiber?" -
https://youtu.be/aV1271hd9ewЭвристический алгоритм -
https://ru.wikipedia.org/wiki/%D0%AD%D0%B2%D1%80%D0%B8%D1%81%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B0%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BCList of priorities -
https://github.com/facebook/react/blob/master/packages/scheduler/src/SchedulerPriorities.js#L13List of priority timeouts -
https://github.com/facebook/react/blob/master/packages/scheduler/src/Scheduler.js#L53Unstable exports -
https://github.com/facebook/react/blob/master/packages/scheduler/src/Scheduler.js#L421One more list of priorities -
https://github.com/facebook/react/blob/master/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js#L54Поддержать Айти Синяка можно здесь: YouTube:
https://www.youtube.com/channel/UClgj-KWiNaOo9H1rz1ISO6Q/joinboosty:
https://boosty.to/sin9kPatreon:
https://www.patreon.com/ITSin9kТаймкоды: 00:00 - Объявление темы 00:46 - Источники информации 01:07 - Короткое определение "Reconciliation" 01:19 - Как React на самом деле работает 02:36 - React DOM and RN rendering 03:01 - Алгоритм сравнения деревьев 03:38 - Определение "Эвристический алгоритм" 04:21 - Общий пример изменения типов 04:45 - Боевой пример изменения типов 08:00 - Приоритизация DOM операций 08:55 - Приоритизация базируется на 2 функциях 09:15 - Реализация приоритизации на GitHub 10:24 - React Fiber intro 11:03 - Вывод 11:22 - Подписывайтесь! 11:33 - Рекомендованные видео Подписаться на канал:
https://www.youtube.com/channel/UClgj-KWiNaOo9H1rz1ISO6Q?sub_confirmation=1Twitter:
https://twitter.com/it_sin9k------------------------- Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
Your current plan allows analytics for only 5 channels. To get more, please choose a different plan.