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

Мой PureComponent очень прост, и он принимает только одну функцию Redux Action через 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, как показано на скриншоте.

enter image description here

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

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

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

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

Обновления:

В соответствии с этой статьей я пробовал, как показано ниже, и он по-прежнему перерисовывается

const mapDispatchToProps = {
    resetWorkouts
};
0
TTCG 16 Апр 2019 в 00:11

2 ответа

Лучший ответ

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

путь 1:

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

shouldComponentUpdate(){
return false;
}

путь 2:

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

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

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

3
Danny Buonocore 13 Ноя 2019 в 23:18

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

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

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

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        resetWorkouts: ownProps.resetWorkouts || () => dispatch(resetWorkouts())
    }
}
1
Rafael Sousa 15 Апр 2019 в 21:48