Android Academy · บทเรียน

การยกสถานะขึ้น

ยกสถานะขึ้นเพื่อสร้าง composable ที่นำกลับมาใช้ซ้ำได้

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

การยกสถานะขึ้นคืออะไร

การยกสถานะขึ้น หมายถึงการย้ายสถานะ ขึ้นออกจากคอมโพสเซเบิลไปยังผู้เรียกใช้ คอมโพสเซเบิลจะกลายเป็นแบบ ไม่มีสถานะ โดยรับค่าและรายงานการเปลี่ยนแปลงเท่านั้น

มีสถานะเทียบกับไม่มีสถานะ

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

รูปแบบ value + onValueChange

รูปแบบมาตรฐานของการยกสถานะขึ้นมีพารามิเตอร์สองรายการ: value (สถานะปัจจุบันที่ส่งลงมา) และแลมบ์ดา onValueChange (เหตุการณ์ที่ส่งกลับขึ้นไป)

@Composable
fun NameField(value: String, onValueChange: (String) -> Unit) {
    TextField(value = value, onValueChange = onValueChange)
}

ก่อนยกสถานะขึ้น

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

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }
    TextField(value = name, onValueChange = { name = it })
}

หลังยกสถานะขึ้น

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

@Composable
fun Parent() {
    var name by remember { mutableStateOf("") }
    NameField(value = name, onValueChange = { name = it })
}

ไหลลงและส่งขึ้น

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

เหตุใดจึงต้องยกสถานะขึ้น

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

ควรยกสถานะขึ้นที่ใด

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

ตัวอย่างการใช้สถานะร่วมกัน

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

@Composable
fun Editor() {
    var text by remember { mutableStateOf("") }
    Column {
        TextField(value = text, onValueChange = { text = it })
        Text(text = "Preview: $text")
    }
}

แบบไม่มีสถานะนำกลับมาใช้ซ้ำได้

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

@Preview
@Composable
fun NameFieldPreview() {
    NameField(value = "Sample", onValueChange = {})
}

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

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

@Composable
fun CounterButton(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text(text = "Count: $count")
    }
}

@Composable
fun Screen() {
    var count by remember { mutableStateOf(0) }
    CounterButton(count = count, onIncrement = { count++ })
}

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

ในการยกสถานะขึ้น โดยทั่วไปคอมโพสเซเบิลที่ไม่มีสถานะจะเปิดเผยสิ่งใดสองอย่าง

ทบทวน

การยกสถานะขึ้น:

ย้ายสถานะขึ้นไปยังผู้เรียกใช้ และทำให้คอมโพสเซเบิลลูก ไม่มีสถานะ
ใช้รูปแบบ value + onValueChange
สถานะลง เหตุการณ์ขึ้น — การไหลของข้อมูลแบบทิศทางเดียว
ยกสถานะไปยังบรรพบุรุษร่วมระดับต่ำสุดที่จำเป็นต้องใช้สถานะนั้น

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

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

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

คุณจะเรียนรู้อะไรในบทเรียน “การยกสถานะขึ้น”

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

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

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

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

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

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

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

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

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