遇到的React性能优化的各种方式

在实习中思考的React性能优化手段整理, 理解还很肤浅，欢迎批评指正

React前端优化涉及到的方面

三种组件创建的方式

Stateless(无状态)
Component
PureComponment(React15之后用的比较少)

PureComponment 默认会执行 shadowEqual(old props,new props)

当然我们在shouldUpdateComponents()生命周期也可以进行 shadowEqual()的比较，

若浅比较不同，则可以进行deepEqual() 深层次比较

Redux的connect()方法与`PureComponent相反，每次改变都会进行重新渲染,有时候反而会影响性能
bind 会耗性能

原因: 匿名函数，每次创建都会new一个新的实例

解决方案:

箭头函数


import React, { Component } from 'react';

class Button extends Component { render() { return (

    );
}

}

        + 写在constructor中

```js
import React, { Component } from 'react';

class Button extends Component {
    constructor(){
        super()
        this.onClick = this.onClick.bind(this);
    }
    render() {
        return (
            <div>
                <button onClick= { (e) => { this.onClick() }}/>
            </div>
        );
    }
}

    + 方法中写 onChange

import React, { Component } from 'react';

class Button extends Component {
    constructor(){

    }
    onClick = (e) => { console.log(e.target)};
    render() {
        return (
            <div>
                <button onClick= { this.onClick()}/>
            </div>
        );
    }
}

对大组件进行尽可能大的颗粒度拆分
尽量少操作DOM，若操作，尽量缓存结果
key的使用

不要用数组的index作为key, 用id等作为key
慎用ES6 扩展运算符... 组件需要什么props，传什么
或者使用...filter(['',''])

du1wu2lzlz / my_blog

遇到的React性能优化的各种方式 #15