{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Ключевая идея"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"не обновляет весь UI"},{"type":"text","text":", а "},{"type":"text","marks":[{"type":"bold"}],"text":"только те компоненты"},{"type":"text","text":", у которых изменились"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"props"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"state"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"bold"}],"text":"контекст"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы понять это, React использует свой "},{"type":"text","marks":[{"type":"bold"}],"text":"алгоритм согласования (reconciliation algorithm)"},{"type":"text","text":"."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 1. Триггер обновления"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Повторный рендер (и, следовательно, потенциальное обновление компонента) может быть вызван:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Изменением "},{"type":"text","marks":[{"type":"bold"}],"text":"внутреннего состояния"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"setState"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Изменением "},{"type":"text","marks":[{"type":"bold"}],"text":"props"},{"type":"text","text":", переданных от родителя"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Изменением "},{"type":"text","marks":[{"type":"bold"}],"text":"контекста"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"useContext"},{"type":"text","text":")"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Явным вызовом "},{"type":"text","marks":[{"type":"code"}],"text":"forceUpdate()"},{"type":"text","text":" (в классовых компонентах)"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Эти события запускают "},{"type":"text","marks":[{"type":"bold"}],"text":"render phase"},{"type":"text","text":" — React заново вызывает функцию-компонент (или "},{"type":"text","marks":[{"type":"code"}],"text":"render()"},{"type":"text","text":" в классе)."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 2. React строит новое Virtual DOM дерево"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React вызывает все затронутые компоненты и создаёт новое “виртуальное представление” UI —"},{"type":"hardBreak"},{"type":"text","text":"то есть "},{"type":"text","marks":[{"type":"bold"}],"text":"новое Virtual DOM-дерево"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый JSX-элемент превращается в объект вроде:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{\n type: 'div',\n key: null,\n props: { className: 'btn', children: 'Click me' }\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 3. React сравнивает старое и новое дерево"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Теперь начинается "},{"type":"text","marks":[{"type":"bold"}],"text":"reconciliation (согласование)"},{"type":"text","text":":"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React берёт "},{"type":"text","marks":[{"type":"bold"}],"text":"старое дерево Virtual DOM"},{"type":"text","text":" (до обновления)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сравнивает его с "},{"type":"text","marks":[{"type":"bold"}],"text":"новым деревом"},{"type":"text","text":", созданным после вызова "},{"type":"text","marks":[{"type":"code"}],"text":"render()"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вычисляет, какие узлы изменились — это процесс "},{"type":"text","marks":[{"type":"bold"}],"text":"diffing"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔍 4. Правила, по которым React решает, что обновить"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Правило 1: сравнение по типу элемента"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"bold"}],"text":"тип"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"type"},{"type":"text","text":") элемента "},{"type":"text","marks":[{"type":"bold"}],"text":"такой же"},{"type":"text","text":", React "},{"type":"text","marks":[{"type":"bold"}],"text":"сохраняет"},{"type":"text","text":" старый DOM-узел"},{"type":"hardBreak"},{"type":"text","text":"и "},{"type":"text","marks":[{"type":"bold"}],"text":"обновляет только пропсы"},{"type":"text","text":"."}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

✅ один и тот же элемент\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ React просто обновит "},{"type":"text","marks":[{"type":"code"}],"text":"className"},{"type":"text","text":", не пересоздавая элемент."}]},{"type":"horizontalRule"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если тип "},{"type":"text","marks":[{"type":"bold"}],"text":"изменился"},{"type":"text","text":", React "},{"type":"text","marks":[{"type":"bold"}],"text":"удаляет старый узел"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"создаёт новый"},{"type":"text","text":"."}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

...

