Javascript （语义和反应）根据屏幕大小更改HTML元素的最佳方法？

例如，假设我想在显示大小低于600px宽度时删除图像。最干净、最快、最可维护的方法是什么

jQuery免费

jQuery是一个DOM操作库。它读写数据
多姆。React使用虚拟DOM（真实对象的JavaScript表示形式）
DOM）。React只向DOM写入补丁更新，但从不从中读取
它

保持真正的DOM操作与React的同步是不可行的
虚拟DOM。正因为如此，所有jQuery功能都得到了改进
在React中重新实现


$（窗口）。调整大小（函数（）{
如果（window.innerWidth<600）{//某个任意移动宽度
$（“.image img”）.attr（“src”，即“）；
}否则{
$（“.image img”）.attr（“src”，”http://placehold.it/256x256");
}
});



目录


render（）{
让content=this.state.width<600？：；
返回(
{content}
)
使用媒体查询并附加到您的类

HTML:

如果您的GUI在这两个版本之间发生了显著变化，那么在适当的情况下，维护两组组件可能是值得的。然后，您可以这样呈现它们：

render() {
    // don't create the component here with <>, just choose which one to use
    let TheComponent = this.state.width < 600 ? MobileComponent : DesktopComponent;

    return (
        <div>
            <TheComponent prop1=... />
            ...
        </div>
    );
}

render（）{
//不要在此处使用创建组件，只需选择要使用的组件即可
让组件=this.state.width<600？移动组件：桌面组件；
返回(
...
);
}

优点是，您不需要创建不需要的DOM节点，因此与仅使用CSS的解决方案相比，性能可能更好。而且，有时更容易重新安排。缺点显然是需要更多的代码。
如果宽度低于给定的va，CSS媒体查询可以对图像应用无显示肯定是CSS和一个类名系统，当屏幕宽度（或高度，尽管在我的经验中宽度更重要）低于（或高于）某个阈值时，允许元素被识别为隐藏。
<div class="ui container desktop only grid">
  Contents
</div> 

  render() {
    let content = this.state.width < 600 ? <MobileComponent/> : <DesktopComponent />;
    return(<div>
        <div>{content}</div>
        <childComponent myWidth= {this.state.width}></childComponent >
        <childComponent2 myWidth= {this.state.width}></childComponent2 >
   </div>
  )

 <div class="image hideOnSmallScreen">
              <img src="http://placehold.it/256x256">
          </div> 

.image {
   display:block;
}

/* Small screens */
@media all and (max-width: 700px) {
   .image.hideOnSmallScreen {
      display:none;
   }
}

render() {
    // don't create the component here with <>, just choose which one to use
    let TheComponent = this.state.width < 600 ? MobileComponent : DesktopComponent;

    return (
        <div>
            <TheComponent prop1=... />
            ...
        </div>
    );
}