{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"useRef"},{"type":"text","text":" с DOM"}]},{"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":"прямую ссылку на DOM-элемент"},{"type":"text","text":", отрендеренный компонентом."},{"type":"hardBreak"},{"type":"text","text":"Это аналог старого "},{"type":"text","marks":[{"type":"code"}],"text":"document.querySelector()"},{"type":"text","text":", но "},{"type":"text","marks":[{"type":"bold"}],"text":"реактивный и безопасный"},{"type":"text","text":" — React сам присвоит ссылку при монтировании."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Шаги использования "},{"type":"text","marks":[{"type":"code"}],"text":"useRef"},{"type":"text","text":" для доступа к DOM"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1️⃣ Импортируй хук"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useRef, useEffect } from \"react\";\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2️⃣ Создай ref внутри компонента"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const inputRef = useRef(null);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Здесь "},{"type":"text","marks":[{"type":"code"}],"text":"inputRef.current"},{"type":"text","text":" изначально будет "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"но после рендера React автоматически заполнит его ссылкой на реальный DOM-элемент."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3️⃣ Передай ref в JSX"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4️⃣ Используй "},{"type":"text","marks":[{"type":"code"}],"text":".current"},{"type":"text","text":" после монтирования"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"(например, в "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":", чтобы элемент уже существовал в DOM)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"useEffect(() => {\n inputRef.current.focus(); // даёт фокус на input\n}, []);\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ Полный пример"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useRef, useEffect } from \"react\";\n\nfunction InputFocusExample() {\n const inputRef = useRef(null);\n\n useEffect(() => {\n // Когда компонент смонтировался — input уже есть в DOM\n inputRef.current.focus();\n }, []);\n\n return (\n

\n \n \n

\n );\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":""},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Привязывает его к "},{"type":"text","marks":[{"type":"code"}],"text":"inputRef.current"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После рендера ("},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":") ты можешь использовать любые методы DOM:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".focus()"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".scrollIntoView()"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".select()"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":".play()"},{"type":"text","text":" (для видео/аудио)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"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 ScrollToBottom() {\n const endRef = useRef(null);\n\n const scrollToBottom = () => {\n endRef.current.scrollIntoView({ behavior: \"smooth\" });\n };\n\n return (\n

Содержимое...

👇 Конец списка

\n \n

\n );\n}\n"}]},{"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","marks":[{"type":"code"}],"text":"ref.current"},{"type":"text","text":" изначально "},{"type":"text","marks":[{"type":"code"}],"text":"null"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"потому что DOM ещё не создан до первого рендера"}]}]}]},{"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":"text","marks":[{"type":"code"}],"text":"useEffect"}]}]}]},{"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":"React не следит за ним"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"ref можно передавать в любой JSX-элемент или кастомный компонент с "},{"type":"text","marks":[{"type":"code"}],"text":"forwardRef"}]}]},{"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":"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":"text","text":" с DOM"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Даёт ссылку на реальный DOM-элемент после рендера"}]}]}]},{"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":"const elRef = useRef(null)"},{"type":"text","text":" → передать "},{"type":"text","marks":[{"type":"code"}],"text":"ref={elRef}"},{"type":"text","text":" → обращаться "},{"type":"text","marks":[{"type":"code"}],"text":"elRef.current"}]}]}]},{"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":"useEffect"},{"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":"Фокус, прокрутка, изменение размеров, вызов методов DOM"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

useRef для доступа к DOM elem

Комментарии