基于屏幕尺寸修改HTML/JSX：方案性能与最佳实践探讨

我希望根据屏幕尺寸修改<p>标签的文本内容，目前想到两种实现方式：

方案1：CSS媒体查询控制 #

编写如下结构的HTML/JSX：

<p> 
  <span className="one">text one</span>
  <span className="two">text two</span> 
</p>

再通过CSS媒体查询控制显示：

@media (max-width: 481px) {
  .one {
    display: none;
  }
  .two {
    display: inline;
  }
}

方案2：React JS逻辑实现 #

let innerText;

React.useEffect(() => {
  if (window.innerWidth <= 481) {
    innerText = 'text one';
  } else {
    innerText = 'text two';
  }
}, [window.innerWidth]);

return (
  <p>{innerText}</p>
);

请问这两种方案哪种性能更优？哪种是通用最佳实践？是否有更推荐的其他实现方式？我担忧React方案会因屏幕尺寸变化触发大量重渲染，同时也顾虑CSS方案会渲染多余的span节点。

性能对比 #

• CSS方案性能更优：浏览器对CSS媒体查询的处理属于原生渲染层优化路径，不会触发JavaScript执行或React组件重渲染。而你当前的React方案存在明显问题：一是window.innerWidth作为依赖会导致窗口resize时频繁触发useEffect，二是直接修改innerText变量不会触发组件更新（即便改成useState，每次resize也会触发重渲染），性能开销远大于CSS方案。
• 关于“多余span节点”的顾虑：display: none的元素不会参与布局计算，对性能的影响微乎其微，远小于JS频繁触发重渲染的损耗。

通用最佳实践 #

优先选择CSS媒体查询方案，原因如下：

1. 符合“样式逻辑交给CSS，交互/业务逻辑交给JS”的职责分离原则，代码结构更清晰。
2. 无需手动监听resize事件，避免了JS层面的性能损耗和内存泄漏风险（比如忘记移除监听）。
3. 原生支持，兼容性更好，不需要考虑React生命周期或状态更新的复杂逻辑。

更推荐的其他实现方式 #

如果既不想保留多余DOM节点，又想避免JS频繁重渲染，可以尝试以下两种方式：

1. React结合matchMediaAPI：
   利用浏览器原生的matchMedia监听媒体查询状态变化，仅在查询结果切换时更新状态，避免每次resize都触发重渲染：

   const [isMobile, setIsMobile] = React.useState(window.matchMedia('(max-width: 481px)').matches);
   
   React.useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 481px)');
     const handleChange = (e) => setIsMobile(e.matches);
     mediaQuery.addEventListener('change', handleChange);
     return () => mediaQuery.removeEventListener('change', handleChange);
   }, []);
   
   return <p>{isMobile ? 'text two' : 'text one'}</p>;
   

   这种方式只会在屏幕尺寸跨临界值（比如从大于481px变到小于，或反之）时触发一次重渲染，同时DOM中只有一个<p>标签，无多余节点。

2. 纯CSS变量方案：
   如果文本内容固定，不需要动态生成，可以用CSS变量直接控制文本，连span都不需要：

   p {
     --text: 'text one';
   }
   @media (max-width: 481px) {
     p {
       --text: 'text two';
     }
   }
   p::before {
     content: var(--text);
   }
   

   对应的HTML只需<p></p>，完全没有多余DOM节点，性能最优，但缺点是文本内容写在CSS中，不适合需要动态生成文本的场景。

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