# 问题

修改了App中的数据所有的组件都需要重新render 进行diff算法，性能必然很低。

解决

控制render方法是否被调用

通过shouldComponentUpdate方法（简称scu） 判读值是否改变再决定是否render

• 参数一 nextProps 修改之后，最新的props属性
• 参数二 nextState 修改之后，最新的State属性

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.message !== nextState.message) {
            return true
        }
        return false
    }

优化

类组件的PureComponent

import React, { PureComponent } from 'react'

export class App extends PureComponent{}

函数式组件 memo

import {memo} from "react"

数据的不可变性: 1.直接修改原有的state，重新设置一遍 在PureComponent 是不能引入重新渲染的

this.state.books.push(newBook)
this.setState({books: this.state.books})

2.赋值一份books，在新的Books中修改，设置新的books (浅拷贝)