signals
1.0.0
Signals es una biblioteca de gestión estatal de rendimiento con dos objetivos principales:
Lea la publicación del anuncio para obtener más información sobre qué problemas se resuelven señales y cómo surgió.
# Just the core library
npm install @preact/signals-core
# If you're using Preact
npm install @preact/signals
# If you're using React
npm install @preact/signals-react
# If you're using Svelte
npm install @preact/signals-coresignal(initialValue)signal.peek()computed(fn)effect(fn)batch(fn)untracked(fn)La biblioteca de señales expone cuatro funciones que son los componentes básicos para modelar cualquier lógica comercial que se le ocurra.
signal(initialValue) La función signal crea una nueva señal. Una señal es un contenedor para un valor que puede cambiar con el tiempo. Puede leer el valor de una señal o suscribirse a actualizaciones de valor accediendo a su propiedad .value .
import { signal } from "@preact/signals-core" ;
const counter = signal ( 0 ) ;
// Read value from signal, logs: 0
console . log ( counter . value ) ;
// Write to a signal
counter . value = 1 ; Escribir a una señal se realiza estableciendo su propiedad .value . Cambiar el valor de una señal actualiza sincrónicamente cada calculado y efecto que depende de esa señal, asegurar que el estado de su aplicación sea siempre consistente.
signal.peek() En el raro caso de que tiene un efecto que debe escribir en otra señal en función del valor anterior, pero no desea que el efecto se suscriba a esa señal, puede leer el valor anterior de una señales a través de signal.peek() .
const counter = signal ( 0 ) ;
const effectCount = signal ( 0 ) ;
effect ( ( ) => {
console . log ( counter . value ) ;
// Whenever this effect is triggered, increase `effectCount`.
// But we don't want this signal to react to `effectCount`
effectCount . value = effectCount . peek ( ) + 1 ;
} ) ; Tenga en cuenta que solo debe usar signal.peek() si realmente lo necesita. Leer el valor de una señal a través de signal.value El valor es la forma preferida en la mayoría de los escenarios.
computed(fn) Los datos a menudo se derivan de otras piezas de datos existentes. La función computed le permite combinar los valores de múltiples señales en una nueva señal que se puede reaccionar o incluso usar por calculados adicionales. Cuando las señales accedidas desde dentro de un cambio de devolución de llamada calculada, la devolución de llamada calculada se vuelve a explicar y su nuevo valor de retorno se convierte en el valor de la señal calculada.
import { signal , computed } from "@preact/signals-core" ;
const name = signal ( "Jane" ) ;
const surname = signal ( "Doe" ) ;
const fullName = computed ( ( ) => name . value + " " + surname . value ) ;
// Logs: "Jane Doe"
console . log ( fullName . value ) ;
// Updates flow through computed, but only if someone
// subscribes to it. More on that later.
name . value = "John" ;
// Logs: "John Doe"
console . log ( fullName . value ) ; Cualquier señal a la que se acceda dentro de la función de devolución de llamada computed se suscribirá y rastreará automáticamente como una dependencia de la señal calculada.
effect(fn) La función effect es la última pieza que hace que todo sea reactivo. Cuando accede a una señal dentro de su función de devolución de llamada, esa señal y cada dependencia de dicha señal se activarán y se suscribirán. En ese sentido, es muy similar al computed(fn) . Por defecto, todas las actualizaciones son perezosas, por lo que nada se actualizará hasta que acceda a un effect de señal interna.
import { signal , computed , effect } from "@preact/signals-core" ;
const name = signal ( "Jane" ) ;
const surname = signal ( "Doe" ) ;
const fullName = computed ( ( ) => name . value + " " + surname . value ) ;
// Logs: "Jane Doe"
effect ( ( ) => console . log ( fullName . value ) ) ;
// Updating one of its dependencies will automatically trigger
// the effect above, and will print "John Doe" to the console.
name . value = "John" ;Puede destruir un efecto y cancelar la suscripción de todas las señales a las que se suscribió, llamando a la función devuelta.
import { signal , computed , effect } from "@preact/signals-core" ;
const name = signal ( "Jane" ) ;
const surname = signal ( "Doe" ) ;
const fullName = computed ( ( ) => name . value + " " + surname . value ) ;
// Logs: "Jane Doe"
const dispose = effect ( ( ) => console . log ( fullName . value ) ) ;
// Destroy effect and subscriptions
dispose ( ) ;
// Update does nothing, because no one is subscribed anymore.
// Even the computed `fullName` signal won't change, because it knows
// that no one listens to it.
surname . value = "Doe 2" ;La devolución de llamada del efecto puede devolver una función de limpieza. La función de limpieza se ejecuta una vez, ya sea cuando la devolución de llamada del efecto se llama o cuando el efecto se elimina, lo que ocurra primero.
import { signal , effect } from "@preact/signals-core" ;
const count = signal ( 0 ) ;
const dispose = effect ( ( ) => {
const c = count . value ;
return ( ) => console . log ( `cleanup ${ c } ` ) ;
} ) ;
// Logs: cleanup 0
count . value = 1 ;
// Logs: cleanup 1
dispose ( ) ;batch(fn) La función batch le permite combinar múltiples escrituras de señal en una sola actualización que se activa al final cuando se completa la devolución de llamada.
import { signal , computed , effect , batch } from "@preact/signals-core" ;
const name = signal ( "Jane" ) ;
const surname = signal ( "Doe" ) ;
const fullName = computed ( ( ) => name . value + " " + surname . value ) ;
// Logs: "Jane Doe"
effect ( ( ) => console . log ( fullName . value ) ) ;
// Combines both signal writes into one update. Once the callback
// returns the `effect` will trigger and we'll log "Foo Bar"
batch ( ( ) => {
name . value = "Foo" ;
surname . value = "Bar" ;
} ) ;Cuando accede a una señal que escribió anteriormente dentro de la devolución de llamada, o accede a una señal calculada que fue invalida por otra señal, solo actualizaremos las dependencias necesarias para obtener el valor actual de la señal que lee. Todas las demás señales invalidadas se actualizarán al final de la función de devolución de llamada.
import { signal , computed , effect , batch } from "@preact/signals-core" ;
const counter = signal ( 0 ) ;
const double = computed ( ( ) => counter . value * 2 ) ;
const triple = computed ( ( ) => counter . value * 3 ) ;
effect ( ( ) => console . log ( double . value , triple . value ) ) ;
batch ( ( ) => {
counter . value = 1 ;
// Logs: 2, despite being inside batch, but `triple`
// will only update once the callback is complete
console . log ( double . value ) ;
} ) ;
// Now we reached the end of the batch and call the effectLos lotes se pueden anidar y las actualizaciones se descargarán cuando se complete la llamada de lotes más externa.
import { signal , computed , effect , batch } from "@preact/signals-core" ;
const counter = signal ( 0 ) ;
effect ( ( ) => console . log ( counter . value ) ) ;
batch ( ( ) => {
batch ( ( ) => {
// Signal is invalidated, but update is not flushed because
// we're still inside another batch
counter . value = 1 ;
} ) ;
// Still not updated...
} ) ;
// Now the callback completed and we'll trigger the effect.untracked(fn) En caso de que reciba una devolución de llamada que pueda leer algunas señales, pero no desea suscribirse a ellas, puede usar untracked para evitar que ocurran suscripciones.
const counter = signal ( 0 ) ;
const effectCount = signal ( 0 ) ;
const fn = ( ) => effectCount . value + 1 ;
effect ( ( ) => {
console . log ( counter . value ) ;
// Whenever this effect is triggered, run `fn` that gives new value
effectCount . value = untracked ( fn ) ;
} ) ; MIT , vea el archivo de licencia.
