优化 React-Redux 连接的 PureComponent

Question

我在尝试优化我的 React-Redux 应用程序时非常沮丧。

我有一个标题组件，它会在每次更改 redux 存储时重新加载。我的头组件是 PureComponent

我已经安装了你为什么更新，它告诉我：

Header.props: Value did not change. Avoidable re-render!

这是我的组件：

export class Header extends PureComponent {

    logout() {
        // this.props.logout();
    }

    signup = () => {
        this.props.history.push(urls.SIGNUP)
    }

    render() {
        console.log("=============== RELOADING HEADER")
        return (
            <div>
                <HeaderContent 
                    logout={this.logout.bind(this)}
                    signup={this.signup.bind(this)}
                    user={this.props.user}/>                    
            </div> 
        )
    }
}

export function mapStateToProps(store) {
    // EDITTED: I initially thought this was causing the problem
    // but i get the same issue when returning a javascript object
    //const u = loginUserFactory(store);
    const u ={}
    return {
        user: u,
    }
}

export function mapDispatchToProps(dispatch) {
    return {
        logout: function l() {
            dispatch(authActions.logout())
        }
    }
}

export function mergeProps(propsFromState,propsFromDispatch,ownProps) {
    return {
        // logout: function logout() {
        //     propsFromDispatch.logout()
        // },
        ...propsFromState,
        ...ownProps
    }
}

let HeaderContainer = connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps,
    {pure: true}
)(Header)

export default withRouter(HeaderContainer);

Header.propTypes = {
    history: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired,
    logout: PropTypes.func.isRequired,
}

我已验证每次更改 redux 存储时都会打印指示调用渲染函数的 console.log。

如果我取消注释合并道具中的函数，为什么DidYouUpdate 抱怨该函数导致重新渲染。

重新渲染显着影响了我的应用的性能。我考虑编写自己的 shouldComponentUpdate() 函数，但读到出于性能原因，在该函数中执行深度等于是一个坏主意。

那我该怎么办？

编辑：

这是登录用户工厂中的代码。最初我认为这是问题所在，但当我删除该代码时，我仍然遇到同样的问题。

const loginUserFactory = state => {
    const u = getLoginUser(state);
    const isLoggedIn = !_.isEmpty(u);
    const location = getLocation(state);
    return {
        get id() { return u.id },
        get groupNames() { return u.group_names },
        get avatarSmall() { return u.avatar_small },
        get name() { return u.name },
        get email() { return u.email },

        // my goal was to localize these methods into one file 
        // to avoid repeated code and 
        // to make potential refactoring easier 
        get location() { return location},
        get isHost() {return u.type === "host"},
        get isBooker() {return u.type === "booker"},
        get isLoggedIn() { return isLoggedIn },
    }
}

export default loginUserFactory;

Answer 1

我猜loginUserFactory() 每次调用它都会创建一个新的用户对象，也就是每次更新商店时，因此总是将一个新的用户对象传递给你的组件，它不等于前一个。

此外，您的Header 不会对用户做任何事情，只是将它传递到树的下方。相反，您应该连接 HeaderContent 组件，并且只将用户对象的属性映射到它，它实际上需要，例如name。

一般mapStateToProps() 不应该有任何副作用。它应该只过滤/排序/计算给定状态和自己的道具的连接组件的道具。在最简单的情况下，它只是从商店返回属性的子集。

Answer 2

您在点击处理程序中使用bind。大禁忌！当您在处理程序中绑定时，每次重新渲染都会创建一个全新的函数实例。 bind 中的 constructor 或将您的点击处理程序方法转换为箭头函数。

handleClick = () => {
}

// or

constructor() {
  super()
  this.handleClick = this.handleClick.bind(this)
}

另外，不要在mapStateToProps 或mapDispatchToProps 中实施任何操作或算法。这些也会触发重新渲染。将该逻辑放在其他地方。