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优点：
- 减少内存使用
- 并发安全（不用担心别人修改当前状态）
- 降低项目复杂度
- 便于比较复杂数据，定制shouldComponentUpdata方便
- 每次都生成一个新的数据，time traving功能方便
- 函数式编程
immutable缺点：
- 学习成本
- 库的大小（有个更小的seamless-immutable库）
- 对先有项目入侵严重（新项目使用，老项目有待评估再使用）
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);
)
