React中直接访问document对象是否为不良实践？条码扫描场景咨询

咱先把这事掰扯清楚：不能一竿子打死说直接访问document就是不良实践，得看具体场景——你用外部条码扫描器的需求，其实就是非常合理的使用场景。

为什么大家通常不建议直接碰document？ #

React的核心是虚拟DOM和声明式渲染，直接操作真实DOM（比如document.querySelector、document.getElementById）确实容易踩坑：

• 容易导致状态与DOM不同步：React通过状态来驱动UI更新，如果你手动改了DOM内容但没更新对应state，后续React重新渲染时会把你的手动修改覆盖，或者出现逻辑混乱。
• 降低组件的可复用性和可测试性：依赖全局document的组件，放到隔离环境（比如单元测试）或者iframe里可能直接失效，复用起来也麻烦。
• 违背React的设计理念：React希望你通过“描述UI应该是什么样”来更新界面，而不是命令式地直接操作DOM。

但你的条码扫描场景是例外！ #

条码扫描器本质是模拟全局键盘输入，而且你不需要跟踪当前聚焦的字段，这时候监听document上的键盘事件是最直接有效的方案——毕竟扫描器的输入不属于某个特定组件的范围，全局监听才合理。

给你个实用的示例代码，实现扫描数字后自动填充到指定字段，还能同步React状态：

import { useEffect, useRef, useState } from 'react';

// 封装一个条码扫描处理组件
function BarcodeScanner({ targetInputRef }) {
  useEffect(() => {
    let barcodeBuffer = '';
    let scanTimeout;

    const handleGlobalKeyDown = (e) => {
      // 只捕获数字键
      if (e.key >= '0' && e.key <= '9') {
        barcodeBuffer += e.key;
        // 扫描器输入速度快，用超时判断扫描结束（300ms无输入则认为完成）
        clearTimeout(scanTimeout);
        scanTimeout = setTimeout(() => {
          if (targetInputRef.current) {
            // 填充到目标输入框
            targetInputRef.current.value = barcodeBuffer;
            // 手动触发change事件，让React的onChange能捕获到变化，同步状态
            targetInputRef.current.dispatchEvent(new Event('change'));
          }
          barcodeBuffer = '';
        }, 300);
      }
    };

    // 给document绑定事件
    document.addEventListener('keydown', handleGlobalKeyDown);
    // 组件卸载时清理事件和超时
    return () => {
      document.removeEventListener('keydown', handleGlobalKeyDown);
      clearTimeout(scanTimeout);
    };
  }, [targetInputRef]);

  return null;
}

// 你的主组件
function App() {
  const barcodeInputRef = useRef(null);
  const [barcodeValue, setBarcodeValue] = useState('');

  return (
    <div>
      <input
        ref={barcodeInputRef}
        type="text"
        value={barcodeValue}
        onChange={(e) => setBarcodeValue(e.target.value)}
        placeholder="扫描条码自动填充"
      />
      {/* 挂载扫描处理组件 */}
      <BarcodeScanner targetInputRef={barcodeInputRef} />
    </div>
  );
}

优化小建议 #

上面的代码用了useRef来获取目标输入框的DOM节点，而不是直接用document.getElementById——这样更符合React的组件化思想，避免了全局DOM查询，组件的耦合性更低，后续测试或者复用也更方便。

总结 #

直接访问document不是绝对的“坏代码”，关键看场景。像条码扫描这种全局输入的需求，完全合理，但要尽量配合React的机制（比如手动触发change事件同步状态），或者用useRef替代全局DOM查询，让代码既满足需求，又符合React的风格。

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