Jetpack Compose Academy · บทเรียน

remember และ mutableStateOf

จัดเก็บสถานะที่คงอยู่ข้ามการประกอบใหม่

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

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

State คืออะไร

ใน Compose สถานะคือค่าใด ๆ ที่เปลี่ยนแปลงได้ตามเวลาและเป็นสิ่งที่ส่วนติดต่อผู้ใช้ของคุณสนใจ เช่น ตัวนับหรือชื่อที่พิมพ์เข้าไป 🙂

ตัวแปรทั่วไปใช้ไม่ได้

var ปกติภายใน Composable สามารถเปลี่ยนค่าได้ แต่ Compose จะไม่สังเกตเห็น ดังนั้นหน้าจอจึงยังคงเหมือนเดิมทุกประการ

var count = 0
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

ทำความรู้จัก mutableStateOf

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

val count = mutableStateOf(0)
count.value = count.value + 1

ระบบติดตามการอ่านสถานะ

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

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

Compose จะเรียกใช้ฟังก์ชันของคุณใหม่ทุกครั้งที่วาดหน้าจอ หากสร้าง mutableStateOf ใหม่ทุกครั้ง ค่าจะกลับเป็นศูนย์และงานที่ทำไว้จะหายไป

remember ช่วยแก้ปัญหา

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

val count = remember { mutableStateOf(0) }

คู่หูคลาสสิก

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

โค้ดสะอาดขึ้นด้วย by

ใช้ตัวแทนค่า by เพื่ออ่านและเขียนค่าโดยตรง ทำให้ไม่ต้องเขียน .value ที่ดูยุ่งยากซ้ำทุกครั้ง

var count by remember { mutableStateOf(0) }
count++

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

อ่าน จำนวน ใน Text และเปลี่ยนค่าใน onClick การแตะปุ่มจะอัปเดตตัวเลข และ Compose จะวาดเฉพาะ Text นั้นใหม่

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Tapped " + count)
}

สถานะเก็บค่าได้ทุกชนิด

สถานะไม่ได้มีไว้เก็บเฉพาะตัวเลขเท่านั้น คุณสามารถเก็บ String, Boolean หรือคลาสข้อมูลทั้งคลาสได้ และ Compose ยังคงติดตามการเปลี่ยนแปลงทุกครั้ง

var name by remember { mutableStateOf("") }

เก็บสถานะไว้ภายในก่อน

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

ตรวจสอบสั้น ๆ

เหตุใดเราจึงห่อ mutableStateOf ไว้ใน remember

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

คุณได้เรียนรู้ว่า remember ร่วมกับ mutableStateOf จะให้สถานะที่คงอยู่ข้ามการจัดองค์ประกอบใหม่และอัปเดตส่วนติดต่อผู้ใช้โดยอัตโนมัติ เริ่มต้นได้ดีมากครับ/ค่ะ! 🎉

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

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

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

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

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “remember และ mutableStateOf” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “remember และ mutableStateOf”

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

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

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

บทเรียน “remember และ mutableStateOf” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Jetpack Compose Academy