React中autoFocus属性基本无效，因其仅是JSX提示且依赖DOM解析时触发，而React挂载发生在JS运行时；必须用useRef+useEffect手动聚焦，并注意可见性、iOS手势限制及焦点冲突。
React里写autoFocus属性基本没用
React的autoFocus（注意大小写）是JSX里模拟原生autofocus的写法，但它只是个“提示”，最终仍依赖浏览器在DOM解析时触发——而React组件挂载是JS运行时行为，DOM早已构建完毕。所以哪怕你写了<input autoFocus />，在useState切换、useEffect条件渲染、路由跳转后重新挂载等场景下，焦点大概率不会出现。
常见现象：document.activeElement始终是body；控制台无报错但光标不动；服务端渲染（SSR）后hydrate，客户端不聚焦。
用useRef + useEffect手动聚焦才可靠
必须确保元素已挂载、可见、未被禁用，且避开iOS Safari的手势限制。推荐写法：
const inputRef = useRef(null);
useEffect(() => {
const input = inputRef.current;
if (!input || document.activeElement === input) return;
// 检查可见性
const style = getComputedStyle(input);
if (style.display === 'none' || style.visibility === 'hidden') return;
// iOS Safari要求focus()在用户手势同步上下文中调用
// 所以模态框/弹窗打开若由按钮点击触发，应在该事件里调，而非useEffect
requestAnimationFrame(() => {
input.focus({ preventScroll: true });
});
}, []);
-
requestAnimationFrame比setTimeout(() => ..., 0)更稳妥，能避开CSS transition未结束或渲染未完成的时机 - 加
{ preventScroll: true }避免页面意外滚动 - 务必检查
document.activeElement === input，防止覆盖用户当前操作 - 若组件可能被
v-if（Vue）或{show && <Form>}（React）条件渲染，ref绑定前需确认DOM节点存在
多个焦点目标共存时容易踩坑
HTML规范只允许一个autofocus生效，但React里没人管这个——你可能在不同组件里都写了autoFocus，或服务端返回的HTML里已有autofocus，客户端JS又调了一次focus()，结果焦点来回跳、软键盘反复弹收。
立即学习“前端免费学习笔记（深入）”；
React Router Code Review
下载
审查 React Router 代码，确保数据加载、变更、错误处理和导航模式符合规范，适用于 React Router v6.4+ 代码、加载器及其他特性。
解决办法很简单：
- 删掉所有
autoFocusJSX属性和autofocusHTML属性 - 统一用JS控制，且只在一个明确入口点调用
focus() - 比如登录弹窗，就在
onOpen回调里聚焦，而不是在组件内部useEffect里盲目执行 - SPA路由跳转后想聚焦，监听
history的popstate或框架的afterEach钩子，别只靠组件挂载
iOS Safari上focus()必须绑定用户手势
这是最常被忽略的硬性限制：iOS Safari会静默忽略非用户手势触发的focus()，哪怕元素完全符合聚焦条件。
这意味着：
-
useEffect(() => ref.current?.focus(), [])在iOS上基本无效 - 模态框由
onClick打开，就必须把input.focus()写在那个onClick回调里，不能延迟到组件挂载后再执行 - 路由跳转若由
<Link>点击触发，可在Link的onClick中提前保存焦点意图，跳转后立即执行 - 没有用户手势？那就别强求自动聚焦——尤其表单非核心操作时，宁可让用户主动点一下
真正麻烦的不是怎么写代码，而是判断“此刻是否允许聚焦”：它取决于元素是否挂载、是否可见、是否可交互，以及当前执行上下文是否来自用户点击或触摸。漏掉任一环，focus()就变成无声的空操作。
