msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

docs: move some `$state` information around

Browse Source
pull/15969/head
Rich Harris 4 months ago committed by GitHub
parent de8094910d
commit 91fac6f6bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File

8
documentation/docs/02-runes/02-$state.md
Unescape View File

@ -20,8 +20,6 @@ Unlike other frameworks you may have encountered, there is no API for interactin
If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates. If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
> [!NOTE] Class instances are not proxied. You can create [reactive state fields](#Classes) on classes that you define. Svelte provides reactive implementations of built-ins like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this... State is proxified recursively until Svelte finds something other than an array or simple object. In a case like this...
```js ```js
@ -67,7 +65,7 @@ todos[0].done = !todos[0].done;
### Classes ### Classes
You can also use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`: Class instances are not proxied. Instead, you can use `$state` in class fields (whether public or private), or as the first assignment to a property immediately inside the `constructor`:
```js ```js
// @errors: 7006 2554 // @errors: 7006 2554
@ -121,6 +119,8 @@ class Todo {
} }
``` ```
> Svelte provides reactive implementations of built-in classes like `Set` and `Map` that can be imported from [`svelte/reactivity`](svelte-reactivity).
## `$state.raw` ## `$state.raw`
In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`. In cases where you don't want objects and arrays to be deeply reactive you can use `$state.raw`.
@ -145,6 +145,8 @@ person = {
This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects). This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
As with `$state`, you can declare class fields using `$state.raw`.
## `$state.snapshot` ## `$state.snapshot`
To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`: To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:

Write Preview
Loading…
Cancel
Save