Как избежать дублирования вызовов render () при использовании setState и redux действий - PullRequest
0 голосов
/ 06 июля 2018

Как заголовок, я обнаружил, что следующий код делает дублированные вызовы render ():

pressBtn = () => {
    console.warn("call completeUserLogin");
    // setState is going to update component state.
    this.setState({counter1: this.state.counter1+1});
    // counterTwoUpdate is going to update redux state.
    this.props.counterTwoUpdate(this.props.counter2+1);
}

Ситуация такая же, как я вызываю setState два раза. Но два setState могут быть легко объединены с 1 оператором, таким как:

// Before changes (render() call two times)
this.setState({counter1: this.state.counter1+1});
this.setState({counter2: this.state.counter2+1});

// After changes (render() call only once)
this.setState({
    counter1: this.state.counter1+1,
    counter2: this.state.counter2+1
});

Какие-нибудь хитрости, чтобы объединить setState и redux action так, чтобы он просто сделал 1 вызов render ()? Большое спасибо

1 Ответ

0 голосов
/ 06 июля 2018

Если вы хотите обновить оба счетчика из двух разных мест, два раза вызовете метод render() из-за двух разных обновлений. Во-первых, я порекомендую вам не сохранять в состоянии то, что вы можете достичь с помощью реквизита, такие как глобальное избыточное состояние. Во-вторых, я посоветую вам использовать setState() для обоих счетчиков или вызвать действие, которое обновит соответствующее. Затем вы вызовете render() только один раз.

...