Jetpack Compose Academy · บทเรียน

เลื่อนการอ่านสถานะออกไป

อ่านสถานะช้าลงเพื่อลดขอบเขตการประกอบใหม่

บทเรียน 3 จาก 413 ขั้นตอน

เลื่อนการอ่านสถานะออกไป เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

การอ่านสถานะมีต้นทุน

ทุกจุดที่คุณ อ่านค่าของสถานะ Compose จะกลายเป็นผู้สมัครรับข้อมูล เมื่อสถานะนั้นเปลี่ยนแปลง ผู้อ่านทุกจุดจะจัดองค์ประกอบใหม่

ขอบเขตการจัดองค์ประกอบใหม่

Composable ที่ครอบอยู่ใกล้ที่สุดและอ่านสถานะ จะเป็น ขอบเขตการจัดองค์ประกอบใหม่ของสถานะนั้น หากอ่านในระดับบน งานจำนวนมากจะถูกวาดใหม่พร้อมกัน

อ่านให้ลึก วาดใหม่น้อยลง

หากคุณอ่านสถานะในระดับที่ ลึกกว่า จะมีเพียง Composable ขนาดเล็กนั้นที่จัดองค์ประกอบใหม่ การเลื่อนจุดอ่านลงไปช่วยลดปริมาณงาน

เทคนิคลัมบ์ดา

ส่ง ลัมบ์ดาที่คืนค่าค่านั้นแทนการส่งค่าด้วยตัวเอง การอ่านค่าจะเกิดขึ้นภายหลังภายในขอบเขตที่แคบลง

Box(Modifier.offset { IntOffset(0, scroll.value) })

ตัวอย่าง Modifier.offset

ลัมบ์ดา offset จะอ่านตำแหน่งการเลื่อนระหว่างการจัดวาง ไม่ใช่ระหว่างการจัดองค์ประกอบ ดังนั้นการทำให้เคลื่อนไหวจึงไม่ทำให้เกิดการจัดองค์ประกอบใหม่เลย

เลื่อนการคำนวณด้วย derivedStateOf

derivedStateOf จะคำนวณใหม่เฉพาะเมื่อผลลัพธ์เปลี่ยนแปลงจริง ดังนั้นแหล่งข้อมูลที่เปลี่ยนบ่อยจึงอัปเดตผู้อ่านน้อยลงมาก

val showButton by remember { derivedStateOf { scroll.value > 100 } }

ลดความเปลี่ยนแปลงที่ไม่จำเป็น

หากไม่ใช้ derivedStateOf ปุ่มที่อ่านค่าการเลื่อนดิบจะวาดใหม่ทุกพิกเซล แต่เมื่อใช้แล้ว ปุ่มจะจัดองค์ประกอบใหม่เฉพาะเมื่อค่า บูลีนเปลี่ยน

หลีกเลี่ยงการอ่านในส่วนแม่

การอ่านสถานะใน ส่วนแม่เพียงเพื่อส่งต่อ จะบังคับให้ส่วนแม่และส่วนพี่น้องทั้งหมดจัดองค์ประกอบใหม่ ให้ส่งออบเจ็กต์สถานะแทน

ส่งสถานะ ไม่ใช่ค่า

ส่งออบเจ็กต์ State ทั้งหมดให้ส่วนลูก แล้วให้ส่วนลูกอ่านค่าภายในตัวเอง ส่วนแม่จะยังคงเสถียร ขณะที่ส่วนลูกอัปเดตเพียงลำพัง

รายการแบบ Lazy ชอบการเลื่อนการอ่าน

ใน LazyColumn การเลื่อนการอ่านช่วยป้องกันไม่ให้อัปเดต การเลื่อนทำให้เนื้อหารายการทำงานซ้ำ รายการยาว ๆ จึงยังคงลื่นไหลมาก

อ่านช้า ทำงานน้อยลง

หลักสำคัญนั้นง่ายมาก: เลื่อนเวลาที่อ่านสถานะออกไป จนกว่าจะถึงขอบเขตที่เล็กที่สุดซึ่งจำเป็นต้องใช้สถานะนั้น

ตรวจสอบอย่างรวดเร็ว

ยืนยันความเข้าใจเรื่องการเลื่อนการอ่าน

สรุป: เลื่อนการอ่านออกไป

อ่านสถานะในขอบเขตที่ เล็กที่สุด ใช้ตัวปรับแต่งแบบลัมบ์ดาและ derivedStateOf และส่งออบเจ็กต์ State ลงไป เพื่อให้การวาดใหม่มีขนาดเล็กที่สุด ✅

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120

คำถามที่พบบ่อย

บทเรียน “เลื่อนการอ่านสถานะออกไป” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เลื่อนการอ่านสถานะออกไป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เลื่อนการอ่านสถานะออกไป”

อ่านสถานะช้าลงเพื่อลดขอบเขตการประกอบใหม่ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เลื่อนการอ่านสถานะออกไป” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พารามิเตอร์เสถียรกับไม่เสถียร
  2. การข้าม @Stable และ @Immutable
  3. เลื่อนการอ่านสถานะออกไป
  4. ตัวตรวจสอบเลย์เอาต์และจำนวนการประกอบใหม่
← กลับไปที่ Jetpack Compose Academy