使用OnPush和immutable.js来提升angular的性能
angular里面变化检测是非常频繁的发生的,如果你像下面这样写代码
<div>
{{hello()}}
</div>
则每次变化检测都会执行hello函数,如果hello函数十分耗时,则会出现占用CPU高的问题。
这时,推荐使用OnPush策略和immutable.js来提升angular应用的性能。
OnPush策略可以阻止angular变化检测传入组件,这样每次变化检测不会进到你的组件里面来调用hello函数。
引入immutable.js的作用是为了更加方便的使用OnPush策略。
看下immutable.js的例子
const list1 = Immutable.List([ {a: 1}, {a: 2} ]); const list2 = list1.push({a: '3'}); console.log(list1 === list2); // false console.log(list1.get(0) === list2.get(0)); // true const list3 = list2.pop(); console.log(list1 === list3); // false const map1 = Immutable.Map({ a: 1, b: 2, c: 3 }); const map2 = map1.set('b', 50); console.log(map1 === map2); // false const map3 = map1.set('b', 2); console.log(map1 === map3); // true const map4 = map2.set('b', 2); console.log(map1 === map4); // false
这样在父组件里只需要如此写
export class AppComponent { ii = ''; list = List([{label: 'default'}]); add() { if (this.ii) { this.list = this.list.push({label: this.ii}); this.ii = ''; } } }
子组件HTML代码
<div> {{hello()}} </div> <ul *ngFor="let item of list"> <li>{{item.label}}</li> </ul>
不需要trackby,因为默认trackby就是比较元素相等,immutable.js数组里不变的元素就是相等的,少写一些代码啦。