在React中直接操作DOM是否为最佳实践？会引发哪些问题？

ReactDOM.render() 可以将HTML或组件挂载到DOM中，类似原生DOM的节点追加操作。我写了一段代码，先通过div.render渲染组件，再用原生DOM API获取并删除节点：

function Component(){
  return(
     <h1 id="delete">"Hello World"</h1>
  );
}
div.render(<Component/>);

const h1 = document.getElementById("delete");
div.removeChild(h1)

想问问这种直接操作DOM的方式在React里是不是良好实践？如果不是的话，会带来哪些问题？

这种直接操刀DOM的方式在React里绝对不是什么好习惯，主要会引发这些问题：

• React状态与DOM脱节：React核心是靠状态（state）和属性（props）驱动视图渲染的，你手动删掉DOM节点后，React内部的虚拟DOM还认为这个节点存在。后续如果组件因为状态更新重新渲染，React会把你删掉的节点再次渲染出来，导致视图和你的预期完全不一致。

• 破坏组件生命周期逻辑：组件的挂载、更新、卸载都有对应的生命周期钩子（类组件）或副作用清理逻辑（函数组件的useEffect）。手动操作DOM绕开了这些流程，比如你直接删节点，组件的卸载清理逻辑不会执行，很可能导致内存泄漏——比如订阅的事件没取消、定时器没清除。

• 代码可维护性崩盘：React的设计思路是让视图和状态一一对应，所有DOM变化都通过状态驱动完成。直接操作DOM的代码散落在业务逻辑里，其他开发者接手时根本没法追踪视图变化的原因，排查问题会变得异常麻烦。

• 性能拉胯：React的虚拟DOM靠diff算法来最小化真实DOM操作，手动操作DOM相当于跳过了这个优化机制。频繁的原生DOM操作，性能远不如React的批量更新策略。

正确的做法应该是通过状态控制组件的显示隐藏，比如：

import { useState } from 'react';

function Component(){
  const [showHeading, setShowHeading] = useState(true);

  // 用状态控制是否渲染标题
  return(
    showHeading ? <h1>"Hello World"</h1> : null
  );
}

// 需要隐藏时，直接更新状态就行
// setShowHeading(false);

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