[{"data":1,"prerenderedAt":1185},["ShallowReactive",2],{"$fRYNS_Zbb9CODM_MTimRcxf4mbZS5CU1f2ceqPBZTKQI":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":113,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":116,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":441,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":444,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":688,"mdc--dkav86-key":708,"mdc--4voii-key":720,"mdc--3e8c11-key":728,"mdc-qdfre8-key":736,"mdc-tujzvk-key":744,"mdc--zaudmo-key":752,"mdc--9pagxy-key":760,"mdc-ol28o4-key":775,"mdc--ixbdqj-key":795,"mdc--qg3ay2-key":803,"mdc-oq5c7l-key":859,"mdc--99cqml-key":886,"mdc--t9rgap-key":940,"mdc--1sx067-key":997,"mdc-msquy1-key":1013,"mdc-ienchx-key":1041,"mdc--rejujx-key":1150,"mdc--wobyr1-key":1166},{"content":4,"quizQuestionContent":83,"type":102,"pageMeta":103},[5,9,13,16,20,24,28,31,35,38,42,45,49,52,56,60,63,66,70,73,77,80],{"id":6,"value":7,"isTypeH1":8},"1958","Оптимизация обновлений DOM в React: Virtual DOM и diff",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4565","Теория: что именно оптимизируется","theory-what-is-optimized",{"id":14,"value":15,"isTypeParagraph":8},"10487","В React обновление интерфейса происходит в несколько шагов: триггер рендера → вычисление результата рендера → фиксация изменений в DOM (commit).  \nРендер в React — это вычисление нового «описания интерфейса», а реальный DOM изменяется только на этапе commit.  \nПри повторных рендерах React определяет, что именно изменилось по сравнению с предыдущим результатом, и старается обновить DOM точечно, а не пересоздавать всю разметку.",{"id":17,"description":18,"titleAlert":19,"isTypeAlertWarning":8},"766","Важно различать «перерендер компонента» и «обновление DOM»: компонент может вычислиться заново, но если результат совпал с предыдущим, реальный DOM может не измениться.",null,{"id":21,"value":22,"anchor":23,"isTypeH2":8},"4566","Механизм React: Virtual DOM → reconciliation → diff → commit","react-mechanism",{"id":25,"value":26,"anchor":27,"isTypeH3":8},"4586","Virtual DOM как “описание UI”","virtual-dom-as-ui-description",{"id":29,"value":30,"isTypeParagraph":8},"10488","Результат работы компонента (функционального или `render()` в классовом) можно воспринимать как дерево элементов React — легковесное описание того, что должно быть на экране.  \nПосле изменения `state` или `props` получается новое дерево, и требуется привести интерфейс к нему.\n\nСхема процесса (упрощенно):  \n```\n[Событие / setState / обновление данных]\n                 |\n                 v\n(1) Trigger: планирование обновления\n                 |\n                 v\n(2) Render: вычисление нового дерева UI (в памяти)\n                 |\n                 v\n(3) Reconciliation/Diff: сравнение со старым деревом\n                 |\n                 v\n(4) Commit: применение минимальных изменений к DOM\n```",{"id":32,"value":33,"anchor":34,"isTypeH3":8},"4587","Reconciliation и “diffing” (согласование деревьев)","reconciliation-and-diffing",{"id":36,"value":37,"isTypeParagraph":8},"10489","Теоретически поиск «самого оптимального» набора операций, превращающих одно дерево в другое, может быть слишком дорогим по времени, поэтому используется быстрый эвристический подход.  \nБазовые идеи эвристик: если тип элемента изменился, старое поддерево обычно заменяется новым; если тип совпадает, можно переиспользовать существующий DOM-узел и обновить только изменившиеся атрибуты/свойства.  \nДля списков добавляется важная подсказка — `key`, помогающий понять, какие элементы являются «теми же самыми» между рендерами.",{"id":39,"value":40,"anchor":41,"isTypeH3":8},"4588","Commit: применение операций к реальному DOM","commit-phase",{"id":43,"value":44,"isTypeParagraph":8},"10490","На первичном рендере создаются DOM-узлы и добавляются в документ.  \nНа повторных рендерах применяются только операции, необходимые для синхронизации DOM с новым деревом (например, изменение атрибута, текста, добавление/удаление конкретного узла).  \nИдея минимальности заключается в том, что меняется только то, что действительно отличается, а одинаковые части переиспользуются.\n\nПример, где меняется только атрибут (идея точечного обновления):  \n```\nfunction Box({ active }) {\n  return (\n    \u003Cdiv className={active ? \"on\" : \"off\"} title=\"same-title\">\n      hello\n    \u003C/div>\n  );\n}\n```\n\nПри смене `active` ожидается изменение только `className`, а не пересоздание всего узла.",{"id":46,"value":47,"anchor":48,"isTypeH2":8},"4567","Почему остальные варианты неверны","why-others-wrong",{"id":50,"value":51,"isTypeParagraph":8},"10491","Вариант 1 неверен: React не сводится к прямым ручным манипуляциям DOM «без промежуточных слоев», так как сначала вычисляется новое описание UI, затем выполняется сравнение и только потом происходит commit в DOM.  \nВариант 3 неверен: CSS-анимации не являются базовым механизмом вычисления минимальных DOM-изменений; анимации могут применяться дополнительно, но не заменяют согласование дерева.  \nВариант 4 неверен: распараллеливание рендера каждого компонента через Web Workers не является основой механизма обновления DOM в React; ключевой механизм — сравнение деревьев и последующее применение рассчитанных изменений.\n",{"id":53,"value":54,"anchor":55,"isTypeH2":8},"4568","Практические детали (keys, списки, состояние)","practical-details",{"id":57,"value":58,"anchor":59,"isTypeH3":8},"4589","Keys и списки: зачем нужен `key`","keys-and-lists",{"id":61,"value":62,"isTypeParagraph":8},"10492","Без `key` элементы в списке сопоставляются в упрощенном порядке (по позиции), из‑за чего вставка/удаление в начале списка может приводить к большему числу изменений, чем нужно.  \n`key` помогает правильно сопоставить элементы между старым и новым деревом, чтобы понять, что было добавлено, удалено, перемещено и что можно переиспользовать.  \n`key` должен быть уникальным среди соседних элементов и стабильным во времени; нестабильные ключи могут вызывать лишние пересоздания и неожиданную потерю локального состояния дочерних компонентов.\n\nПример корректного `key` в списке:  \n```\nfunction TodoList({ items }) {\n  return (\n    \u003Cul>\n      {items.map(item => (\n        \u003Cli key={item.id}>{item.text}\u003C/li>\n      ))}\n    \u003C/ul>\n  );\n}\n```",{"id":64,"description":65,"titleAlert":19,"isTypeAlertWarning":8},"767","Индекс массива в роли `key` часто приводит к проблемам при вставках/удалениях и перестановках, так как «личность» элемента начинает зависеть от позиции, которая меняется.",{"id":67,"value":68,"anchor":69,"isTypeH3":8},"4590","Когда React заменяет поддерево целиком","when-react-replaces-subtree",{"id":71,"value":72,"isTypeParagraph":8},"10493","Если в одной и той же позиции дерева раньше был элемент одного типа, а стал другого типа, чаще всего старое поддерево уничтожается и создается заново.  \nЭто может приводить к тому, что дочерние компоненты будут смонтированы заново, а их внутреннее состояние (например, введенный текст, фокус, локальные состояния) может быть потеряно.\n\nПример смены типа корневого узла (упрощенно):  \n```\nfunction Wrapper({ mode }) {\n  if (mode === \"a\") {\n    return \u003Cdiv>\u003CCounter />\u003C/div>;\n  }\n  return \u003Cspan>\u003CCounter />\u003C/span>;\n}\n```",{"id":74,"value":75,"anchor":76,"isTypeH2":8},"4569","Таблица: фазы обновления в React","react-update-phases-table",{"id":78,"value":79,"isTypeParagraph":8},"10494","| Фаза | Что происходит | Где появляется “оптимизация” |\n|---|---|---|\n| Trigger | Изменение данных (state/props), планирование обновления | Определяется, что надо пересчитать |\n| Render | Вычисляется новое дерево UI (в памяти) | Здесь готовится новое описание интерфейса |\n| Reconciliation/Diff | Сравнивается новое дерево со старым, выбираются изменения | Находится минимально необходимый набор действий |\n| Commit | Применяются изменения к реальному DOM | DOM меняется точечно, только где нужно |",{"id":81,"value":82,"isTypeParagraph":8},"10495","Итого: оптимизация обновлений DOM в React основана на вычислении нового дерева UI в памяти, сравнении его со старым (reconciliation/diff, включая роль `key` в списках) и применении в commit-фазе только минимально необходимых операций к реальному DOM.",{"id":84,"options":85,"hint":99,"solution":100,"description":101},"1187",[86,90,93,96],{"id":87,"label":88,"isCorrect":89},"4892","За счет прямого манипулирования DOM с помощью JavaScript без промежуточных слоев",false,{"id":91,"label":92,"isCorrect":8},"4893","За счет использования виртуального DOM и алгоритма дифференциального сравнения для вычисления минимальных изменений реального DOM",{"id":94,"label":95,"isCorrect":89},"4894","За счет автоматической генерации CSS-анимаций для всех изменений интерфейса",{"id":97,"label":98,"isCorrect":89},"4895","За счет использования Web Workers для параллельного рендеринга каждого компонента","Следует выбирать вариант, в котором говорится о «виртуальном DOM» и «сравнении (diff) старого и нового дерева» с последующим применением «минимальных изменений» к реальному DOM.","**Правильный ответ: 2** - За счет использования виртуального DOM и алгоритма дифференциального сравнения для вычисления минимальных изменений реального DOM.","Какой механизм лежит в основе оптимизации обновлений DOM в React?","quizQuestion",{"title":104,"description":105,"ogTitle":7,"ogDescription":105,"ogImageUrl":106,"canonical":19,"ogLocale":107,"ogSiteName":108,"ogImageType":109,"ogImageWidth":110,"ogImageHeight":111,"ogType":112,"ogUrl":19},"За счет чего React оптимально изменяет DOM?","Механизм React: виртуальный DOM, согласование (reconciliation), diff и commit-фаза, почему обновляется только минимум реального DOM","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":114,"siteUrl":115},"GOOD WEB JOB!","https://goodwebjob.ru",{"slugs":117},[118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,438],{"name":119,"value":120},"Теоретические задания","theoretical-tasks",{"name":122,"value":123},"Что вернёт этот код: typeof (function(){})()","what-this-code-will-return-typeof-function",{"name":125,"value":126},"С чего начать?","where-to-begin",{"name":128,"value":129},"Почему опасно писать прямо в прототипы базовых типов?","why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":131,"value":132},"Backend","backend",{"name":134,"value":135},"Frontend","frontend",{"name":137,"value":138},"Какие логические значения в console.log будут получены?","prototype-what-logical-values-will-be-received-in-console-log",{"name":140,"value":141},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":143,"value":144}," Найти в массиве неповторяющиеся числа","find-non-repeating-numbers-in-an-array",{"name":146,"value":147},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":149,"value":150},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":152,"value":153},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":155,"value":156},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":158,"value":159},"Какое значение выведет консоль с object.property?","what-value-will-the-console-output-with-object-property",{"name":161,"value":162},"Что выведется в console.log([arr[0](), arr[0]()])?","what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":164,"value":165},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":167,"value":168},"Необходимо проверить, являются ли две строки анаграммами друг друга","checks-whether-two-strings-are-anagrams-of-each-other",{"name":170,"value":171},"Определить, является ли слово палиндромом","determines-whether-a-word-is-a-palindrome",{"name":173,"value":174},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":176,"value":177},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":179,"value":180},"Дано дерево (вложенный объект), надо найти сумму всех вершин","given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":182,"value":183},"Для каждой ветви дерева записать номер вложенности данной ветви","for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":185,"value":186},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":188,"value":189},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":191,"value":192},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":194,"value":195},"Напишите функцию, который сделает из массива объект","write-a-function-that-will-make-an-object-out-of-an-array",{"name":197,"value":198},"Что выведет console.log в результате выполнения цикла while?","what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":200,"value":201},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":203,"value":204},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":206,"value":207},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":209,"value":210},"Уникализация значений в массиве","unifying-values-in-an-array",{"name":212,"value":213},"«Расплющивание» массива","flattening-the-array",{"name":215,"value":216},"Что вернёт метод book.getUpperName()?","what-will-the-book-get-upper-name-method-return",{"name":218,"value":219},"Сжатие строк","string-compression",{"name":221,"value":222},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":224,"value":225},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":227,"value":228},"Как браузер после ввода домена понимает, откуда брать сайт?","how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":230,"value":231},"Как домен попадает в DNS в таблицу соответствия: домен – ip","how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":233,"value":234},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":236,"value":237},"Ключевые отличия TCP и UDP","key-differences-between-tcp-and-udp",{"name":239,"value":240},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":242,"value":243},"Что такое HTTP и из чего состоит?","what-is-http-and-what-does-it-consist-of",{"name":245,"value":246},"Что такое заголовки в HTTP и зачем они нужны?","what-are-http-headers-and-why-do-we-need-them",{"name":248,"value":249},"Что такое параметры в HTTP?","what-are-http-parameters",{"name":251,"value":252},"Где находится HTML-код в структуре HTTP-ответа?","where-is-the-html-code-located-in-the-http-response-structure",{"name":254,"value":255},"Что такое HTML?","what-is-html",{"name":257,"value":258},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":260,"value":261},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":263,"value":264},"Что такое cookie?","what-is-a-cookie",{"name":266,"value":267},"Кто является инициатором записи cookie в браузере?","who-initiates-the-cookie-recording-in-the-browser",{"name":269,"value":270},"Есть ли возможность с клиента (с браузера) управлять cookie?","is-it-possible-to-manage-cookies-from-the-client-browser",{"name":272,"value":273},"Лайвкодинг","livecoding",{"name":275,"value":276},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":278,"value":279},"Всё, что идет по HTTPS – оно защищено?","is-everything-that-goes-through-https-secure",{"name":281,"value":282},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":284,"value":285},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":287,"value":288},"Как браузер парсит JavaScript и изображения при рендеринге?","how-the-browser-parses-javascript-and-images-when-rendering",{"name":290,"value":291},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":293,"value":294},"Что в браузере блокирует рендеринг страницы?","what-is-blocking-the-page-rendering-in-the-browser",{"name":296,"value":297},"Что такое DOM в браузере? Что такое CSSOM?","what-is-dom-in-a-browser-what-is-cssom",{"name":299,"value":300},"Что является узлами в DOM?","what-are-nodes-in-the-dom",{"name":302,"value":303},"Из чего состоит CSSOM?","what-does-cssom-consist-of",{"name":305,"value":306},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":308,"value":309},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":311,"value":312},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":314,"value":315},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":317,"value":318},"Есть HTML код. Будет ли font-weight на span влиять?","there-is-an-html-code-will-font-weight-affect-span",{"name":320,"value":321},"Flexbox и Grid, чем отличаются друг от друга?","what-are-the-differences-between-flexbox-and-grid",{"name":323,"value":324},"Заменяют ли Flexbox и Grid друг друга?","do-flexbox-and-grid-replace-each-other",{"name":326,"value":327},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":329,"value":330},"Сборник задач","tasks",{"name":332,"value":333},"Какие способы объявления функции есть в JavaScript?","what-are-the-ways-to-declare-a-function-in-javascript",{"name":335,"value":336},"Что такое this в JavaScript?","what-is-this-in-javascript",{"name":338,"value":339},"Что такое Event Loop, как работает?","what-is-an-event-loop-and-how-does-it-work",{"name":341,"value":342},"Что будет, если вызвать typeof на необъявленной переменной?","what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":344,"value":345},"Что показывает оператор typeof в JavaScript?","what-does-the-typeof-operator-show-in-javascript",{"name":347,"value":348},"Какие типы данных существует в JavaScript?","what-types-of-data-exist-in-javascript",{"name":350,"value":351},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":353,"value":354},"Что вернет typeof для массива?","what-will-typeof-return-for-an-array",{"name":356,"value":357},"Почему оператор typeof, применённый к массиву, возвращает объект?","why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":359,"value":360},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":362,"value":363},"Что возвращает typeof для new Set в JavaScript?","what-does-typeof-return-for-new-set-in-javascript",{"name":365,"value":366},"Для чего нужен React, какие он решает проблемы?","what-is-react-used-for-and-what-problems-does-it-solve",{"name":368,"value":369},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":371,"value":372},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":374,"value":375},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":377,"value":378},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":380,"value":381},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":383,"value":384},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":386,"value":387},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":389,"value":390},"Какие существуют стратегии ветвления для работы команды? Что это такое?","what-are-the-branching-strategies-for-the-team-what-is-it",{"name":392,"value":393},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":395,"value":396},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":398,"value":399},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":401,"value":402},"Что такое алгоритмическая сложность?","what-is-algorithmic-complexity",{"name":404,"value":405},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","what-is-the-algorithmic-complexity-of-quick-sort",{"name":407,"value":408},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":410,"value":411},"Каким способом может выполняться авторизация пользователя на сайте?","how-can-a-user-be-authorized-on-a-website",{"name":413,"value":414},"В чем разница между микро- и макро-тасками в JavaScript?","what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":416,"value":417},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":419,"value":420},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":422,"value":423},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":425,"value":426},"Подготовка к тех.интервью","technical-interview",{"name":428,"value":429},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":431,"value":432},"Что такое DNS, как DNS находит нужный IP-адрес?","what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":434,"value":435},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","variables-are-declared-as-follows-specify-the-correct-statement",{"name":101,"value":437},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":439,"value":440},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",[442],{"label":425,"slug":426,"to":443},"/technical-interview/where-to-begin",{"navigationList":445,"navigationSublist":451},[446,448],{"path":443,"isActive":89,"name":125,"icon":447,"isNavbarMobileDisabled":8},"material-symbols:visibility-outline-rounded",{"path":449,"isActive":8,"name":329,"icon":450,"isNavbarMobileDisabled":89},"/technical-interview/tasks","material-symbols:task-outline",[452,459,478,487,492,587,604,611,616,659,674,679],{"title":453,"list":454,"isOpened":89},"Bash",[455,457],{"name":395,"path":456,"isActive":89},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":398,"path":458,"isActive":89},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":460,"list":461,"isOpened":89},"CSS",[462,464,466,468,470,472,474,476],{"name":305,"path":463,"isActive":89},"/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":308,"path":465,"isActive":89},"/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":311,"path":467,"isActive":89},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":314,"path":469,"isActive":89},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":317,"path":471,"isActive":89},"/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":320,"path":473,"isActive":89},"/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":323,"path":475,"isActive":89},"/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":326,"path":477,"isActive":89},"/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":479,"list":480,"isOpened":89},"Git",[481,483,485],{"name":383,"path":482,"isActive":89},"/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":386,"path":484,"isActive":89},"/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":389,"path":486,"isActive":89},"/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":488,"list":489,"isOpened":89},"HTML",[490],{"name":254,"path":491,"isActive":89},"/technical-interview/tasks/what-is-html",{"title":493,"list":494,"isOpened":89},"JavaScript",[495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585],{"name":137,"path":496,"isActive":89},"/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":128,"path":498,"isActive":89},"/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":275,"path":500,"isActive":89},"/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":158,"path":502,"isActive":89},"/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":161,"path":504,"isActive":89},"/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":197,"path":506,"isActive":89},"/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":200,"path":508,"isActive":89},"/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":215,"path":510,"isActive":89},"/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":434,"path":512,"isActive":89},"/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":221,"path":514,"isActive":89},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":203,"path":516,"isActive":89},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":206,"path":518,"isActive":89},"/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":122,"path":520,"isActive":89},"/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":224,"path":522,"isActive":89},"/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":332,"path":524,"isActive":89},"/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":335,"path":526,"isActive":89},"/technical-interview/tasks/what-is-this-in-javascript",{"name":338,"path":528,"isActive":89},"/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":341,"path":530,"isActive":89},"/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":344,"path":532,"isActive":89},"/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":347,"path":534,"isActive":89},"/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":350,"path":536,"isActive":89},"/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":353,"path":538,"isActive":89},"/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":356,"path":540,"isActive":89},"/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":359,"path":542,"isActive":89},"/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":362,"path":544,"isActive":89},"/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":407,"path":546,"isActive":89},"/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":413,"path":548,"isActive":89},"/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":146,"path":550,"isActive":89},"/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":164,"path":552,"isActive":89},"/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":149,"path":554,"isActive":89},"/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":179,"path":556,"isActive":89},"/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":155,"path":558,"isActive":89},"/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":182,"path":560,"isActive":89},"/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":173,"path":562,"isActive":89},"/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":185,"path":564,"isActive":89},"/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":191,"path":566,"isActive":89},"/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":143,"path":568,"isActive":89},"/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":194,"path":570,"isActive":89},"/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":167,"path":572,"isActive":89},"/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":140,"path":574,"isActive":89},"/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":170,"path":576,"isActive":89},"/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":212,"path":578,"isActive":89},"/technical-interview/tasks/flattening-the-array",{"name":176,"path":580,"isActive":89},"/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":218,"path":582,"isActive":89},"/technical-interview/tasks/string-compression",{"name":209,"path":584,"isActive":89},"/technical-interview/tasks/unifying-values-in-an-array",{"name":188,"path":586,"isActive":89},"/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":588,"list":589,"isOpened":89},"React",[590,592,594,596,598,600,602],{"name":365,"path":591,"isActive":89},"/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":101,"path":593,"isActive":89},"/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":368,"path":595,"isActive":89},"/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":371,"path":597,"isActive":89},"/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":374,"path":599,"isActive":89},"/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":377,"path":601,"isActive":89},"/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":439,"path":603,"isActive":89},"/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":605,"list":606,"isOpened":89},"Алгоритмы",[607,609],{"name":401,"path":608,"isActive":89},"/technical-interview/tasks/what-is-algorithmic-complexity",{"name":404,"path":610,"isActive":89},"/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":612,"list":613,"isOpened":89},"Дебаггинг",[614],{"name":380,"path":615,"isActive":89},"/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":617,"list":618,"isOpened":89},"Компьютерные сети",[619,621,623,625,627,629,631,633,635,637,639,641,643,645,647,649,651,653,655,657],{"name":227,"path":620,"isActive":89},"/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":431,"path":622,"isActive":89},"/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":230,"path":624,"isActive":89},"/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":233,"path":626,"isActive":89},"/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":236,"path":628,"isActive":89},"/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":239,"path":630,"isActive":89},"/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":242,"path":632,"isActive":89},"/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":245,"path":634,"isActive":89},"/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":248,"path":636,"isActive":89},"/technical-interview/tasks/what-are-http-parameters",{"name":251,"path":638,"isActive":89},"/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":257,"path":640,"isActive":89},"/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":260,"path":642,"isActive":89},"/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":263,"path":644,"isActive":89},"/technical-interview/tasks/what-is-a-cookie",{"name":266,"path":646,"isActive":89},"/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":269,"path":648,"isActive":89},"/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":428,"path":650,"isActive":89},"/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":278,"path":652,"isActive":89},"/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":281,"path":654,"isActive":89},"/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":284,"path":656,"isActive":89},"/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":410,"path":658,"isActive":89},"/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":660,"list":661,"isOpened":89},"Отрисовка в браузере",[662,664,666,668,670,672],{"name":290,"path":663,"isActive":89},"/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":287,"path":665,"isActive":89},"/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":293,"path":667,"isActive":89},"/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":296,"path":669,"isActive":89},"/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":299,"path":671,"isActive":89},"/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":302,"path":673,"isActive":89},"/technical-interview/tasks/what-does-cssom-consist-of",{"title":675,"list":676,"isOpened":89},"Ревью кода",[677],{"name":392,"path":678,"isActive":89},"/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":680,"list":681,"isOpened":89},"Теория вероятности",[682,684,686],{"name":416,"path":683,"isActive":89},"/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":419,"path":685,"isActive":89},"/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":422,"path":687,"isActive":89},"/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"cooperation":689,"copyright":692,"reportError":693,"socialNetwork":695},{"link":690,"title":691},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":694,"link":690},"Сообщить об ошибке",{"label":696,"socialNetworkList":697},"Мы в соцсетях:",[698,701,704],{"icon":19,"link":699,"title":700},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":702,"link":690,"title":703},"ic:baseline-telegram","Telegram",{"icon":705,"link":706,"title":707},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":709,"body":710},{},{"type":711,"children":712},"root",[713],{"type":714,"tag":715,"props":716,"children":717},"element","p",{},[718],{"type":719,"value":101},"text",{"data":721,"body":722},{},{"type":711,"children":723},[724],{"type":714,"tag":715,"props":725,"children":726},{},[727],{"type":719,"value":88},{"data":729,"body":730},{},{"type":711,"children":731},[732],{"type":714,"tag":715,"props":733,"children":734},{},[735],{"type":719,"value":92},{"data":737,"body":738},{},{"type":711,"children":739},[740],{"type":714,"tag":715,"props":741,"children":742},{},[743],{"type":719,"value":95},{"data":745,"body":746},{},{"type":711,"children":747},[748],{"type":714,"tag":715,"props":749,"children":750},{},[751],{"type":719,"value":98},{"data":753,"body":754},{},{"type":711,"children":755},[756],{"type":714,"tag":715,"props":757,"children":758},{},[759],{"type":719,"value":99},{"data":761,"body":762},{},{"type":711,"children":763},[764],{"type":714,"tag":715,"props":765,"children":766},{},[767,773],{"type":714,"tag":768,"props":769,"children":770},"strong",{},[771],{"type":719,"value":772},"Правильный ответ: 2",{"type":719,"value":774}," - За счет использования виртуального DOM и алгоритма дифференциального сравнения для вычисления минимальных изменений реального DOM.",{"data":776,"body":777},{},{"type":711,"children":778},[779],{"type":714,"tag":715,"props":780,"children":781},{},[782,784,788,790,793],{"type":719,"value":783},"В React обновление интерфейса происходит в несколько шагов: триггер рендера → вычисление результата рендера → фиксация изменений в DOM (commit).",{"type":714,"tag":785,"props":786,"children":787},"br",{},[],{"type":719,"value":789},"\nРендер в React — это вычисление нового «описания интерфейса», а реальный DOM изменяется только на этапе commit.",{"type":714,"tag":785,"props":791,"children":792},{},[],{"type":719,"value":794},"\nПри повторных рендерах React определяет, что именно изменилось по сравнению с предыдущим результатом, и старается обновить DOM точечно, а не пересоздавать всю разметку.",{"data":796,"body":797},{},{"type":711,"children":798},[799],{"type":714,"tag":715,"props":800,"children":801},{},[802],{"type":719,"value":18},{"data":804,"body":805},{},{"type":711,"children":806},[807,842,847],{"type":714,"tag":715,"props":808,"children":809},{},[810,812,819,821,824,826,832,834,840],{"type":719,"value":811},"Результат работы компонента (функционального или ",{"type":714,"tag":813,"props":814,"children":816},"code",{"className":815},[],[817],{"type":719,"value":818},"render()",{"type":719,"value":820}," в классовом) можно воспринимать как дерево элементов React — легковесное описание того, что должно быть на экране.",{"type":714,"tag":785,"props":822,"children":823},{},[],{"type":719,"value":825},"\nПосле изменения ",{"type":714,"tag":813,"props":827,"children":829},{"className":828},[],[830],{"type":719,"value":831},"state",{"type":719,"value":833}," или ",{"type":714,"tag":813,"props":835,"children":837},{"className":836},[],[838],{"type":719,"value":839},"props",{"type":719,"value":841}," получается новое дерево, и требуется привести интерфейс к нему.",{"type":714,"tag":715,"props":843,"children":844},{},[845],{"type":719,"value":846},"Схема процесса (упрощенно):",{"type":714,"tag":848,"props":849,"children":853},"pre",{"className":850,"code":852,"language":719},[851],"language-text","[Событие / setState / обновление данных]\n                 |\n                 v\n(1) Trigger: планирование обновления\n                 |\n                 v\n(2) Render: вычисление нового дерева UI (в памяти)\n                 |\n                 v\n(3) Reconciliation/Diff: сравнение со старым деревом\n                 |\n                 v\n(4) Commit: применение минимальных изменений к DOM\n",[854],{"type":714,"tag":813,"props":855,"children":857},{"__ignoreMap":856},"",[858],{"type":719,"value":852},{"data":860,"body":861},{},{"type":711,"children":862},[863],{"type":714,"tag":715,"props":864,"children":865},{},[866,868,871,873,876,878,884],{"type":719,"value":867},"Теоретически поиск «самого оптимального» набора операций, превращающих одно дерево в другое, может быть слишком дорогим по времени, поэтому используется быстрый эвристический подход.",{"type":714,"tag":785,"props":869,"children":870},{},[],{"type":719,"value":872},"\nБазовые идеи эвристик: если тип элемента изменился, старое поддерево обычно заменяется новым; если тип совпадает, можно переиспользовать существующий DOM-узел и обновить только изменившиеся атрибуты/свойства.",{"type":714,"tag":785,"props":874,"children":875},{},[],{"type":719,"value":877},"\nДля списков добавляется важная подсказка — ",{"type":714,"tag":813,"props":879,"children":881},{"className":880},[],[882],{"type":719,"value":883},"key",{"type":719,"value":885},", помогающий понять, какие элементы являются «теми же самыми» между рендерами.",{"data":887,"body":888},{},{"type":711,"children":889},[890,905,910,919],{"type":714,"tag":715,"props":891,"children":892},{},[893,895,898,900,903],{"type":719,"value":894},"На первичном рендере создаются DOM-узлы и добавляются в документ.",{"type":714,"tag":785,"props":896,"children":897},{},[],{"type":719,"value":899},"\nНа повторных рендерах применяются только операции, необходимые для синхронизации DOM с новым деревом (например, изменение атрибута, текста, добавление/удаление конкретного узла).",{"type":714,"tag":785,"props":901,"children":902},{},[],{"type":719,"value":904},"\nИдея минимальности заключается в том, что меняется только то, что действительно отличается, а одинаковые части переиспользуются.",{"type":714,"tag":715,"props":906,"children":907},{},[908],{"type":719,"value":909},"Пример, где меняется только атрибут (идея точечного обновления):",{"type":714,"tag":848,"props":911,"children":914},{"className":912,"code":913,"language":719},[851],"function Box({ active }) {\n  return (\n    \u003Cdiv className={active ? \"on\" : \"off\"} title=\"same-title\">\n      hello\n    \u003C/div>\n  );\n}\n",[915],{"type":714,"tag":813,"props":916,"children":917},{"__ignoreMap":856},[918],{"type":719,"value":913},{"type":714,"tag":715,"props":920,"children":921},{},[922,924,930,932,938],{"type":719,"value":923},"При смене ",{"type":714,"tag":813,"props":925,"children":927},{"className":926},[],[928],{"type":719,"value":929},"active",{"type":719,"value":931}," ожидается изменение только ",{"type":714,"tag":813,"props":933,"children":935},{"className":934},[],[936],{"type":719,"value":937},"className",{"type":719,"value":939},", а не пересоздание всего узла.",{"data":941,"body":942},{},{"type":711,"children":943},[944,976,988],{"type":714,"tag":715,"props":945,"children":946},{},[947,949,954,956,959,964,966,969,974],{"type":719,"value":948},"Без ",{"type":714,"tag":813,"props":950,"children":952},{"className":951},[],[953],{"type":719,"value":883},{"type":719,"value":955}," элементы в списке сопоставляются в упрощенном порядке (по позиции), из‑за чего вставка/удаление в начале списка может приводить к большему числу изменений, чем нужно.",{"type":714,"tag":785,"props":957,"children":958},{},[],{"type":714,"tag":813,"props":960,"children":962},{"className":961},[],[963],{"type":719,"value":883},{"type":719,"value":965}," помогает правильно сопоставить элементы между старым и новым деревом, чтобы понять, что было добавлено, удалено, перемещено и что можно переиспользовать.",{"type":714,"tag":785,"props":967,"children":968},{},[],{"type":714,"tag":813,"props":970,"children":972},{"className":971},[],[973],{"type":719,"value":883},{"type":719,"value":975}," должен быть уникальным среди соседних элементов и стабильным во времени; нестабильные ключи могут вызывать лишние пересоздания и неожиданную потерю локального состояния дочерних компонентов.",{"type":714,"tag":715,"props":977,"children":978},{},[979,981,986],{"type":719,"value":980},"Пример корректного ",{"type":714,"tag":813,"props":982,"children":984},{"className":983},[],[985],{"type":719,"value":883},{"type":719,"value":987}," в списке:",{"type":714,"tag":848,"props":989,"children":992},{"className":990,"code":991,"language":719},[851],"function TodoList({ items }) {\n  return (\n    \u003Cul>\n      {items.map(item => (\n        \u003Cli key={item.id}>{item.text}\u003C/li>\n      ))}\n    \u003C/ul>\n  );\n}\n",[993],{"type":714,"tag":813,"props":994,"children":995},{"__ignoreMap":856},[996],{"type":719,"value":991},{"data":998,"body":999},{},{"type":711,"children":1000},[1001],{"type":714,"tag":715,"props":1002,"children":1003},{},[1004,1006,1011],{"type":719,"value":1005},"Индекс массива в роли ",{"type":714,"tag":813,"props":1007,"children":1009},{"className":1008},[],[1010],{"type":719,"value":883},{"type":719,"value":1012}," часто приводит к проблемам при вставках/удалениях и перестановках, так как «личность» элемента начинает зависеть от позиции, которая меняется.",{"data":1014,"body":1015},{},{"type":711,"children":1016},[1017,1027,1032],{"type":714,"tag":715,"props":1018,"children":1019},{},[1020,1022,1025],{"type":719,"value":1021},"Если в одной и той же позиции дерева раньше был элемент одного типа, а стал другого типа, чаще всего старое поддерево уничтожается и создается заново.",{"type":714,"tag":785,"props":1023,"children":1024},{},[],{"type":719,"value":1026},"\nЭто может приводить к тому, что дочерние компоненты будут смонтированы заново, а их внутреннее состояние (например, введенный текст, фокус, локальные состояния) может быть потеряно.",{"type":714,"tag":715,"props":1028,"children":1029},{},[1030],{"type":719,"value":1031},"Пример смены типа корневого узла (упрощенно):",{"type":714,"tag":848,"props":1033,"children":1036},{"className":1034,"code":1035,"language":719},[851],"function Wrapper({ mode }) {\n  if (mode === \"a\") {\n    return \u003Cdiv>\u003CCounter />\u003C/div>;\n  }\n  return \u003Cspan>\u003CCounter />\u003C/span>;\n}\n",[1037],{"type":714,"tag":813,"props":1038,"children":1039},{"__ignoreMap":856},[1040],{"type":719,"value":1035},{"data":1042,"body":1043},{},{"type":711,"children":1044},[1045],{"type":714,"tag":1046,"props":1047,"children":1048},"table",{},[1049,1073],{"type":714,"tag":1050,"props":1051,"children":1052},"thead",{},[1053],{"type":714,"tag":1054,"props":1055,"children":1056},"tr",{},[1057,1063,1068],{"type":714,"tag":1058,"props":1059,"children":1060},"th",{},[1061],{"type":719,"value":1062},"Фаза",{"type":714,"tag":1058,"props":1064,"children":1065},{},[1066],{"type":719,"value":1067},"Что происходит",{"type":714,"tag":1058,"props":1069,"children":1070},{},[1071],{"type":719,"value":1072},"Где появляется “оптимизация”",{"type":714,"tag":1074,"props":1075,"children":1076},"tbody",{},[1077,1096,1114,1132],{"type":714,"tag":1054,"props":1078,"children":1079},{},[1080,1086,1091],{"type":714,"tag":1081,"props":1082,"children":1083},"td",{},[1084],{"type":719,"value":1085},"Trigger",{"type":714,"tag":1081,"props":1087,"children":1088},{},[1089],{"type":719,"value":1090},"Изменение данных (state/props), планирование обновления",{"type":714,"tag":1081,"props":1092,"children":1093},{},[1094],{"type":719,"value":1095},"Определяется, что надо пересчитать",{"type":714,"tag":1054,"props":1097,"children":1098},{},[1099,1104,1109],{"type":714,"tag":1081,"props":1100,"children":1101},{},[1102],{"type":719,"value":1103},"Render",{"type":714,"tag":1081,"props":1105,"children":1106},{},[1107],{"type":719,"value":1108},"Вычисляется новое дерево UI (в памяти)",{"type":714,"tag":1081,"props":1110,"children":1111},{},[1112],{"type":719,"value":1113},"Здесь готовится новое описание интерфейса",{"type":714,"tag":1054,"props":1115,"children":1116},{},[1117,1122,1127],{"type":714,"tag":1081,"props":1118,"children":1119},{},[1120],{"type":719,"value":1121},"Reconciliation/Diff",{"type":714,"tag":1081,"props":1123,"children":1124},{},[1125],{"type":719,"value":1126},"Сравнивается новое дерево со старым, выбираются изменения",{"type":714,"tag":1081,"props":1128,"children":1129},{},[1130],{"type":719,"value":1131},"Находится минимально необходимый набор действий",{"type":714,"tag":1054,"props":1133,"children":1134},{},[1135,1140,1145],{"type":714,"tag":1081,"props":1136,"children":1137},{},[1138],{"type":719,"value":1139},"Commit",{"type":714,"tag":1081,"props":1141,"children":1142},{},[1143],{"type":719,"value":1144},"Применяются изменения к реальному DOM",{"type":714,"tag":1081,"props":1146,"children":1147},{},[1148],{"type":719,"value":1149},"DOM меняется точечно, только где нужно",{"data":1151,"body":1152},{},{"type":711,"children":1153},[1154],{"type":714,"tag":715,"props":1155,"children":1156},{},[1157,1159,1164],{"type":719,"value":1158},"Итого: оптимизация обновлений DOM в React основана на вычислении нового дерева UI в памяти, сравнении его со старым (reconciliation/diff, включая роль ",{"type":714,"tag":813,"props":1160,"children":1162},{"className":1161},[],[1163],{"type":719,"value":883},{"type":719,"value":1165}," в списках) и применении в commit-фазе только минимально необходимых операций к реальному DOM.",{"data":1167,"body":1168},{},{"type":711,"children":1169},[1170],{"type":714,"tag":715,"props":1171,"children":1172},{},[1173,1175,1178,1180,1183],{"type":719,"value":1174},"Вариант 1 неверен: React не сводится к прямым ручным манипуляциям DOM «без промежуточных слоев», так как сначала вычисляется новое описание UI, затем выполняется сравнение и только потом происходит commit в DOM.",{"type":714,"tag":785,"props":1176,"children":1177},{},[],{"type":719,"value":1179},"\nВариант 3 неверен: CSS-анимации не являются базовым механизмом вычисления минимальных DOM-изменений; анимации могут применяться дополнительно, но не заменяют согласование дерева.",{"type":714,"tag":785,"props":1181,"children":1182},{},[],{"type":719,"value":1184},"\nВариант 4 неверен: распараллеливание рендера каждого компонента через Web Workers не является основой механизма обновления DOM в React; ключевой механизм — сравнение деревьев и последующее применение рассчитанных изменений.",1775735655417]