Вызывается ли ComponentWillReceiveProps один раз с несколькими отправками синхронизации, но вызывается несколько раз с асинхронными отправками? - PullRequest
Новая
       6

Вызывается ли ComponentWillReceiveProps один раз с несколькими отправками синхронизации, но вызывается несколько раз с асинхронными отправками?

0 голосов
/ 14 декабря 2018

index.js 

class App extends Component {
    onClick = () => {
        this.props.update()
    }

    componentWillReceiveProps() {
        console.log('componentWillReceiveProps')
    }

    render() {
        return (
            <React.Fragment>
                <h1>{this.props.foo.foo}</h1>
                <button onClick={this.onClick}>Click Me!</button>
            </React.Fragment>
        );
    }
}

const action = dispatch => {
    dispatch({ type: 'foo', foo: 'first' })
    dispatch({ type: 'foo', foo: 'second' })
}

const mapStateToProps = ({ foo }) => ({ foo })

const mapDispatchToProps = dispatch => ({
    update: () => action(dispatch)
})

const ReduxApp = connect(mapStateToProps, mapDispatchToProps)(App);

render(
    <Provider store={store}>
        <ReduxApp/>
    </Provider>,
    document.getElementById('root')
)

redux.js 

const foo = (state = {}, { type, foo }) => {
    if (type === 'foo') {
        return { foo }
    } else {
        return state
    }
}

const reducer = combineReducers({ foo })

const store = { foo: '' }

export default createStore(reducer, store, applyMiddleware(thunk))

Я знаю, что componentWillReceiveProps устарел, но мы используем старую версию реакции, и наш код использует этот метод.

Ранее мы столкнулись с действительно странной проблемой, когда с помощью приведенного выше кода componentWillReceiveProps вызывается только один раз, однако, если мы изменим эту строку в index.js: 

dispatch({ type: 'foo', foo: 'second' })

на эту:

setTimeout(() => dispatch({ type: 'foo', foo: 'second' }), 1000)

, тогда componentWillReceiveProps вызывается дважды.Зачем?Как получается, что одновременное выполнение двух действий приводит к тому, что этот метод вызывается один раз, а установка таймера вызывает его дважды?

1 Ответ

0 голосов
/ 14 декабря 2018

Да, это потому, что React пакетирует обновления, если они вызваны в обработчике событий React.Диспетчеризация действий Redux в конечном итоге приводит к вызовам setState().Таким образом, в первом случае оба отправленных действия приводят к повторному рендерингу React.Во втором случае это приводит к двум повторным визуализациям React.

...