\n...\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ Старый "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" будет удалён, "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — создан заново."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Правило 2: сравнение по "},{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":" в списках"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда у тебя список компонентов:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{items.map(item => )}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React использует "},{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":", чтобы понять, "},{"type":"text","marks":[{"type":"bold"}],"text":"какие элементы остались прежними"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а какие "},{"type":"text","marks":[{"type":"bold"}],"text":"новые / удалённые / перемещённые"},{"type":"text","text":"."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":" совпадает → элемент остаётся."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":" другой → React считает его "},{"type":"text","marks":[{"type":"bold"}],"text":"новым элементом"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Это позволяет не пересоздавать весь список, а только изменённые элементы."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Правило 3: сравнение пропсов и состояния"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если компонент "},{"type":"text","marks":[{"type":"bold"}],"text":"того же типа"},{"type":"text","text":", но:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"props"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"изменились"},{"type":"text","text":" (по значению или ссылке),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"или "},{"type":"text","marks":[{"type":"bold"}],"text":"внутренний state"},{"type":"text","text":" обновился,"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"➡️ React "},{"type":"text","marks":[{"type":"bold"}],"text":"перерисует (re-render)"},{"type":"text","text":" этот компонент, чтобы пересчитать Virtual DOM."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если пропсы "},{"type":"text","marks":[{"type":"bold"}],"text":"не изменились"},{"type":"text","text":" (и компонент не зависит от контекста),"},{"type":"hardBreak"},{"type":"text","text":"React может "},{"type":"text","marks":[{"type":"bold"}],"text":"пропустить его перерендер"},{"type":"text","text":" (особенно при использовании "},{"type":"text","marks":[{"type":"code"}],"text":"React.memo"},{"type":"text","text":")."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 Правило 4: использование "},{"type":"text","marks":[{"type":"code"}],"text":"shouldComponentUpdate"},{"type":"text","text":" / "},{"type":"text","marks":[{"type":"code"}],"text":"React.memo"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для оптимизации React может спросить у компонента:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“Нужно ли тебе перерендериваться?”"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В классовых компонентах — через "},{"type":"text","marks":[{"type":"code"}],"text":"shouldComponentUpdate(nextProps, nextState)"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В функциональных — через "},{"type":"text","marks":[{"type":"code"}],"text":"React.memo(Component, areEqual)"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если ответ — ❌ "},{"type":"text","marks":[{"type":"italic"}],"text":"“Нет, всё то же самое”"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"пропускает обновление"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"не вызывает render()"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 5. React вычисляет diff и обновляет только изменившиеся части DOM"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После сравнения React знает:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какие компоненты должны обновиться;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какие DOM-узлы нужно перерисовать;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"какие оставить как есть."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Далее следует "},{"type":"text","marks":[{"type":"bold"}],"text":"commit phase"},{"type":"text","text":", где React:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"применяет эти минимальные изменения к реальному DOM;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📊 Иллюстрация процесса"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Состояние изменилось\n ↓\nКомпонент пересоздал Virtual DOM\n ↓\nReact сравнил старое и новое дерево (reconciliation)\n ↓\nНашёл изменённые узлы\n ↓\nПрименил только нужные изменения в DOM (commit phase)\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Пример"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function App() {\n const [count, setCount] = useState(0);\n return (\n

\n \n \n

\n );\n}\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Изменился "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":" → React вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"App()"},{"type":"text","text":" снова."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Создаётся новое Virtual DOM."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React сравнивает:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" — те же пропсы → "},{"type":"text","marks":[{"type":"bold"}],"text":"не обновляется"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — изменились пропсы → "},{"type":"text","marks":[{"type":"bold"}],"text":"обновляется"},{"type":"text","text":"."}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обновляется только текст внутри "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — "},{"type":"text","marks":[{"type":"bold"}],"text":"всё остальное остаётся нетронутым"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Итог"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React определяет, какие компоненты нужно обновить, с помощью "},{"type":"text","marks":[{"type":"bold"}],"text":"reconciliation algorithm"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"сравнивая "},{"type":"text","marks":[{"type":"bold"}],"text":"новое и старое Virtual DOM-дерево"},{"type":"text","text":" и анализируя "},{"type":"text","marks":[{"type":"bold"}],"text":"тип, ключ, props и state"},{"type":"text","text":"."}]}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что изменилось"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React обновит?"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Почему"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":" внутри компонента"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Да"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"компонент пересоздаётся"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"props"},{"type":"text","text":" от родителя"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Да"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"новые значения пропсов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Родитель, но не props ребёнка"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚠️ Зависит"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"если не "},{"type":"text","marks":[{"type":"code"}],"text":"React.memo"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"context"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Да"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"новое значение контекста"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"key"},{"type":"text","text":" у элемента"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Да"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"создаётся новый элемент"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ничего не изменилось"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"diff не найден"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как React определяет, какие компоненты нужно обновить?

Комментарии