React常用性能优化总结

0、浏览器检测性能

React 16以前性能检测需要Chrome浏览器安装React Perf插件，react 16开始，直接在地址后面加上/?react_perf就行(例如：http://localhost:3000/?react_perf)，然后打开 Chrome DevTools Performance 并点击 Record即圆点开始操作，点击‘stop’结束，然后里面有一项’User Timing’用来记录操作过程和逻辑时间。
React常用性能优化方法有如下几种：

1、属性传递优化

class App extends React.Component {
    constructor(props){
        super(props);
    }
    handleclick(){
        console.log(‘hello');
    }    

    render() {
        return(
            <button onClick={this.handleClick.bind(this)}> click1 </button>
            <button onClick={( )=>this.handleClick( )}> click2 </button>
        )
    }
}

执行click1时候， 每次渲染render，bind都会执行一次
执行click2时候，比click1好一点，但每次render时候也要重新生成一个函数
{a: 1} == {a: 1} // false
在存储复杂的数据结构的时候，比如对象或者函数，都是存储内存地址，两次{a: 1}都放在不同的内存地址，所以不相等。箭头函数也是如此，每次都会生成一个新的函数。

推荐写法：

class App extends React.Component {
    constructor(props){
        super(props);
        this.handleClick=this.handleClick.bind(this);
    }
    handleclick(){
        console.log(‘hello');
    }    

    render() {
        return(
            <button onClick={this.handleClick}> click3 </button>
        )
    }
} 

constructor构造函数只会在初始化组建时候，执行一次。

2、shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) 通过对比nextProps与当前props，nextState与当前state是否一致，来决定是否需要组件的更新操作。

原生JavaScript对比2个对象是否有改变：

// 递归对比，复杂度太高，不可接受
let obj1 = {name: 1, other: {title: hello}};

let obj2 = {name: 1, other: {title: hello}};

function compareObjs(obj1, obj2) {
    if (obj1 == obj2) {
        return true;
    }
    if (Object.keys(obj1).length !== (Object.keys(obj1).length) {
        return false;
    }
    for (let k in obj1) {
        if (typeof obj1[k] == 'Object') {
            return compareObjs(obj1[k], obj2[k]);
        } else if (obj[k] !== obj2[k]) {
            return false;
        }
    }
    return true;
}

实际上React在更新阶段很巧妙地对比原有的Virtual DOM和新生的Virtual DOM，找出两者的不同之处，根据不同来修改DOM树，这样只需要做最小的必要改动。
React在更新中这个“找不同”的过程，就叫做Reconciliation(调和)。——摘自《深入浅出React和Redux》page116

react 建议只做浅层比较:

let obj1 = {name: 1, other: {title: hello}};

let obj2 = {name: 1, other: {title: hello}};

function compareObjs(obj1, obj2) {
    if (obj1 == obj2) {
        return true;
    }
    if (Object.keys(obj1).length !== (Object.keys(obj1).length) {
        return false;
    }
    for (let k in obj1) {
        if (obj[k] !== obj2[k]) {
            return false;
        }
        return true;
    }
    return true;
}

shouldComponentUpdate(nextProps, nextState) {
    if (compareObjs(nextProps, this.props)) {
        return false;
    }
    return true;
}

上面的compareObjs方法的复杂度虽然已经减小了不少，但一大串代码也是挺繁琐的，也可以加入immutable插件。

• 安装
  cnpm install immutable --save
• 使用

// 用is判断两个复杂的对象是否相等
import { Map, is} from 'immutable';

let obj1 = Map({name: 'xiaohua', age: 18});
let obj2 = Map({name: 'xiaohua', age: 18});

console.log(is(obj1, obj2));  // true

immutable优点：

• 1. 减少内存使用
• 2. 并发安全（不用担心别人修改当前状态）
• 3. 降低项目复杂度
• 4. 便于比较复杂数据，定制shouldComponentUpdata方便
• 5. 每次都生成一个新的数据，time traving功能方便
• 6. 函数式编程

immutable缺点：

• 1. 学习成本
• 2. 库的大小（有个更小的seamless-immutable库）
• 3. 对先有项目入侵严重（新项目使用，老项目有待评估再使用）

3、key值得设定

Visual DOM树进行增删改操作比对时候，用key进行确认是否是同一个元素，使处理列表时更加高效，方便快速遍历查找。

render() {
    const arr = ['hello', 'world', '!!!'];
    return (
        <ul>
            {arr.map(v=><li key={v}>{v}</li>)}
        </ul>
    )
}

4、用reselect提高redux数据获取性能

用reselect将数据缓存起来，下次直接使用，避免了重新计算，提高了性能。

• 安装：
  npm install reselect --save
• 使用：

// 原先的redux基本写法
import { connect } from 'react-redux';

@connect(
    state=>state;
)

// 引入reselect的写法
import { connect } from 'react-redux';
import { createSelector } from 'reselect';

const numSelector = createSelector(
    state=>state,
    // 第二个函数的参数，是第一个函数的返回值
    state=>({num: state * 2})
)

@connect(
    state=>numSelector(state);
)