React组件componentDidUpdate条件逻辑疑问求解

你的判断是对的，现有逻辑确实遗漏了任务要求中的第二个条件——没有检查输入框当前是否处于聚焦状态。

问题所在 #

任务明确要求两个触发条件同时满足：

1. focused prop 从 false 变为 true
2. 输入框当前未聚焦

而现有代码只判断了第一个条件，也就是说，哪怕用户已经手动聚焦了输入框，只要父组件把focused从false改成true，代码就会再次调用focus()方法。虽然大多数浏览器对重复调用focus()的处理比较友好，不会有明显异常，但这不符合任务的明确要求，还可能引发一些潜在问题：

• 如果输入框绑定了onFocus回调，重复触发会导致回调多次执行
• 极端场景下可能触发不必要的DOM重绘或焦点切换逻辑

修正后的逻辑示例 #

假设你用类组件的ref获取输入框DOM元素，修正后的componentDidUpdate应该同时检查两个条件：

componentDidUpdate(prevProps) {
  // 同时满足props变化和输入框未聚焦两个条件
  if (!prevProps.focused && this.props.focused) {
    const inputElement = this.inputRef.current;
    // 检查当前焦点是否不在输入框上
    if (document.activeElement !== inputElement) {
      inputElement.focus();
    }
  }
}

如果是函数组件，用useEffect实现的逻辑类似：

useEffect(() => {
  if (focused) {
    const inputElement = inputRef.current;
    if (document.activeElement !== inputElement) {
      inputElement.focus();
    }
  }
}, [focused]);

额外说明 #

虽然重复调用focus()不会造成严重问题，但严格遵循任务要求的条件是更严谨的编码习惯，能避免潜在的边界问题，也让代码逻辑完全符合需求定义。

内容的提问来源于stack exchange，提问作者reactjs