由于render会多次执行，所以在render函数里创建新东西是一件很不划算的事情。其中就包括绑定事件。
bind函数的特点：每次执行都会创建并返回一个新的函数。而在render函数里执行bind则会每次都重新创建并返回函数，造成一定的性能浪费，所以我们有一种其他的解决方案：
在constructor中绑定事件函数的this指向，从而在render里减少bind函数。
this.handle = this.handle.bind(this); // constructor 里
onClick = {this.handle.bind(this)}; // render 里
shouldComponentUpdate() 优化
新旧props和state进行对比，减少组件无用的更新次数
比如：在 react diff算法中，对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切的知道这点的话，可以节省大量的 diff 运算时间，因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
在以上代码中，shouldComponentUpdate 只检查 props.color 和 state.count 的变化。如果这些值没有变化，组件就不会更新。当你的组件变得更加复杂时，你可以使用类似的模式来做一个“浅比较”，用来比较属性和值以判定是否需要更新组件。由于这种做法逐渐普及，react 单独提供了一个方案来实现组件的浅比较：下文中的 PureComponent 就是根据类似的原理来实现的。
redux中的immutable
immutable是一种持久化数据结构，基于它的特性，可以减少深拷贝带来的性能消耗
相关链接：我们为什么使用immutable、如何在redux中使用 immutable
componentWillUnmount优化
当组件被卸载的时候，进行事件解绑，定时器移除等操作，优化内存空间，防止内存泄漏。
stylel-components优化
css in js ，遵循react的一切皆为组件的思想。
redux-actions 优化
减少了 redux 中的多层 switch 嵌套，增加了代码灵活度和可读性
使用路由懒加载 —— react-loadable
实现按需加载，防止加载过程中出现白屏
import Loadable from 'react-loadable';
import Loading from './loading-component';
export const LoadableComponent = Loadable({
loader: () => import('./my-component'),
loading: Loading,
});
长列表缓存
防止数据大批渲染的时候页面卡顿
使用 pureComponent
通过pureComponent创建的组件 在更新前内部会默认进行浅比较，减少不必要的render。
注意点：
pureComponent 和 shouldComponentUpdate 有冲突，只能二选其一。
-
该方法进行的浅比较对引用类型（数组、对象）会失效
解决方法：数组更新的时候使用concat方法，对象更新的时候使用Object.assign()
handleClick() { this.setState(prevState => ({ words: prevState.words.concat(['marklar']), colors:Object.assign({}, prevState.colormap, {right: 'blue'}) })); }
使用 redux-devtools-extension
做redux的代码调试
不断更新中...
