react.js - React connect 和 shouldComponentUpdate

问题描述

问 题

原来为了避免组件重复渲染会考虑用shouldComponentUpdate来实现.
但是我发现使用connect也能实现这个效果?

//组件1:
class Content extends Component{
    render(){
        const {params} = this.props;
        return (
            <S params={params} />
        )
    }
}

//组件2:
class S extends Component{
    render(){
        const {params} = this.props;
        console.log(params);
        return (
            {params.id}
        )
    }
}

假设组件1执行两个state更新

1. params的id变为10

2. 执行拉取数据的state

这样的话就会在控制台打印两次params.
然后加入shouldComponentUpdate的话

class S extends Component{
    shouldComponentUpdate(newprops){
        if (!is(this.props.params, p.params)){
            return true;
        }
        return false;
    }
    render(){
        const {params} = this.props;
        console.log(params);
        return (
            {params.id}
        )
    }
}

这样的话就算组件1执行了2次state的更新,组件2也只会打印一次params,但如果我不用shouldComponentUpdate而是用connect也可以实现这个效果:

@connect()
class S extends Component{
    render(){
        const {params} = this.props;
        console.log(params);
        return (
            {params.id}
        )
    }
}

connect不只是用来把数据或方法绑定到props的么?为什么我加上这个以后也能有shouldComponentUpdate的效果?

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

首先，因为connect使用的是HOC模式，所以他基本控制了你组件S的渲染。

其次，在connect中，每次父级传入的props发生改变的时候，都会经过一次shallow equal再决定是否有必要渲染S组件。

最后，虽然你的父组件Content的state发生了改变，但是传入S的props没有发生改变，所以在connect中被拦截，所以组件S就没有渲染。

这篇关于react.js - React connect 和 shouldComponentUpdate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！