{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Что такое "},{"type":"text","marks":[{"type":"code"}],"text":"props"},{"type":"text","text":" в React"}]},{"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":"text","marks":[{"type":"bold"}],"text":"передаётся компоненту от родителя"},{"type":"text","text":"."},{"type":"hardBreak"},{"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":"code"}],"text":"props"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"неизменяемые (immutable)"},{"type":"text","text":" данные."},{"type":"hardBreak"},{"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":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Greeting(props) {\n props.name = \"Аня\"; // ❌ пытаемся изменить props\n return

Привет, {props.name}

;\n}\n\nfunction App() {\n return ;\n}\n"}]},{"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":"React передаёт в компонент объект "},{"type":"text","marks":[{"type":"code"}],"text":"props = { name: \"Тим\" }"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ты меняешь "},{"type":"text","marks":[{"type":"code"}],"text":"props.name = \"Аня\""},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"не следит"},{"type":"text","text":" за этим объектом — у него своя копия данных;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При следующем рендере (например, если родитель обновится) React снова передаст "},{"type":"text","marks":[{"type":"code"}],"text":"props = { name: \"Тим\" }"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Изменение пропадает, UI “скачет”, и логика ломается."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Почему React не реагирует на изменение "},{"type":"text","marks":[{"type":"code"}],"text":"props"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"не “наблюдает” за мутациями объектов"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Он реагирует "},{"type":"text","marks":[{"type":"bold"}],"text":"только на обновление состояния (state)"},{"type":"text","text":" или на новые "},{"type":"text","marks":[{"type":"code"}],"text":"props"},{"type":"text","text":" от родителя."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты делаешь:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"props.name = \"Аня\";\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"— React "},{"type":"text","marks":[{"type":"bold"}],"text":"не видит"},{"type":"text","text":", что произошло изменение,"},{"type":"hardBreak"},{"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":"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":"Что произойдёт"}]}]}]},{"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":"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":"React просто перезапишет "},{"type":"text","marks":[{"type":"code"}],"text":"props"}]}]}]},{"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":"UI не обновляется, хотя “кажется, что должен”"}]}]}]},{"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":"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":"React перестаёт быть детерминированным"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Как правильно (через state)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если тебе нужно изменить что-то на основе "},{"type":"text","marks":[{"type":"code"}],"text":"props"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"создай "},{"type":"text","marks":[{"type":"bold"}],"text":"копию во внутреннем состоянии"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Greeting({ name }) {\n const [userName, setUserName] = useState(name);\n\n return (\n <>\n

Привет, {userName}!

\n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Здесь всё корректно:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"props.name"},{"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":", который React отслеживает;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"при обновлении "},{"type":"text","marks":[{"type":"code"}],"text":"setUserName()"},{"type":"text","text":" React автоматически "},{"type":"text","marks":[{"type":"bold"}],"text":"перерисует UI"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Пример наглядного бага (если изменить props)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Counter(props) {\n props.count++; // ❌ изменение props\n return

Счётчик: {props.count}

;\n}\n\nfunction App() {\n const [count, setCount] = useState(0);\n return (\n <>\n \n \n \n );\n}\n"}]},{"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":"Counter"},{"type":"text","text":" каждый раз будет увеличивать "},{"type":"text","marks":[{"type":"code"}],"text":"props.count"},{"type":"text","text":" локально;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Но при следующем рендере React снова передаст "},{"type":"text","marks":[{"type":"bold"}],"text":"новый объект"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"code"}],"text":"{ count }"},{"type":"text","text":" из "},{"type":"text","marks":[{"type":"code"}],"text":"App"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"И все изменения в "},{"type":"text","marks":[{"type":"code"}],"text":"Counter"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"пропадут"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"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":"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":"Ответ"}]}]}]},{"type":"tableRow","content":[{"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":"props"},{"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":"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":"React не заметит, рендер не обновится, данные “потеряются”"}]}]}]},{"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":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"setState"}]}]}]},{"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":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💬 "},{"type":"text","marks":[{"type":"bold"}],"text":"Главная мысль:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В React "},{"type":"text","marks":[{"type":"code"}],"text":"props"},{"type":"text","text":" — это как "},{"type":"text","marks":[{"type":"bold"}],"text":"аргументы функции"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Менять их внутри компонента — всё равно что переписывать входные параметры функции:"},{"type":"hardBreak"},{"type":"text","text":"технически можно, но это "},{"type":"text","marks":[{"type":"bold"}],"text":"бессмысленно и вредно"},{"type":"text","text":"."}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что произойдёт, если изменить props напрямую?

Комментарии