即使没有状态/道具更改，PureComponent也会保持渲染

Question

我正在尝试学习并测试React.PureComponent，即使该纯组件没有状态更改，它也会继续渲染。

我的PureComponent非常简单，它只通过connect hoc接受一个Redux Action函数

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 Action函数。并作为一个新对象传递给我的PureComponent？

从理论上讲，我不需要编写自己的shouldComponentUpdate函数，对吗？我很困惑你可以帮我理解这个行为吗？

我的目标是当用户单击按钮时，我不希望我的PureComponent再次渲染。

更新：

我根据这个article尝试了以下，它仍在重新渲染

const mapDispatchToProps = {
    resetWorkouts
};

Answer 1

这是因为react在prevProps和nextProps之间进行浅层比较，你只能在shouldComponentUpdate中控制它，反应不知道调度程序与前一个渲染器中的调度程序相同，因为你在mapDispatchToProps函数中使用return 。在您的组件和您的情况下，虽然功能将保持不变，您可以使用两个路径：

路径1：

覆盖shouldComponentUpdate生命周期钩子，如下所示：

shouldComponentUpdate(){
return false;
}

路径2：

摆脱qazxsw poi内部的回归并简化连接，如下所示：

mapDispatchToProps

使用上述路径之一应该让你好

Answer 2

组件渲染的原因是每次执行以下函数：

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

您的组件接收名为

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

的属性的新实例（因为您正在创建内联数组函数）。您可以查看resetWorkouts以检查您的组件是否已经有ownProps：

resetWorkouts