React中能否直接使用document对象进行DOM操作？

结论 #

技术上你写的这段代码跑起来确实能实现点击新增元素的效果，但在React项目里绝对不推荐这么写，属于典型的埋雷写法。

为什么不推荐这么写 #

• 你手动调用原生API插入的DOM节点，完全不在React的虚拟DOM管控范围内。React的核心渲染逻辑是「状态变化→对比新旧虚拟DOM差异→把差异更新到真实DOM」，后续只要这个App组件触发重渲染——比如组件内新增了状态、父组件重渲染带动子组件重渲，React会按照自己记录的虚拟DOM结构重建子节点，你手动插进去的那些显示Hi!的div会被直接抹掉，功能直接异常。
• 硬编码document.getElementById("app")查找节点的逻辑非常脆弱：如果后续你改了根节点的id属性、或者同一个页面里多次复用这个App组件，这段代码要么找不到节点抛错，要么把元素插到错误的位置。

标准实现方式 #

在React里做这类动态渲染需求，永远遵循「状态驱动视图」的原则，不要手动操作React管控范围内的DOM结构：

import { useState } from 'react';

function App() {
  const [itemList, setItemList] = useState([]);

  const handleClick = () => {
    // 只需要更新状态，真实DOM的增删改全部交给React处理
    setItemList(prevList => [...prevList, "Hi!"]);
  }

  return (
    <div id="app">
      <button onClick={handleClick}>Click here</button>
      {/* 遍历状态渲染对应元素 */}
      {itemList.map((text, idx) => (
        <div key={idx}>{text}</div>
      ))}
    </div>
  )
}

如果遇到必须操作真实DOM的场景（比如输入框聚焦、接入不依赖React的第三方DOM库），也应该用React官方提供的useRef钩子获取DOM节点引用，不要直接全局查DOM、手动改动DOM结构，避免和React的渲染流程冲突。

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