在StencilJS中,如果希望在不可变的Props发生变化时重新渲染组件,可以使用@Watch
装饰器来监听Props的变化。下面是一个示例代码:
import { Component, h, Prop, Watch } from '@stencil/core';
@Component({
tag: 'my-component',
shadow: true
})
export class MyComponent {
@Prop() name: string;
@Watch('name')
nameChanged(newValue: string, oldValue: string) {
if (newValue !== oldValue) {
// Props发生变化时的处理逻辑
console.log('Props changed:', newValue);
// 重新渲染组件
this.render();
}
}
render() {
return (
Hello, {this.name}!
);
}
}
在上面的示例中,我们定义了一个name
属性,并在nameChanged
方法上使用了@Watch('name')
装饰器来监听name
属性的变化。当name
属性发生变化时,nameChanged
方法会被调用,我们可以在这个方法中实现Props变化时的处理逻辑,并通过调用this.render()
方法来重新渲染组件。
这样,当不可变的Props发生变化时,组件会重新渲染,从而更新视图。
上一篇:不可变的数据存在循环依赖关系
下一篇:不可变的协变集合,具有唯一性