超级详细react笔记(十)组件优化篇

1 优化

1.1 按需更新

1.1.1 利用生命周期

1 普通写法

import React from 'react'
export default class Rodom extends React.Component{
    constructor() {
        super();
        this.state={
            number:0
        }
    }

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

    create=()=>{
        this.setState({
            number:Math.floor(Math.random()*3)
        })
    }
    render() {
        return(
            <div>
                <h1>{this.state.number}</h1>
                <button onClick={this.create}>点击</button>
            </div>
        )
    }
}

2 组件化

• random.js

import React from 'react'
export default class Com extends React.Component{
    constructor() {
        super();
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if(nextProps.number!==this.props.number){
            return true
        }
        return false
    }
    render() {
        return(
            <div>
                <h1>{this.props.number}</h1>
                <button onClick={this.create}>点击</button>
            </div>
        )
    }
    create=()=>{
        this.props.myclick()
    }
}

• APP.js

import React,{Component} from 'react'
import {Random} from './component/index'
export default class APP extends Component{
    constructor() {
        super();
    }
    render() {
        return(
            <div>APP
                <Random/>
            </div>
        )
    }
}

1.1.2 利用PureComponent

• 自动比较,按需更新
• 无需书写shouldComponentUpdate
• com.js

import React,{PureComponent} from 'react'
export default class Com extends PureComponent{
    constructor() {
        super();
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if(nextProps.number!==this.props.number){
            return true
        }
        return false
    }
    render() {
        return(
            <div>
                <h1>{this.props.number}</h1>
                <button onClick={this.create}>点击</button>
            </div>
        )
    }
    create=()=>{
        this.props.myclick()
    }
}