CRA项目安装million.js后blur事件失效问题咨询

1. useRef 能否解决 blur 事件失效问题？ #

可以作为临时 workaround，但不是最优解。你可以通过 useRef 获取目标DOM节点，在 useEffect 中手动绑定原生 blur 事件：

const inputRef = useRef(null);

useEffect(() => {
  const handleBlur = () => {
    // 你的blur逻辑
  };
  inputRef.current?.addEventListener('blur', handleBlur);
  return () => {
    inputRef.current?.removeEventListener('blur', handleBlur);
  };
}, []);

这种方式绕开了React合成事件系统，能避开million.js渲染优化对事件绑定的干扰，但会增加代码的手动维护成本，建议优先等待million.js修复兼容性问题。

2. million.js 下 blur 事件失效的原因 #

核心是million.js的性能优化逻辑与React原生事件系统存在冲突：

• million.js采用DOM复用、批量更新等激进渲染策略，可能跳过了React合成事件绑定的关键流程，导致onBlur事件未正确挂载到目标元素。
• 部分版本的million.js对非冒泡事件（如blur）的事件委托处理不完善，无法正确触发对应的React事件回调。
• CRA默认配置可能与million.js的编译逻辑存在兼容性问题，导致事件绑定代码被意外修改。

3. 代码优化方向（针对 UserInfo.tsx） #

• 减少无意义重渲染：用React.memo包裹组件，配合useCallback缓存事件处理函数、useMemo缓存计算后的用户信息数据，避免父组件更新时触发不必要的重渲染。
• 拆分组件粒度：将用户头像、信息表单、操作按钮组拆分为独立的小组件，每个组件只负责单一职责，提升代码复用性和维护性。
• 表单状态管理优化：如果组件包含表单输入，可引入react-hook-form等轻量表单库，替代手动维护多个输入框的state，简化表单逻辑。
• 样式优化：如果使用CSS Modules，提取重复的样式规则到公共样式文件；或者尝试CSS-in-JS方案（如styled-components），提升样式的组件隔离性。
• 添加错误边界：给组件套一层错误边界，避免单个组件的运行时错误导致整个应用崩溃。

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