signals

สัญญาณ

สัญญาณเป็นห้องสมุดการจัดการสถานะที่มีสองเป้าหมายหลัก:

1. ทำให้ง่ายที่สุดเท่าที่จะเป็นไปได้ในการเขียนตรรกะทางธุรกิจสำหรับแอพขนาดเล็กถึงแอพที่ซับซ้อน ไม่ว่าตรรกะของคุณจะซับซ้อนแค่ไหนการอัปเดตแอปของคุณควรอยู่อย่างรวดเร็วโดยไม่ต้องคิด สัญญาณเพิ่มประสิทธิภาพการอัปเดตสถานะโดยอัตโนมัติเบื้องหลังเพื่อเรียกการอัปเดตน้อยที่สุดที่จำเป็น พวกเขาขี้เกียจโดยค่าเริ่มต้นและข้ามสัญญาณโดยอัตโนมัติที่ไม่มีใครฟัง
2. รวมเข้ากับเฟรมเวิร์กราวกับว่าพวกเขาเป็นดั้งเดิมในตัว คุณไม่จำเป็นต้องมีตัวเลือกฟังก์ชั่นห่อหุ้มหรือสิ่งอื่นใด สัญญาณสามารถเข้าถึงได้โดยตรงและส่วนประกอบของคุณจะแสดงผลใหม่โดยอัตโนมัติเมื่อค่าของสัญญาณเปลี่ยนไป

อ่านโพสต์ประกาศเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับสัญญาณปัญหาที่แก้ปัญหาและวิธีการเป็นอย่างไร

การติดตั้ง:

 # 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

• คู่มือ / API
  • signal(initialValue)
    • signal.peek()
  • computed(fn)
  • effect(fn)
  • batch(fn)
  • untracked(fn)
• การบูรณาการก่อน
  • ตะขอ
  • การเพิ่มประสิทธิภาพการแสดงผล
    • การเพิ่มประสิทธิภาพแอตทริบิวต์ (การทดลอง)
• ตอบสนองการบูรณาการ
  • ตะขอ
  • การเพิ่มประสิทธิภาพการแสดงผล
• ใบอนุญาต

คู่มือ / API

ไลบรารีสัญญาณเปิดเผยสี่ฟังก์ชั่นซึ่งเป็นหน่วยการสร้างเพื่อสร้างแบบจำลองตรรกะทางธุรกิจใด ๆ ที่คุณนึกถึง

signal(initialValue)

ฟังก์ชั่น signal สร้างสัญญาณใหม่ สัญญาณเป็นคอนเทนเนอร์สำหรับค่าที่สามารถเปลี่ยนแปลงได้ตลอดเวลา คุณสามารถอ่านค่าของสัญญาณหรือสมัครรับการอัปเดตค่าโดยเข้าถึงคุณสมบัติ .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 ;

การเขียนไปยังสัญญาณทำได้โดยการตั้งค่าคุณสมบัติ. .value การเปลี่ยนค่าของสัญญาณจะอัปเดตทุกครั้งที่คำนวณและเอฟเฟกต์ที่ขึ้นอยู่กับสัญญาณนั้นทำให้มั่นใจได้ว่าสถานะแอปของคุณจะสอดคล้องกันเสมอ

signal.peek()

ในอินสแตนซ์ที่หายากที่คุณมีเอฟเฟกต์ที่ควรเขียนไปยังสัญญาณอื่นตามค่าก่อนหน้า แต่คุณ ไม่ ต้องการให้เอฟเฟกต์สมัครรับสัญญาณนั้นคุณสามารถอ่านค่าก่อนหน้าของสัญญาณผ่านสัญญาณผ่าน 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 ;
} ) ;

โปรดทราบว่าคุณควรใช้ signal.peek() หากคุณต้องการมันจริงๆ การอ่านค่าของสัญญาณผ่าน signal.value เป็นวิธีที่ต้องการในสถานการณ์ส่วนใหญ่

