如何在媒体查询上停止 React 渲染

Question

我有现有的 CSS（因此，我应该考虑它），其中包括是否显示元素的媒体查询。 CSS 按预期工作，但问题是 React 仍然会重新渲染和重新构建 DOM，即使媒体查询导致元素无论如何都不会重新渲染。

有没有办法告诉 react 不渲染？有没有办法在 React 中检测媒体查询，然后如果媒体查询拒绝，则不渲染？

Answer 1

您可以使用matchMedia 并从shouldComponentUpdate 返回false

根据您的用例，类似于以下内容

shouldComponentUpdate(nextProps) {
    return window.matchMedia('(min-width: 768px)').matches
}