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

只要获得他们每一项值，只要有一个纷歧样就返回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的区别）.

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!