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