Android Academy · บทเรียน

อธิบายการประกอบใหม่

เรียนรู้ว่า Compose อัปเดต UI อย่างไร

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

การจัดองค์ประกอบใหม่คืออะไร

การจัดองค์ประกอบใหม่ คือการที่ Compose เรียกใช้ฟังก์ชันคอมโพสเซเบิลของคุณอีกครั้งเพื่ออัปเดต UI เมื่อสถานะที่ฟังก์ชันอ่านเปลี่ยนแปลง นี่คือวิธีที่หน้าจอคงความสอดคล้องกับข้อมูลของคุณ

เกิดจากการอ่านสถานะ

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

ฉลาดและเลือกเฉพาะส่วน

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

การข้ามการทำงาน

หากอินพุตของคอมโพสเซเบิลไม่เปลี่ยนแปลง Compose สามารถ ข้ามการเรียกใช้คอมโพสเซเบิลนั้นทั้งหมดได้ ทำให้การจัดองค์ประกอบใหม่ใช้ทรัพยากรน้อย แม้ในหน้าจอที่ซับซ้อน

คอมโพสเซเบิลทำงานบ่อย

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

หลีกเลี่ยงผลข้างเคียง

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

// BAD: runs on every recomposition
@Composable
fun Bad() {
    saveToDatabase()
    Text("Hi")
}

ไม่ขึ้นกับลำดับ

คุณไม่สามารถพึ่งพาให้คอมโพสเซเบิลทำงานตามลำดับที่กำหนดหรือบนเธรดที่กำหนดได้ ให้ถือว่าการเรียกใช้แต่ละครั้งเป็นอิสระ ความยืดหยุ่นนี้ทำให้ Compose เพิ่มประสิทธิภาพได้อย่างมาก

การอ่านเทียบกับการไม่อ่าน

เฉพาะคอมโพสเซเบิลที่ อ่านสถานะเท่านั้นที่จะจัดองค์ประกอบใหม่เมื่อสถานะนั้นเปลี่ยน หาก Text ไม่เคยอ่าน count การเปลี่ยนแปลง count จะไม่กระทบ Text

@Composable
fun Demo() {
    var count by remember { mutableStateOf(0) }
    Text("Static")          // never recomposes from count
    Text("Count: $count")    // recomposes when count changes
    Button(onClick = { count++ }) { Text("+") }
}

หลีกเลี่ยงลูปการจัดองค์ประกอบใหม่

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

ให้ความรู้สึกเป็นอัตโนมัติ

จากมุมมองของคุณ การจัดองค์ประกอบใหม่เป็นสิ่งที่ เกิดขึ้นโดยอัตโนมัติ คุณประกาศ UI ให้เป็นฟังก์ชันของสถานะ เปลี่ยนสถานะในการเรียกกลับ แล้ว Compose จะจัดการเรียกใช้คอมโพสเซเบิลที่เหมาะสมอีกครั้ง

นำทุกอย่างมารวมกัน

ตัวนับนี้แสดงการจัดองค์ประกอบใหม่: การแตะจะเปลี่ยน count จากนั้น Compose จะเรียกใช้ Text ที่อ่านค่านี้อีกครั้ง และตัวเลขใหม่จะปรากฏขึ้น

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text(text = "Count: $count")
    }
}

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

Compose จะจัดองค์ประกอบคอมโพสเซเบิลใหม่เมื่อใด

ทบทวน

หัวใจสำคัญของการจัดองค์ประกอบใหม่:

การเปลี่ยนแปลงสถานะจะทำให้คอมโพสเซเบิลที่อ่านสถานะนั้นถูกเรียกใช้อีกครั้ง
กระบวนการนี้เลือกเฉพาะส่วน และสามารถข้ามคอมโพสเซเบิลที่ไม่เปลี่ยนแปลงได้
คอมโพสเซเบิลต้องไม่มีผลข้างเคียง และต้องเรียกใช้ซ้ำได้อย่างปลอดภัยในทุกลำดับ

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

บทเรียน “อธิบายการประกอบใหม่” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “อธิบายการประกอบใหม่”

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

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

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

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

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

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

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

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

← กลับไปที่ Android Academy