Как можно установить мое состояние один раз при прослушивании события изменения размера - PullRequest
Новая
       15

Как можно установить мое состояние один раз при прослушивании события изменения размера

0 голосов
/ 30 апреля 2019

В моем приложении реагирования мне нужно прослушать событие изменения размера окна, поэтому, если размер окна меньше X, я буду вызывать mobileFunc, если он больше X, я буду вызывать desktopFunc для рендеринга некоторого html с большим количеством переменных. , (Эти переменные и аргументы получают разные значения для desktopFunc и mobileFunc)

Я слушаю событие, однако, изменение размера каждого окна снова и снова устанавливает мое состояние. Я не хочу этого делать. Я пытаюсь найти способ установить / изменить свое состояние, когда это необходимо, и, если возможно, уменьшить событие изменения размера прослушивания (необязательно). Я открыт для предложений с debouncing, shouldComponentUpdate и т. Д. Я должен найти эффективный способ. 

// mobile is false by default in my state.
componentDidMount() {
    window.addEventListener('resize', this.setDeviceType)
}
componentWillUnmount(){
    window.removeEventListener('resize', this.setDeviceType)
}

setDeviceType() {
    if(window.innerWidth < 768) {
        this.setState({mobile: true})
    } else {
        this.setState({mobile: false})
    }
}

render() {
    return(
        <div>
            {this.state.mobile ? this.mobileFunc() : this.desktopFunc()}
        </div>
    )
}

Ответы [ 2 ]

1 голос
/ 30 апреля 2019

Я не проверял, но я думаю это может сработать ... 

// mobile is false by default in my state.
componentDidMount() {
    window.addEventListener('resize', this.setDeviceType)
}
componentWillUnmount(){
    window.removeEventListener('resize', this.setDeviceType)
}

setDeviceType() {
    const { mobile } = this.state;
    if(window.innerWidth < 768) {
        if(!mobile) {
            this.setState({mobile: true})
        }
    } else {
        if(mobile) {
            this.setState({mobile: false})
        }
    }
}

render() {
    const { mobile } = this.state;
    return(
        <div>
            {mobile ? this.mobileFunc() : this.desktopFunc()}
        </div>
    )
}

Этот блок if / else может быть очищен, но вы действительно в сети, чтобы выполнить setState, если в данный момент это не то, что вам нужно.

1 голос
/ 30 апреля 2019

Вы можете использовать отклоненную функцию. Например https://lodash.com/docs/#debounce

...