关于pureComponent浅比较的问题

来源:7-24 React性能优化-PureComponent和memo

白夜2021

2022-01-21

老师你好,您在课堂中提到,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>
    }
}
写回答

1回答

双越

2022-01-21

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

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

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

0
5
白夜2021
非常感谢!
2022-01-23
共5条回复

2024版 前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4663 学习 · 1644 问题

查看课程