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