Reagire alla manipolazione DOM e CSS per i breakpoint reattivi?

Specificamente per ReactJS e framework responsive che mostra / nascondi elementi basati su larghezza come Bootstrap.

Poiché ReactJS ha un DOM virtuale, presumo che la manipolazione del DOM sia più veloce e alla fine un po 'più facile eseguire il debug perché non stai cercando di pensare quali parti sono display:none e ci sono meno elementi per il debug. È stato anche più facile per me pensare in questo modo a causa del mio background di programmazione piuttosto che del CSS.

Non ho ancora affrontato troppi test delle prestazioni su ReactJS (sono alcuni capitoli in giù) ma ciò che è meglio da un punto di vista ingegneristico.

Il codice sembra così ...

constructor(props) {
    super(props)
    this.updateStatesBasedOnWindowSize =
      this.updateStatesBasedOnWindowSize.bind(this)
    this.state = {
        smallDeviceNavigation: false,
        sideNavVisible: false,
    }
}
componentWillMount() {
    this.updateStatesBasedOnWindowSize()
}
componentDidMount() {
    window.addEventListener("resize", this.updateStatesBasedOnWindowSize)
}
componentWillUnmount() {
    window.removeEventListener("resize", this.updateStatesBasedOnWindowSize)
}

/**
 * This will trigger a state change based on the device size.
 */
updateStatesBasedOnWindowSize() {

    const w = window,
        d = document,
        documentElement = d.documentElement,
        body = d.getElementsByTagName('body')[0],
        width = w.innerWidth || 
                documentElement.clientWidth || body.clientWidth

    if (width >= 576) {
        if (this.state.smallDeviceNavigation) {
            this.setState({ smallDeviceNavigation: false })
        }
        if (!this.state.sideNavVisible) {
            this.setState({ sideNavVisible: true })
        }
    } else {
        if (!this.state.smallDeviceNavigation) {
            // Force hide the side 
            // nav if the smallDeviceNavigation was false before.
            this.setState({ sideNavVisible: false })
        }
        if (!this.state.smallDeviceNavigation) {
            this.setState({ smallDeviceNavigation: true })
        }
    }
}

Quindi nei componenti controllo solo this.state di conseguenza. Ho il vantaggio di avere a che fare con lo stato basato su un nome logico piuttosto che su larghezze fisiche e punti di interruzione con cui non ho a che fare.

Ricorda che questo è per mostra / nascondi , quindi l'ho sottolineato prima. Layout basati su CSS, ho lasciato da solo e ho lasciato che la griglia di bootstrap si occupasse di esso. Ma menu e nav ho fatto la manipolazione del DOM.