React 中的性能优化

由于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是一种持久化数据结构，基于它的特性，可以减少深拷贝带来的性能消耗

componentWillUnmount优化

当组件被卸载的时候，进行事件解绑，定时器移除等操作，优化内存空间，防止内存泄漏。

stylel-components优化

css in js ，遵循react的一切皆为组件的思想。

相关链接：react中的styled-components

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的代码调试

不断更新中...