React学习day21——组件优化Component

Component

Component的2个问题
1、只要执行setState（），即使不改变状态数据，组件也会重新render（）==>效率低
2、每当前组件重新render（），就会重新render子组件，纵使子组件没有到父组件的任何数据 ==>效率低

效率高的做法
只有当组件的state 或 props数据发生改变时才重新render（）
原因
Component中的shouldComponentUpdate（）总是返回true
解决
方法1:
重写shouldComponentUpdate（）方法
比较新旧state或props数据，如果有变化才返回true，如果没有返回false
方法2：
使用PureComponent
PureComponent重写了shouldCompoentUpdate（），只要state或props数据有变化才返回true
注意：
只是进行state和props数据的浅比较，如果只是数据对象内部数据变了，返回false
不要直接修改state数据，而是产生新数据
项目中一般使用PureComponent来优化

import React, {Component} from 'react';
import './index.css'
export default class Parent extends Component {
    state = {carName:'奔驰'}
    changeCar = ()=>{
       this.setState({carName:'劳斯莱斯'})
    }
    shouldComponentUpdate(nextPros,nextState){
        console.log(this.props,this.state)
        console.log(nextPros,nextState)
        if(this.props.carName === nextState.carName){
            return false
        }
         else return true

    }
    render() {
        return (
            <div className="parent">
                <h2>我是Parent组件</h2>
                <span>我的车名是：{this.state.carName}</span>

                <button onClick={this.changeCar}>升级</button>
                <Child carName={this.state.carName}/>
            </div>
        );
    }
}
class  Child extends  Component{
    render() {
        return (
            <div className="child">
                <h2>我是Child组件</h2>
                <span>我接到的车是：{this.props.carName}</span>
            </div>
        );
    }
}