为啥使用ref给input标签使用focus方法不生效，使用id选择器就可以

当你尝试通过`ref`属性给输入框(`<input>`)调用`focus()`方法时，有时可能会遇到失效的情况，原因主要有两个：

1. **延迟渲染**：React等库在初始化时并不立即把所有DOM元素插入到真实的DOM树中，而是等到它们首次挂载（mounted）时才执行。如果你在组件刚创建时就尝试通过`ref`获取并聚焦输入框，可能还没来得及将`ref`关联的实际DOM节点绑定。在这种情况下，你可以使用`useEffect`钩子在组件挂载后自动聚焦。

function MyComponent() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} />;
}

2. **事件循环**：另一个可能的原因是，`focus`方法是在浏览器的主事件循环之外执行的，而`ref`提供的回调是同步执行的。你可以考虑使用自定义函数或者`focus.defer()`来确保`focus`操作在下次事件循环中被执行。

function focusWhenReady(ref) {
  setTimeout(() => {
    ref.current && ref.current.focus();
  }, 0);
}

<input ref={focusWhenReady} />

相比之下，使用ID选择器可以直接定位到DOM元素，因为它会立即访问到文档中的对应节点，所以可以立即工作。但是，尽量避免在生产环境中依赖ID，因为ID应该是唯一的，若多次使用相同的ID，可能会引发意外的行为。