React处理DOM元素最佳实践：使用原生JavaScript DOM操作是否为良好实践？

核心结论 #

绝大多数场景下，直接调用原生DOM API执行操作都不是值得推荐的做法，属于违反React设计理念的反模式。

你给出的示例代码就是典型的不当使用原生DOM API的场景，存在两个明显的问题：

1. 直接使用document.getElementById获取节点，没有考虑组件挂载时序：组件首次执行渲染逻辑时，对应DOM节点还没有挂载到文档中，大概率会拿到null值，后续调用相关属性方法会直接引发报错
2. 直接将DOM节点存入React状态，违背了React状态用来存储可序列化业务数据的设计原则，会导致后续出现不可预期的渲染异常。

不推荐直接操作原生DOM的原因 #

• 易导致状态与视图不同步：React的核心设计是声明式渲染，通过状态变更驱动视图更新，内部通过虚拟DOM维护视图快照。手动修改真实DOM后React无法感知，下次状态触发重渲染时，手动修改的内容会被覆盖，或是出现逻辑冲突
• 可维护性大幅下降：业务逻辑散落在React声明式逻辑和手动DOM操作中，后续排查问题、迭代功能的成本会显著升高
• 易出现时序错误：原生DOM获取、修改操作对节点挂载状态有强依赖，组件未挂载、已卸载阶段执行DOM操作会引发报错或是内存泄漏
• 破坏React内置优化：React的虚拟DOM Diff、批量更新等性能优化机制都基于自身维护的DOM快照，手动操作DOM会让这些优化失效，甚至反而导致性能劣化

正确的替代方案 #

如果确实需要操作DOM（比如输入框聚焦、测量节点尺寸、对接非React编写的第三方DOM库等场景），请使用React官方提供的ref相关API，而非原生DOM选择方法。

对应你的需求修正后的代码示例如下：

import React, { useState, useRef } from "react"

function Form() {
  const [name, setName] = useState("")
  // 用useRef绑定DOM节点
  const nameInputRef = useRef(null)

  function addName() {
    // 从ref中安全获取DOM节点属性
    if (nameInputRef.current) {
      setName(nameInputRef.current.value)
    }
  }

  return (
    <div>
      <input ref={nameInputRef} id="name" />
      <button onClick={addName}>提交</button>
      <p>当前输入的名称：{name}</p>
    </div>
  )
}

仅当ref无法覆盖的特殊场景下，才可以谨慎使用原生DOM API，同时必须做好生命周期管控，避免出现内存泄漏、时序错误等问题。

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