PureComponent -性能优化案例

 

 

 

import React, { PureComponent } from 'react'

export default class App extends PureComponent {

    constructor(props){

        super(props)

        this.state = {

            friends: [

                {name:"lilei",age:20},

                {name:"lily",age:25},

                {name:"tom",age:30}

            ]

        }

    }

    render() {

        return (

            <div>

                <h2>好友列表</h2>

                <ul>

                    {

                        this.state.friends.map( (item,index) => {

                            return (

                                <li key={index}>

                                    姓名：{item.name}，

                                    年龄：{item.age}，

                                    <button onClick = { e => this.incrementAge(index) }>age + 1</button>

                                </li>

                                

                            )

                           

                        })

                    }

                </ul>

                <button onClick = { e => this.insertDate() }>添加数据</button>

            </div>

        )

    }

    // shouldComponentUpdate(nextProps, nextState) {

        

    //     if(nextState.friends !== this.state.friends){

    //         return true;

    //     }

    //     return false;

    // }

 

    insertDate(){

        let newFriends = [...this.state.friends];

        newFriends.push({name:"Eric",age:28}) 

        this.setState({

            friends: newFriends

        })

    }

    incrementAge(index){

        let newFriends = [...this.state.friends];

        newFriends[index].age += 1

        this.setState({

            friends: newFriends

        })

    }

}