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
JavaScript не имеет отдельных функций для глубокого копирования массивов или объектов. Существуют различные способы сделать глубокое копирование.
Можно написать функцию глубокого копирования вручную. Скорее всего ваша функция будет рекурсивной, и она будет работать только для конкретных данных — написать универсальную функцию не так-то просто.
Так же можно сериализировать копируемый объект в JSON и распарсить его :
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.