React性能优化

港控/mmm° 2022-01-12 02:23 295阅读 0赞

# 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")
        }
    }
    复制代码

此中方式只会在构造函数中创建一次，性能最好，但无法传值

**2、在组件中声明**

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

该方法可以解决以上不能传参的问题，但每次在render时都会重新执行一遍函数

**3、在渲染内容中使用箭头函数**

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

该方法每次执行render时都会重新生成箭头函数，极不推荐

## 二、数据结构优化 ##

使用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
        }
    }
    复制代码

使用该方法可以减少在修改值时无需创建新的对象，减少内存的消耗，从而达到性能优化的目的

## 三、渲染优化 ##

`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>)
        }
    }
    复制代码

根据比较的结果是否一致，来判定是否需要重新渲染

## 四、组件优化 ##

`PureComponent`是纯组件

特点：

*  一般作为UI组件使用
 *  会对数据进行一次浅比较，只会关注数据的地址是否改变，若未改变则不会渲染
 *  使用了该组件后，禁止使用`shouldCoponentUpdate`，否则会破坏`PureCoponent`的规则

转载于:https://juejin.im/post/5d0844ce6fb9a07ed911c33c