前端性能优化不完全手册 【已更新至React】(3)

只要得到他们每一项值，只要有一个不一样就返回true，更新组件。

•  定义组件时不适用React.component , 使用PureComponent代替，这样React机制会自动在shouldComponentUpdate中进行浅比较，决定是否更新。
•  上面两条优化方案只进行浅比较，只对比直接属性的值，当然你还可以在上面加入this.props和prevprops的遍历比较，因为shouldComponentUpdate的生命周期函数自带这两个参数。如果props 和 state 的值比较复杂，那么可以使用下面这种方式去进行深比较。
•     解决：
  •   保证每次都是新的值
  •   使用 immutable-js 库，这个库保证生成的值都是唯一的       

var map1 = Immutable.Map({ a: 1, b: 2, c: 3 });  
        var map2 = map1.set('b', 50);  
        map1.get('b'); // 2  
        map2.get('b'); // 50 

•  总结：使用以上方式，可以减少不必要的重复渲染。
•  React的JSX语法要求必须包裹一层根标签，为了减少不必要的DOM层级，我们使用Fragment标签代替，这样渲染时候不会渲染多余的DOM节点，让DIFF算法更快遍历。
•  使用Redux管理全局多个组件复用的状态。
•  React构建的是SPA应用，对SEO不够友好，可以选择部分SSR技术进行SEO优化。
•  对Ant-design这类的UI组件库，进行按需加载配置，从import Button from 'antd' 的引入方式，变成import {Button} from antd的方式引入。（类似Babel7中的runtime和polifill的区别）.

（编辑：ASP站长网）