React性能优化-2

React性能优化-2

1. pureComponent 【继承PureComponent ,shouldComponentUpdate会默认浅比较 】
2. React.memo 在函数组件使用

//pureComponent
import React from "react";

class List extends React.PureComponent{
    constructor(props) {
        super(props);
    }

    render() {
        return <div>
            <h1>{this.props.name}</h1>
            <ul>
                {this.props.list.map((v,index) => <li key={index}>{v.book}</li>)}
            </ul>

        </div>
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('List did update')
    }
}

class Basics13 extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            father:'aaa',
            name:'fux',
            list:[{book:'xx'}]
        }
    }

    render() {
        return <>
            <div onClick={()=>this.setState({father:this.state.father+'1'})}>修改father</div>
            {this.state.father}
            <hr/>
            <div onClick={()=>this.setState({list:[...this.state.list,{book:'xxx'}]})}>修改list</div>
            {this.state.father}
            <hr/>
            <div onClick={()=>this.setState({name:this.state.name+'1'})}>修改name</div>
            <List list={this.state.list} name={this.state.name}></List>
        </>
    }
}

export default Basics13

//React.memo 在函数组件使用
import React from "react";
import MyComponent from "./MyComponent";
class Basics14 extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            name:'fux',
            list:[1,2,3],
            age:18
        }
    }

    render() {
        return <>
            <a onClick={()=>this.setState({name:this.state.name+1})}>修改name</a>{this.state.name}
            <hr/>
            <MyComponent age={this.state.age}></MyComponent>
        </>
    }
}

export default Basics14





import React from "react";
import _ from 'lodash'
function MyComponent(props) {
    console.log('子组件渲染')
    /* 使用 props 渲染 */
    return <h1>xxx{props.age}</h1>
}
function areEqual(prevProps, nextProps) {
    /*
    如果把 nextProps 传入 render 方法的返回结果与
    将 prevProps 传入 render 方法的返回结果一致则返回 true，
    否则返回 false
    */
    console.log('prevProps',prevProps,'   nextProps',nextProps,_.isEqual(prevProps,nextProps))

    return _.isEqual(prevProps,nextProps)
}
export default React.memo(MyComponent, areEqual);