React组件渲染优化

CartList.js

import React, { Component, PureComponent } from 'react';

class CartList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodsList: []
        }
    }

    componentDidMount() {
        // 每秒改变一次数据
        setInterval(() => {
            this.setState(() => ({
                goodsList: [
                    {
                        name: '商品1',
                        price: 10
                    }
                ]
            }))
        }, 1000);
    }

    render() {
        return (
            <div>
                {
                    this.state.goodsList.map(item => {
                        return <CartItem goods={item} key={item.name}></CartItem>
                    })
                }
            </div>
        )
    }
}

export default CartList;

CartItem.js

function CartItem(props) {
    console.log('render');
    
    const { name } = props.goods;
    return (
        <div>{name}</div>
    )
}

CartItem中，每秒打印两次render，两次是因为使用了严格模式，再index.js中去掉React.StrictMode即可

上面的渲染方式，每秒改变一次数据，虽然实际内容并没有发生变化，但还是会重新渲染，这会带来不必要的性能消耗
改写 CartItem，使其继承 PureComponent，在数据不变的情况下，不会重新渲染

注意：PureComponent只进行浅比较，下面这种写法props接收的是goods对象，浅比较是比较的内存地址，每次的goods对象都是一个新的地址，所以还是会重新渲染

class CartItem extends PureComponent {
    render() {
        console.log('render');
        const { name, price } = this.props.goods
        return (
            <div>
                <p>{name}</p>
                <p>{price}</p>
            </div>
        );
    }
}

为解决上面的问题，需要改变CartItem的传值方式，改为接收对象中的每个属性值

return <CartItem name={item.name} price={item.price} key={item.name}></CartItem>
// 也能简写为
return <CartItem {...item} key={item.name}></CartItem>

class CartItem extends PureComponent {
    render() {
        console.log('render');
        const { name, price } = this.props
        return (
            <div>
                <p>{name}</p>
                <p>{price}</p>
            </div>
        );
    }
}

PureComponent使用原则