{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"useRef()"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хук "},{"type":"text","marks":[{"type":"code"}],"text":"useRef()"},{"type":"text","text":" создаёт "},{"type":"text","marks":[{"type":"bold"}],"text":"объект-ссылку"},{"type":"text","text":", который React сохраняет "},{"type":"text","marks":[{"type":"bold"}],"text":"между рендерами"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Этот объект выглядит так:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{ current: <значение> }\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"То есть "},{"type":"text","marks":[{"type":"code"}],"text":"useRef"},{"type":"text","text":" возвращает "},{"type":"text","marks":[{"type":"bold"}],"text":"контейнер"},{"type":"text","text":", у которого есть одно свойство — "},{"type":"text","marks":[{"type":"code"}],"text":".current"},{"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":"const ref = useRef(initialValue);\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"initialValue"},{"type":"text","text":" — начальное значение (может быть "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":", число, объект и т.д.)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Возвращает объект "},{"type":"text","marks":[{"type":"code"}],"text":"{ current: initialValue }"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При изменении "},{"type":"text","marks":[{"type":"code"}],"text":"ref.current"},{"type":"text","text":" компонент "},{"type":"text","marks":[{"type":"bold"}],"text":"не перерисовывается"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Основные сценарии использования"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1️⃣ Доступ к DOM-элементам"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useRef, useEffect } from \"react\";\n\nfunction InputFocus() {\n const inputRef = useRef(null);\n\n useEffect(() => {\n inputRef.current.focus(); // фокус на элементе при монтировании\n }, []);\n\n return ;\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":"inputRef.current"},{"type":"text","text":" указывает на сам DOM-элемент "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно вызывать методы DOM: "},{"type":"text","marks":[{"type":"code"}],"text":".focus()"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":".scrollIntoView()"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":".play()"},{"type":"text","text":", и т.д."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2️⃣ Хранение значения между рендерами (без состояния)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Timer() {\n const renderCount = useRef(0);\n\n renderCount.current++;\n\n console.log(\"Компонент перерендерился\", renderCount.current, \"раз\");\n\n return

Рендеров: {renderCount.current}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧱 В отличие от "},{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":", изменение "},{"type":"text","marks":[{"type":"code"}],"text":"ref.current"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"не вызывает новый рендер"},{"type":"text","text":", поэтому удобно хранить служебные данные, таймеры, предыдущие значения и т.д."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3️⃣ Хранение предыдущего значения"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Example({ value }) {\n const prevValue = useRef();\n\n useEffect(() => {\n prevValue.current = value; // сохраняем предыдущее значение\n });\n\n return (\n

\n Сейчас: {value}, раньше было: {prevValue.current}\n

\n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 Так можно отслеживать изменения значений без состояния."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4️⃣ Хранение таймеров и внешних идентификаторов"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Countdown() {\n const timerId = useRef(null);\n\n const start = () => {\n timerId.current = setInterval(() => console.log(\"tick\"), 1000);\n };\n\n const stop = () => {\n clearInterval(timerId.current);\n };\n\n return (\n <>\n \n \n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Таймер хранится в "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":", и при каждом рендере ссылка остаётся та же — не теряется."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚖️ Разница между "},{"type":"text","marks":[{"type":"code"}],"text":"useRef"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"useState"}]},{"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","marks":[{"type":"code"}],"text":"useState"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useRef"}]}]}]},{"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":"❌ Нет"}]}]}]},{"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":"✅ Да"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Используется для хранения DOM-элемента"}]}]},{"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":"Удобен для данных, влияющих на UI"}]}]},{"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":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚠️ Важно помнить"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useRef"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"не уведомляет React"},{"type":"text","text":" об изменениях — если ты хочешь, чтобы что-то обновилось в UI, используй "},{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"ref.current"},{"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":"ref"},{"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":"useRef()"}]}]},{"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":"text","marks":[{"type":"code"}],"text":"{ current: initialValue }"}]}]}]},{"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":"Для доступа к DOM, хранения предыдущих значений, таймеров и mutable-данных"}]}]}]},{"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":"ref.current"},{"type":"text","text":" происходит рендер?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что делает useRef()?

Комментарии