响应式数据
当组件上的 props
或
state
更改时,模板组件会更新。为了性能和简单性,Stencil 只比较引用的变化,并不会在数组或对象内部的数据发生变化时重新渲染。
渲染方法
当组件由于状态更改( props 或 state 更改)而更新时,会安排运行 render()
方法。
监听装饰器
当用户更新一个属性时,Watch
将触发它所附加的方法,并将
prop
的新值和旧值一起传递给该方法。 Watch
可用于监听 props
并对其进行处理。当组件最初加载时,Watch
装饰器不会触发。
import { Prop, Watch } from '@stencil/core';
export class LoadingIndicator {
@Prop() activated: boolean;
@Watch('activated')
watchHandler(newValue: boolean, oldValue: boolean) {
console.log('The new value of activated is: ', newValue);
}
}
处理数组和对象
要更新数组或对象数据,请使用以下方式,这些技术正迅速成为现代 JavaScript 工具箱的核心部分。
更新数组
对于数组,标准的数组操作,例如 push()
和
unshift()
不会触发组件更新。与之相反,应使用非可变数组运算符,因为它们返回新数组。其中包括
map()
和
filter()
,以及 ES6 扩展运算符语法。
例如,要将新数据添加到数组,需要使用现有值和新值创建一个新数组:
@State() items: string[];
// 当前数组
this.items = ['ionic', 'stencil', 'webcomponents'];
// 更新数组
this.items = [
...this.items,
'awesomeness'
]
...this.items
语法是 JavaScript 的一个相对较新的功能,它可以在适当的位置“扩展”给定的对象。阅读有关 Spread 运算符的更多信息
此处。
更新对象
扩展运算符也可用于更新对象。与数组一样,改变对象不会触发 Stencil 中的视图更新,但返回新的对象可以。下面是一个例子:
@State() myCoolObject;
// 当前对象
this.myCoolObject = {first: '1', second: '2'}
// 更新对象
this.myCoolObject = { ...myCoolObject, third: '3' }
Contributors
Thanks for your interest!
We just need some basic information so we can send the guide your way.