Question

只要animationType或animationComplete的值发生变化，Splash组件就会重新渲染。我不明白为什么在没有任何道具传递到渲染器时会重新渲染。

export class Splash extends React.Component {
    static propTypes = {
        animationType: allowNullPropType(PropTypes.string),
        animationComplete: PropTypes.bool,
        changeAnimation: PropTypes.func
    };

    componentDidMount() {
        const {changeAnimation} = this.props;

        // ...
    }

    componentDidUpdate() {
        const {animationType, animationComplete} = this.props;
        const shouldChangeScreen = (animationType === 'out' && animationComplete);

        if (shouldChangeScreen) {
            const {navigation} = this.props;

            // ...
        }
    }

    render() {
        return (
            <Fade id='splash' styles={styles.container}>
                <Logo height='125' width='125'/>
            </Fade>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        animationType: state.fade.getIn(['splash', 'type']),
        animationComplete: state.fade.getIn(['splash', 'complete'])
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        changeAnimation: (id, type) => dispatch(changeAnimation(id, type))
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Splash);

我尝试用简单的View组件替换Fade（也连接到Redux存储并调度动作）和Logo组件，但问题仍然存在。我也尝试过使用重新选择。

唯一有效的解决方案是：

shouldComponentUpdate() {
        return false;
    }

但这似乎不是一个很好的解决方案。

Answer 1

这就是反应的方式。道具的任何更改都将导致组件再次调用render方法，除非您使用shouldComponentUpdate阻止了它。

Answer 2

您应该始终认为React中的“渲染”意味着“渲染虚拟DOM”。实际的DOM部分只有在确实发生某些更改的情况下才会重新渲染。因此，无需担心大量渲染。

道具更改时，为什么我的组件会重新渲染？

2 个答案: