{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 1. Что делает "},{"type":"text","marks":[{"type":"code"}],"text":"useRef"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"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":"hardBreak"},{"type":"text","text":"который React сохраняет между рендерами."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тип сигнатуры:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function useRef(initialValue: T): MutableRefObject;\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ 2. Базовая типизация"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const countRef = useRef(0);\n\ncountRef.current++; // ✅ current — число\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"TypeScript знает, что "},{"type":"text","marks":[{"type":"code"}],"text":"countRef.current"},{"type":"text","text":" — "},{"type":"text","marks":[{"type":"code"}],"text":"number"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Если передаёшь начальное значение, TS выведет тип автоматически:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const flagRef = useRef(false); // inferred: MutableRefObject\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 3. Если изначально "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":" (DOM или lazy-ссылки)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" изначально "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":" — обязательно указываем тип явно:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// Ссылка на DOM-элемент\nconst inputRef = useRef(null);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Здесь "},{"type":"text","marks":[{"type":"code"}],"text":"current"},{"type":"text","text":" может быть "},{"type":"text","marks":[{"type":"code"}],"text":"null"},{"type":"text","text":" до монтирования."},{"type":"hardBreak"},{"type":"text","text":"При использовании:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"inputRef.current?.focus();\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":"null"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 4. Передача "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" в элемент"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"export function Form() {\n const inputRef = useRef(null);\n\n return ;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"TypeScript сам знает, что "},{"type":"text","marks":[{"type":"code"}],"text":"inputRef.current"},{"type":"text","text":" — "},{"type":"text","marks":[{"type":"code"}],"text":"HTMLInputElement | null"},{"type":"text","text":"."}]},{"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","marks":[{"type":"code"}],"text":"HTMLDivElement"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"HTMLButtonElement"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"HTMLFormElement"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"HTMLTextAreaElement"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"HTMLAnchorElement"},{"type":"hardBreak"},{"type":"text","text":"и т.д."}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚡ 5. Если нужно только хранить значение (а не DOM)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const intervalId = useRef(null);\n\nuseEffect(() => {\n intervalId.current = window.setInterval(() => console.log('tick'), 1000);\n return () => clearInterval(intervalId.current!);\n}, []);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Полезно для хранения mutable переменных без ререндера."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔀 6. Пример с "},{"type":"text","marks":[{"type":"code"}],"text":"forwardRef"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"type InputProps = React.ComponentProps<\"input\">;\n\nconst Input = React.forwardRef((props, ref) => {\n return ;\n});\n\n// Использование\nconst inputRef = useRef(null);\n\n;\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"forwardRef"},{"type":"text","text":" принимает два параметра типов:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"React.forwardRef<Тип_элемента, Тип_пропсов>()\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 7. Когда нужен "},{"type":"text","marks":[{"type":"code"}],"text":"useRef(null)"},{"type":"text","text":" vs "},{"type":"text","marks":[{"type":"code"}],"text":"useRef(...)"}]},{"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":"DOM-элемент (монтируется позже)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"`useRef(значение)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Lazy-инициализация"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"`useRef"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const divRef: React.RefObject = useRef(null);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"RefObject"},{"type":"text","text":" = "},{"type":"text","marks":[{"type":"code"}],"text":"{ readonly current: T | null }"}]},{"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":"🧮 9. Пример: клик вне элемента"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Dropdown() {\n const menuRef = useRef(null);\n\n useEffect(() => {\n function handleClick(e: MouseEvent) {\n if (!menuRef.current?.contains(e.target as Node)) {\n console.log(\"Clicked outside\");\n }\n }\n document.addEventListener(\"click\", handleClick);\n return () => document.removeEventListener(\"click\", handleClick);\n }, []);\n\n return

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ "},{"type":"text","marks":[{"type":"code"}],"text":"menuRef.current"},{"type":"text","text":" типизирован корректно."},{"type":"hardBreak"},{"type":"text","text":"✅ "},{"type":"text","marks":[{"type":"code"}],"text":"contains()"},{"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":"Простой ref-переменной"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useRef(0)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"DOM ref"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"`useRef"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","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":"text","marks":[{"type":"code"}],"text":"forwardRef"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"React.forwardRef()"}]}]}]}]},{"type":"horizontalRule"},{"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":"| null"},{"type":"text","text":", если "},{"type":"text","marks":[{"type":"code"}],"text":"ref"},{"type":"text","text":" на DOM."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не пиши "},{"type":"text","marks":[{"type":"code"}],"text":"any"},{"type":"text","text":". Используй точный тип элемента ("},{"type":"text","marks":[{"type":"code"}],"text":"HTMLDivElement"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"HTMLInputElement"},{"type":"text","text":" и т.д.)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для хранения “mutable” данных без ререндера — "},{"type":"text","marks":[{"type":"code"}],"text":"useRef()"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для ссылок между компонентами — "},{"type":"text","marks":[{"type":"code"}],"text":"forwardRef()"},{"type":"text","text":" с generic."}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как типизировать useRef()?

Комментарии