Skip to main content
Bases de Svelte
Introduction
Réactivité
Props
Logique
Évènements
Liaisons
Classes et styles
Actions
Transitions
Svelte avancé
Réactivité avancée
Réutiliser du contenu
Mouvements
Liaisons avancées
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Svelte avancé Réactivité avancée État brut

Dans les exercices précédents, nous avons vu que l’état est profondément réactif — si (par exemple) vous changez une propriété d’un objet, ou ajoutez un élément dans un tableau, cela provoquera la mise à jour de l’interface. Ceci fonctionne en créant un proxy qui intercepte les lectures et écritures.

Parfois, ce n’est pas ce que vous souhaitez. Si vous ne changez pas les propriétés individuelles, ou s’il est important de maintenir l’égalité de référence, vous pouvez alors utiliser un état brut (raw state) à la place.

Dans cet exemple, nous avons un graphique montrant le cours de l’action Svelte augmentant doucement mais sûrement. Nous voulons que le graphique se mette à jour lorsque de nouvelles données arrivent, ce que nous pouvons faire en transformant data en état...

App
let data = $state(poll());

... mais il n’y a pas besoin de le rendre profondément réactif alors qu’il sera entièrement réécrit quelques millisecondes plus tard. À la place, nous pouvons utiliser $state.raw :

App
let data = $state.raw(poll());

Muter un état brut n’aura aucun effet direct. En général, muter un état non réactif est fortement déconseillé

Modifier cette page sur Github

précédent suivant
Blocs key
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script>
	import { scale } from './utils.js';
	import { poll } from './data.js';
 
	let data = poll();
 
	let w = $state(1);
	let h = $state(1);
 
	const min = $derived(Math.min(...data) - 5);
	const max = $derived(Math.max(...data) + 5);
	const x = $derived(scale([0, data.length], [0, w]));
	const y = $derived(scale([min, max], [h, 0]));
 
	const ticks = $derived.by(() => {
		const result = [];
		let n = 10 * Math.ceil(min / 10);
		while (n < max) {
			result.push(n);
			n += 10;
		}
		return result;
	});
 
	$effect(() => {
		const interval = setInterval(() => {
			data = poll();
		}, 200);
 
		return () => {
			clearInterval(interval);
		};
	});
</script>
 
<div class="outer">
	<svg width={w} height={h} bind:clientWidth={w} bind:clientHeight={h}>
		<line y1={h} y2={h} x2={w} />
 
		{#each ticks as tick}
			<g class="tick" transform="translate(0,{y(tick)})">
				<line x2={w} />
				<text x={-5}>{tick}</text>
			</g>
		{/each}
 
		<polyline points={data.map((d, i) => [x(i), y(d)]).join(' ')} />
 
		<text x={10} y={10} font-size={36}>$SVLT</text>
	</svg>
</div>
 
<style>
	.outer {
		width: 100%;
		height: 100%;
		padding: 2em;
		box-sizing: border-box;
	}
 
	svg {
		width: 100%;
		height: 100%;
		overflow: visible;
	}
 
	polyline {
		fill: none;
		stroke: #ff3e00;
		stroke-width: 2;
		stroke-linejoin: round;
		stroke-linecap: round;
	}
 
	line {
		stroke: #aaa;
	}
 
	.tick {
		stroke-dasharray: 2 2;
 
		text {
			text-anchor: end;
			dominant-baseline: middle;
		}
	}
</style>