signals

Sinyal

Sinyal adalah perpustakaan manajemen negara bagian dengan dua tujuan utama:

1. Buat semudah mungkin untuk menulis logika bisnis untuk aplikasi kecil hingga kompleks. Tidak peduli seberapa rumit logika Anda, pembaruan aplikasi Anda harus tetap cepat tanpa Anda perlu memikirkannya. Sinyal secara otomatis mengoptimalkan pembaruan status di belakang layar untuk memicu pembaruan paling sedikit yang diperlukan. Mereka malas secara default dan secara otomatis melewatkan sinyal yang tidak ada yang mendengarkan.
2. Integrasi ke dalam kerangka kerja seolah-olah mereka adalah primitif bawaan. Anda tidak memerlukan pemilih, fungsi pembungkus, atau apa pun. Sinyal dapat diakses secara langsung dan komponen Anda akan secara otomatis membuat ulang ketika nilai sinyal berubah.

Baca posting pengumuman untuk mempelajari lebih lanjut tentang masalah yang diselesaikan oleh sinyal dan bagaimana keadaannya.

Instalasi:

 # 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-core

• Panduan / API
  • signal(initialValue)
    • signal.peek()
  • computed(fn)
  • effect(fn)
  • batch(fn)
  • untracked(fn)
• Integrasi preact
  • Kait
  • Rendering optimisasi
    • Optimasi atribut (eksperimental)
• Bereaksi integrasi
  • Kait
  • Rendering optimisasi
• Lisensi

Panduan / API

Perpustakaan Sinyal memaparkan empat fungsi yang merupakan blok bangunan untuk memodelkan logika bisnis apa pun yang dapat Anda pikirkan.

signal(initialValue)

Fungsi signal menciptakan sinyal baru. Sinyal adalah wadah untuk nilai yang dapat berubah seiring waktu. Anda dapat membaca nilai sinyal atau berlangganan pembaruan nilai dengan mengakses properti .value -nya.

 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 ;

Menulis ke sinyal dilakukan dengan mengatur properti .value -nya. Mengubah nilai sinyal secara sinkron memperbarui setiap yang dihitung dan efek yang tergantung pada sinyal itu, memastikan status aplikasi Anda selalu konsisten.

signal.peek()

Dalam contoh yang jarang bahwa Anda memiliki efek yang harus menulis ke sinyal lain berdasarkan nilai sebelumnya, tetapi Anda tidak ingin efeknya berlangganan sinyal itu, Anda dapat membaca nilai sinyal sebelumnya melalui 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 ;
} ) ;

Perhatikan bahwa Anda hanya harus menggunakan signal.peek() jika Anda benar -benar membutuhkannya. Membaca nilai sinyal melalui signal.value adalah cara yang disukai dalam sebagian besar skenario.

computed(fn)

Data sering berasal dari bagian lain dari data yang ada. Fungsi computed memungkinkan Anda menggabungkan nilai -nilai beberapa sinyal menjadi sinyal baru yang dapat bereaksi, atau bahkan digunakan oleh tambahan yang dihitung. Ketika sinyal yang diakses dari dalam perubahan panggilan balik yang dihitung, panggilan balik yang dihitung dieksekusi ulang dan nilai pengembalian yang baru menjadi nilai sinyal yang dihitung.

 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 ) ;

Sinyal apa pun yang diakses di dalam fungsi panggilan balik yang computed akan secara otomatis berlangganan dan dilacak sebagai ketergantungan dari sinyal yang dihitung.

effect(fn)

Fungsi effect adalah bagian terakhir yang membuat segalanya reaktif. Ketika Anda mengakses sinyal di dalam fungsi panggilan baliknya, sinyal dan setiap ketergantungan sinyal tersebut akan diaktifkan dan berlangganan. Dalam hal itu sangat mirip dengan computed(fn) . Secara default semua pembaruan malas, jadi tidak ada yang akan memperbarui sampai Anda mengakses effect sinyal di dalamnya.

 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" ;

Anda dapat menghancurkan efek dan berhenti berlangganan dari semua sinyal yang berlangganan, dengan memanggil fungsi yang dikembalikan.

 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" ;

Efek panggilan balik dapat mengembalikan fungsi pembersihan. Fungsi pembersihan dijalankan sekali, baik ketika callback efek dipanggil berikutnya atau ketika efek dibuang, mana yang terjadi terlebih dahulu.

 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)

Fungsi batch memungkinkan Anda untuk menggabungkan beberapa sinyal menulis menjadi satu pembaruan tunggal yang dipicu pada akhirnya ketika panggilan balik selesai.

 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" ;
} ) ;

Ketika Anda mengakses sinyal yang Anda tulis sebelumnya di dalam panggilan balik, atau mengakses sinyal yang dihitung yang dibatalkan oleh sinyal lain, kami hanya akan memperbarui dependensi yang diperlukan untuk mendapatkan nilai saat ini untuk sinyal yang Anda baca. Semua sinyal yang tidak valid lainnya akan diperbarui di akhir fungsi callback.

 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 effect

Batch dapat bersarang dan pembaruan akan disiram ketika panggilan batch terluar selesai.

 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)

Jika Anda menerima panggilan balik yang dapat membaca beberapa sinyal, tetapi Anda tidak ingin berlangganan mereka, Anda dapat menggunakan untracked untuk mencegah langganan terjadi.

 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 ) ;
} ) ; 

Lisensi

MIT , lihat file lisensi.