如何在媒體查詢中停止React渲染

Question

我有現有的CSS（因此，我應該考慮它），其中包括媒體查詢是否顯示元素。 CSS可以按預期工作，但問題在於即使媒體查詢導致元素無法重新呈現，React仍會重新呈現並重新構建DOM。

有什麼辦法可以告訴反應不要渲染？有沒有辦法檢測React中的媒體查詢，然後在媒體查詢說不？

Answer 1

你可以使用matchMedia和shouldComponentUpdate

東西返回false等，這取決於你的用例

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