关于pureComponent浅比较的问题

Question

老师你好，您在课堂中提到，pureComponent 浅比较只比较对象的第一层数据，但为什么我定义了层次很深的对象，pureComponent也能对比出来呢？changeObjName 函数运行后生效了

class ArrList extends React.PureComponent {
    constructor() {
        super()
        this.state = {
            obj: { age: {value: {num: {a: {b:{c:{d:{e:{name: '孙悟空'}}}}}}}} },
        }
    }
    changeObjName = ()=>{
        var copy = JSON.parse(JSON.stringify(this.state.obj));
        copy.age.value.num.a.b.c.d.e.name = '猪八戒';
        this.setState({
            obj: copy
        })
    }
    render() {
        return <div>
            <ul>
                <li>
                    {this.state.obj.age.value.num.a.b.c.d.e.name }
                </li>
            </ul>
            <button onClick={this.changeObjName }>change name</button>
        </div>
    }
}

Answer 1

双越 2022-01-21 16:21:30

你理解的稍微有一点点偏差。我再解释一下：

PureComponent 所负责的范围，就是浅比较，比较第一层属性。如果属性再深了，那 PureComponent 就管不着了，就需要你自己手写代码去深度比较。

所以，你 state 层级很深，已经超出了 PureCompnent 的管理范围（跟不用 PureComponent 一样），还是会照常触发组件更新的。

• 提问者 白夜2021 #1

  “如果属性再深了，那 PureComponent 就管不着了，就需要你自己手写代码去深度比较。”，可是我并没有写SCU函数，也没有手写代码去深度比较呀，感觉pureComponent自动就实现了深层次的比较。

• 双越 回复 提问者 白夜2021 #2

  你这样去想：你这个 demo 用或者不用 PureCompoent ，两者结果有区别吗？

• 提问者 白夜2021 回复 双越 #3

  好像懂了，用了PureCompoent，设计state的时候层级不要太深，PureCompoent会比较第一层数据来自动优化性能。但是如果写了很深的state，PureCompoent就相当于无效了。

点开查看后面2条评论