react-reudx 如何阻止子组件更新 ？

Question

我有2个组件，Test和Age,他们都通过connect获取数据。

其中Age是Test的子组件。

如果我在 Test父组件的shouldComponentUpdate return false ，

发现Test确实不更新，但是其子组件Age还是会更新（来自connect部分的数据）。

问题是，我如何阻止Age不更新？？

import {change} from 'actions'


class Age extends PureComponent{
    constructor(props){
        super(props);
        this.add=this.add.bind(this);
    }
    add(){
        this.props.change({
            name:'haha',
            age:this.props.age+1
        });
    }
    render(){
        return(
            <div>
                {this.props.names}:{this.props.age}
                <input type="button"onClick={this.add} value="+"/>
            </div>
        )
    }
}
const AgeConnect=connect((state)=>{
    return state.iReducer;
},(dispatch)=>{
    return {
        change:(o)=>dispatch(change(o))
    }
})(Age);


class Test extends Component{
    constructor(props){
        super(props)
    }
    shouldComponentUpdate(){
        return false;
    }
    render(){
        return(
            <div>
                {this.props.name}
                <AgeConnect  names={this.props.name} />
            </div>
        )
    }
}



const TestConnect=connect((state)=>{
    return state.iReducer;
},(dispatch)=>{
    return {
        change:(o)=>dispatch(change(o))
    }
})(Test);

export default TestConnect;

Answer 1

你已经自己说了，阻止更新可以使用shouldComponentUpdate， 那么为什么不在Age组件中使用shouldComponentUpdate呢？

还有一点就是，为什么要在Age组件中进行connect呢？ 为什么不能通过Test组件传递过来呢，如果通过Test传递，那么是不是就不会发生你的情况了。

Answer 2

Age里也写个shouldComponentUpdate return false啊

Answer 3

state与props都会导致组件更新。
组件的父子关系中，父组件向子组件传递props有改变时，子组件会更新。
connect高阶函数也向组件提供props，该props改变，组件也会更新。
不建议随便使用shouldComponentUpdate，最好解决的办法从redux的state着手，只要state不变，组件就不会更新。

Answer 4

你说的不更新应该是值不走re-render，如果传给子组件的props和子组件的state都没变化的话，子组件也只是re-render一下，重新计算了vdom。做了dom-diff这个动作，真实的dom并没有更新
如果是要避免re-render，可以考虑子组件基础purecomponent
https://juejin.im/entry/5934c...