computed(fn)

ข้อมูลมักจะได้มาจากข้อมูลอื่น ๆ ที่มีอยู่ ฟังก์ชั่น computed ช่วยให้คุณรวมค่าของสัญญาณหลายสัญญาณเข้ากับสัญญาณใหม่ที่สามารถตอบสนองหรือใช้โดยคอมพิวเตอร์เพิ่มเติม เมื่อสัญญาณที่เข้าถึงได้จากภายในการเปลี่ยนแปลงการโทรกลับที่คำนวณได้การเรียกกลับที่คำนวณจะถูกดำเนินการอีกครั้งและค่าส่งคืนใหม่จะกลายเป็นค่าของสัญญาณที่คำนวณได้

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

สัญญาณใด ๆ ที่เข้าถึงได้ภายในฟังก์ชั่นการโทรกลับของ computed จะถูกสมัครโดยอัตโนมัติและติดตามว่าเป็นการพึ่งพาสัญญาณที่คำนวณได้

effect(fn)

ฟังก์ชั่น effect เป็นชิ้นสุดท้ายที่ทำให้ทุกอย่างมีปฏิกิริยา เมื่อคุณเข้าถึงสัญญาณภายในฟังก์ชั่นการโทรกลับสัญญาณนั้นและทุกการพึ่งพาสัญญาณดังกล่าวจะถูกเปิดใช้งานและสมัครรับข้อมูล ในเรื่องนั้นมันคล้ายกับ computed(fn) มาก โดยค่าเริ่มต้นการอัปเดตทั้งหมดจะขี้เกียจดังนั้นจะไม่มีการอัปเดตจนกว่าคุณจะเข้าถึง effect สัญญาณภายใน

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

คุณสามารถทำลายเอฟเฟกต์และยกเลิกการสมัครจากสัญญาณทั้งหมดที่สมัครโดยเรียกฟังก์ชันที่ส่งคืน

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

การโทรกลับเอฟเฟกต์อาจส่งคืนฟังก์ชั่นการล้างข้อมูล ฟังก์ชั่นการล้างข้อมูลจะทำงานหนึ่งครั้งไม่ว่าจะเป็นการเรียกคืนเอฟเฟกต์ถัดไป หรือ เมื่อมีการกำจัดเอฟเฟกต์แล้วแต่จำนวนใดจะเกิดขึ้นก่อน

 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)

ฟังก์ชั่น batch ช่วยให้คุณสามารถรวมสัญญาณหลายรายการลงในการอัปเดตเดียวที่ทริกเกอร์ในตอนท้ายเมื่อการโทรกลับเสร็จสมบูรณ์

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

เมื่อคุณเข้าถึงสัญญาณที่คุณเขียนถึงก่อนหน้านี้ภายในการโทรกลับหรือเข้าถึงสัญญาณที่คำนวณได้ซึ่งไม่ถูกต้องโดยสัญญาณอื่นเราจะอัปเดตการพึ่งพาที่จำเป็นเพื่อรับค่าปัจจุบันสำหรับสัญญาณที่คุณอ่าน สัญญาณที่ไม่ถูกต้องอื่น ๆ ทั้งหมดจะอัปเดตเมื่อสิ้นสุดฟังก์ชั่นการโทรกลับ

 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

แบทช์สามารถซ้อนกันได้และการอัปเดตจะถูกล้างออกเมื่อการโทรแบบด้านนอกสุดจะเสร็จสมบูรณ์

 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)

ในกรณีที่คุณได้รับการโทรกลับที่สามารถอ่านสัญญาณบางอย่างได้ แต่คุณไม่ต้องการสมัครสมาชิกคุณสามารถใช้ untracked เพื่อป้องกันการสมัครสมาชิกใด ๆ ที่เกิดขึ้น

 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 ดูไฟล์ใบอนุญาต