Code Splitting
可以帮你“懒加载”代码，如果你没办法直接减少应用的体积，那么不妨尝试把应用从单个 bundle 拆分成单个 bundle + 多份动态代码的形式。
解耦
组件尽可能的进行拆分、解耦
bind 函数优化
1class App extends Component {2 constructor(props) {3 super(props);4 this.state = {5 num:1,6 title:'react study'7 }8 this.handleClick = this.handleClick.bind(this);9 this.item = {react:'redux'};10 }1112 handleClick(){13 this.setState({14 num: this.state.num + 115 })16 }1718 render(){19 return (20 <div className="App">21 <h2> {this.state.num} </h2>22 <button onClick={this.handleClick}>btn1</div>23 <button onClick={this.handleClick.bind(this)}>btn2</div>24 <button onClick={()=>this.handleClick()}>btn3</div>25 </div>26 )27 }28}
第一种是在构造函数中绑定 this，第二种是在 render()函数里面绑定 this，第三种就是使用箭头函数，都能实现上述方法；
但是哪一种方法的性能最好，是我们要考虑的问题。应该大家都知道答案：第一种的性能最好。
因为第一种，构造函数每一次渲染的时候只会执行一遍；
而第二种方法，在每次 render()的时候都会重新执行一遍函数；
第三种方法的话，每一次 render()的时候，都会生成一个新的箭头函数，即使两个箭头函数的内容是一样的。
第三种方法我们可以举一个例子，因为 react 判断是否需要进行 render 是浅层比较，简单来说就是通过===来判断的，如果 state 或者 prop 的类型是字符串或者数字，只要值相同，那么浅层比较就会认为其相同；
但是如果前者的类型是复杂的对象的时候，我们知道对象是引用类型，浅层比较只会认为这两个 prop 是不是同一个引用，如果不是，哪怕这两个对象中的内容完全一样，也会被认为是两个不同的 prop。
不要滥用 props
不要滥用 props,props 尽量只传需要的数据，避免多余的更新，尽量避免使用{…props}
动态导入
1import(``"./math"``).then(math => {2 console.log(math.add(16, 26));3 });
react-loadable
使用不可突变数据结构
使用Immutable对象
- Map：键值对集合，对应Object，Es6种也有专门的Map对象
- List：有序可重复列表，对应于Array
- ArraySet：有序且不可重复的列表
使用Map生成一个immutable对象
1import { Map , is } from 'immutable';23let obj = Map({4 'name': 'react study',5 'course': Map({name: 'react+redux'})6})78let obj1 = obj.set('name','darrell');910console.log(obj.get('course') === obj1.get('course')); // 返回true11console.log(obj === obj1); // 返回false
Immutable.is 比较的是两个对象的 hashCode 或 valueOf（对于 JavaScript 对象）。由于 immutable 内部使用了 Trie 数据结构来存储，只要两个对象的 hashCode 相等，值就是一样的。这样的算法避免了深度遍历比较，性能非常好。
1let obj = Map({name:1,title:'react'});2let obj1 = Map({name:1,title:'react'});3console.log(is(obj,obj1)); // 返回true45let obj2 = {name:1,title:'react'};6let obj3 = {name:1,title:'react'};7console.log(is(obj2,obj3)); // 返回false
Immutable优点：
- 减少内存的使用
- 并发安全
- 降低项目的复杂度
- 便于比较复杂数据，定制shouldComponentUpdate方便
- 时间旅行功能
- 函数式编程
Immutable缺点：
- 学习成本
- 库的大小（建议使用seamless-immutable）
- 对现有项目入侵严重
- 容易与原生的对象进行混淆
减少重复渲染
如果是类组件，使用shouldComponentUpdate减少重新渲染，如果是函数组件，要写清楚依赖项数组
减少dom结构更改
如果要操作Vitural Dom，尽量减少dom结构更改
key的优化
列表要声明key
虚拟列表
大数据量的列表需要使用虚拟滚动列表 见 react virtualList 虚拟列表无限滚动实现
