javascript - 我在 React 中实现响应式的做法好吗？

Question

我只需要一些关于我正在做什么的建议来创建一个使用 react 组件的响应式页面就可以了。

我使用 window.matchmedia 来匹配媒体查询，并在每次设置或更改窗口大小时重新渲染。

function reportWindowSize() {
  let isPhone = window.matchMedia("(max-width: 999px)");

  if (isPhone.matches) {
    ReactDOM.render(
      <React.Fragment>
        <Vodplayer isPhone="true" />
        <Feedback isPhone="true" />
        <HighlightsDropdown isPhone="true"> </HighlightsDropdown>
        <Viewcount isPhone="true"></Viewcount>
        <Carousel isPhone="true" />
        <Ruler isPhone="true" />
      </React.Fragment>,
      document.getElementById("small-container-id")
    );
  } else {
    ReactDOM.render(
      <React.Fragment>
        <Vodplayer isPhone="false" />
        <Highlights isPhone="false" />
        <Viewcount isPhone="false"></Viewcount>
        <Carousel isPhone="false" />
        <Feedback isPhone="false" />
        <Ruler isPhone="false" />
      </React.Fragment>,
      document.getElementById("small-container-id")
    );
  }
}

window.onresize = reportWindowSize;
window.onload = reportWindowSize;

我的事情是我想在 999px 处更改组件，也许将来在更多断点处更改。但是如果我将网页宽度更改 500px，这样 React 就会渲染 500 次。这不是效率很低吗？我尝试使用去抖，但这样我就可以看到组件添加和删除，甚至延迟 100 毫秒，这看起来不太漂亮。我还有什么其他方法可以实现这一目标？

提前致谢。

Answer 1

通常，您可以单独使用 CSS 进行响应式调整。当您确实需要 JS 进行更改时，您可能希望以一种不会完全让您的代码库充满噪音的方式进行更改。

您可以使用一个简单的钩子(Hook)，例如 this one that is part of Material UI ，仅监听需要此信息的组件内部的更改。

此外，就其值(value)而言，您在条件的两个分支中都将真值传递给 isPhone (!!"false"//is true)。