JSX中添加脚本致页面加载卡顿问题排查与正确实现

卡顿原因 #

核心问题出在你使用的document.write上。React基于虚拟DOM管理页面渲染，而document.write会直接绕过虚拟DOM操作真实DOM——当页面加载完成后调用它，甚至会清空当前文档并重新写入内容，这会触发浏览器频繁的重排重绘，直接导致页面卡顿、无限加载。另外，在JSX里嵌入script标签执行DOM操作逻辑，本身就不符合React的组件渲染规范，完全没必要这么做。

错误代码示例（还原你的场景） #

function GetComments({ commentsArray }) {
  return commentsArray.map(comment => (
    <div key={comment.id} className="comment">
      {/* 此处的script标签是问题核心 */}
      <script>
        {`
          if(${comment.ParentCommentId}) {
            document.write('<span class="reply-tag">回复</span>');
          }
        `}
      </script>
      <p>{comment.content}</p>
    </div>
  ));
}

正确的JSX实现方式 #

直接用React的条件渲染替代script和document.write，完全在虚拟DOM的规则内处理逻辑：

function GetComments({ commentsArray }) {
  return commentsArray.map(comment => (
    <div key={comment.id} className="comment">
      {/* 条件渲染回复标识，无需任何脚本 */}
      {comment.ParentCommentId !== null && (
        <span className="reply-tag">回复</span>
      )}
      <p>{comment.content}</p>
    </div>
  ));
}

关键注意事项 #

• 永远不要在React/JSX里用document.write操作DOM，React提供的JSX语法、状态管理已经完全覆盖DOM操作需求，直接操作真实DOM会破坏React的渲染流程，引发各种异常。
• JSX里的script标签仅适合加载外部脚本（比如第三方SDK），绝对不要用来执行DOM操作逻辑，这类逻辑应该直接用JSX的条件渲染、循环渲染实现。
• 列表渲染时必须给每个项加上唯一的key属性，这是React的必要规范，能提升渲染性能，避免不必要的重渲染。

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