React性能優化

React性能優化

1、事件的優化

一、構造函數中聲明

export default MyCom extends Component{
    constructor(){
        super()
        this.fun = this.fun.bind(this)
    }
    render(){
        return(
            <div onClick={this.fun}></div>
        )
    }
	fun(){
        console.log("fun")
    }
}
複製代碼

此中方式只會在構造函數中建立一次，性能最好，但沒法傳值

二、在組件中聲明

export default MyCom extends Component{
    render(){
        return(
            <div onClick={this.fun.bind(this, arg)}></div>
    	)
	}
    fun(){
        console.log("fun")
    }
}
複製代碼

該方法能夠解決以上不能傳參的問題，但每次在render時都會從新執行一遍函數

三、在渲染內容中使用箭頭函數

export default MyCom extends Component{
    render(){
        return(
            <div onClick={(arg)=>this.fun(arg)}></div>
    	)
	}
    fun(){
        console.log("fun")
    }
}
複製代碼

該方法每次執行render時都會從新生成箭頭函數，極不推薦

2、數據結構優化

使用Immutable對Reducer的數據進行管理

import immutable from "immutable"
const defaulteState = immutable.fromJS({
    list: []
})

export default (state = defaultState, action)=>{
    switch(action.type){
        case "Add":
            return state.updateIn(["list"], list=>list.push(action.payload))
        default:
            return state
    }
}
複製代碼

使用該方法能夠減小在修改值時無需建立新的對象，減小內存的消耗，從而達到性能優化的目的

3、渲染優化

shuoldComponentUpdate的優化

BaseComponent.js

import React from "react";
import {is} from "immutable";
export default class BaseComponent extends React.Component{
	shouldComponentUpdate(nextProps, nextState, nextContext) {
        let thisState = this.state || {};
        let thisProps = this.props || {};
        nextProps = nextProps || {};
        nextState = nextState || {};

        if(Object.keys(thisState).length != Object.keys(nextState).length 
           || Object.keys(thisProps).length != Object.keys(nextProps).length){
            return true;
        }

        for(var key in nextProps){
            if(!is(nextProps[key],thisProps[key])){
                return true;
            }
        }

        for(var key in nextState){
            if(!is(nextState[key],thisState[key])){
                return true;
            }
        }

        return false;

    }
}
複製代碼

MyComponent.js

class MyComponent extends BaseComponent{
    render(){
        return(<div></div>)
    }
}
複製代碼

根據比較的結果是否一致，來斷定是否須要從新渲染

4、組件優化

PureComponent是純組件

特色：

• 通常做爲UI組件使用
• 會對數據進行一次淺比較，只會關注數據的地址是否改變，若未改變則不會渲染
• 使用了該組件後，禁止使用shouldCoponentUpdate，不然會破壞PureCoponent的規則