Svelte 3中是否存在一种机制,用于在渲染之前比较组件内部的道具更改?类似于React getDerivedStateFromProps。
<script>
export let color;
// Does anything like this exist in Svelte?
beforeUpdate((changes) => {
const same = changes.prev.color === changes.next.color
})
</script>
答案 0 :(得分:8)
如果只想在color
更改时执行一段代码,则可以使用反应式声明:
<script>
export let color;
$: {
console.log('color changed', color);
// will only get called when the `color` changed.
}
</script>
但是,如果您想同时使用当前值和先前值来执行那段代码,则可以执行以下操作:
<script>
export let color;
let prevColor;
$: {
console.log('currentColor:', color, 'prevColor:', prevColor);
prevColor = color;
}
</script>
答案 1 :(得分:3)
我实际上编写了一个包,它使用 Svelte Stores 为您提供了一个简单的界面,可以根据需要引用尽可能多的先前值。
<script>
export let color;
const [currentColor, previousColor] = usePrevious(color);
$: $currentColor = color;
</script>
{$previousColor} to {$currentColor}