[react] 如何解决引用类型在pureComponent下修改值的时候，页面不渲染的问题？

Posted 2021-10-10 前端小歌谣

使用immutable对象

import React from 'react';

class PComponent extends React.PureComponent {
    render() {
        const { name, age } = this.props.person;
        return <>
            <p>NAME: {name}</p>
            <p>AGE: {age}</p>
        </>
    }
}

class Demo extends React.Component {
    state = {
        person: {
            name: 'vk',
            age: 1,
        }
    }
    doChange = () => {
        const { person } = this.state;
        // 这种情况下，person的引用地址没有变化，diff前后浅比较相等，所以并没有引起PComponent变化
        // 如果PComponent是继承自React.Component,因为父组件的render导致了子组件也render了，是会产生变化的
        // person.name = 'vk2';
        // this.setState({ person })
        // 正确的写法
        this.setState({
            person: {
                ...person,
                name: 'vk2',
            }
        });
    }
    render() {
        const { person } = this.state;
        return <>
            <button onClick={this.doChange}>Change</button>
            <PComponent person={person} />
        </>
    }
}

export default Demo;

   个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题