PureComponent продолжает рендеринг, даже при отсутствии изменений состояния / поддержки

Question

Я пытаюсь изучить и протестировать React.PureComponent, и он продолжает рендеринг, даже если состояние этого чистого компонента не изменяется.

Мой PureComponent очень прост и принимает только одну функцию Redux через connect hoc

import React from 'react';
import {
    Container,
    Button
} from 'reactstrap'
import { connect } from 'react-redux'
import { resetWorkouts } from '../actions/workoutApiActions'

class About extends React.PureComponent {
    render () {
        const { resetWorkouts } = this.props;
        console.log('in about render...')
        return (
            <React.Fragment>
                <Container>
                    <h2>Api Data Reset</h2>
                    <Button color="danger" onClick={resetWorkouts}>Reset Data</Button>
                </Container>
            </React.Fragment>
        );
    }
}

const mapDispatchToProps = dispatch => {
    return {
        resetWorkouts: () => dispatch(resetWorkouts())
    }
}

export default connect(null, mapDispatchToProps)(About);

В приведенном выше коде вы можете видеть, что в компоненте нет состояния,Он принимает только функцию действия как props из connect.Однако всякий раз, когда я нажимаю на кнопку Reset Data, он продолжает вызывать метод render, как показано на скриншоте.

На скриншотеЯ вижу, что глобальное состояние хранилища менялось всякий раз, когда я нажимал кнопку.Но это состояние не используется в моем PureComponent, и оно должно выходить за рамки, и мой компонент должен игнорировать для повторного рендеринга.

Или функции действий Redux создаются каждый раз, когда изменяется глобальное хранилище состояний.И передается как новый объект моему PureComponent?

Теоретически, мне не нужно писать собственную shouldComponentUpdate функцию, верно?Я запутался, и не могли бы вы помочь мне разобраться в этом поведении?

Моя цель - я не хочу, чтобы мой PureComponent отображался снова, когда пользователь нажимает кнопку.

Обновления:

Я пробовал какследующее в соответствии с этой статьей и она все еще перерисовывает

const mapDispatchToProps = {
    resetWorkouts
};

Answer 1

это потому, что реагирует поверхностное сравнение между prevProps и nextProps, и вы можете контролировать, что только в shouldComponentUpdate реакция не знает, что диспетчер такой же, как в предыдущем рендере, потому что вы используетевернуться внутрь функции mapDispatchToProps.В вашем компоненте и в вашем случае, хотя функция останется прежней, вы можете пойти двумя путями:

путь 1:

переопределить shouldComponentUpdate жизньцикл перехватывается следующим образом:

shouldComponentUpdate(){
return false;
}

путь 2:

избавиться от возврата внутри mapDispatchToProps и упростить понятие, чтобы оно было какследующее:

`conncect(state => ({}), {
        resetWorkouts: resetWorkouts})(YourComponent);`

, используя один из вышеперечисленных путей, должно помочь вам пойти

Answer 2

Причина, по которой ваш компонент выполняет рендеринг, заключается в том, что каждый раз, когда выполняется следующая функция:

const mapDispatchToProps = dispatch => {
    return {
        resetWorkouts: () => dispatch(resetWorkouts())
    }
}

ваши компоненты получают новый экземпляр свойства с именем resetWorkouts (потому что вы создаете функцию встроенного массива). Вы можете посмотреть на ownProps, чтобы проверить, есть ли у вашего компонента resetWorkouts:

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        resetWorkouts: ownProps.resetWorkouts || () => dispatch(resetWorkouts())
    }
}