Swift Academy · บทเรียน

ทำความเข้าใจเอกลักษณ์ของมุมมอง

ควบคุมวิธีที่ SwiftUI เปรียบเทียบความต่างและนำมุมมองกลับมาใช้

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

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

อัตลักษณ์เป็นตัวขับเคลื่อน SwiftUI

SwiftUI ติดตามแต่ละมุมมองด้วยอัตลักษณ์เพื่อพิจารณาว่าควรอัปเดตมุมมองเดิมหรือสร้างมุมมองใหม่

การกำหนดอัตลักษณ์ให้ถูกต้องเป็นปัจจัยสำคัญที่สุดประการหนึ่งต่อความถูกต้องและประสิทธิภาพ

อัตลักษณ์สองประเภท

SwiftUI ใช้อัตลักษณ์สองรูปแบบ ได้แก่ อัตลักษณ์เชิงโครงสร้าง (ตำแหน่งของมุมมองในต้นไม้มุมมอง) และ อัตลักษณ์แบบระบุชัด (id ที่คุณกำหนด)

อัตลักษณ์เชิงโครงสร้าง

โดยค่าเริ่มต้น อัตลักษณ์ของมุมมองมาจากตำแหน่งที่มุมมองนั้นอยู่ในลำดับชั้น แขนง if ด้านล่างจะสร้างมุมมองที่มีอัตลักษณ์เชิงโครงสร้างแตกต่างกันสองรายการ

var body: some View {
    if isOn {
        Text("On")  // one identity
    } else {
        Text("Off") // a different identity
    }
}

เหตุใดแขนงจึงสูญเสียสถานะ

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

if isExpanded {
    DetailView() // new instance each time the branch flips
} else {
    SummaryView()
}

อัตลักษณ์แบบระบุชัดด้วย id()

ตัวปรับแต่ง .id(_:) จะกำหนดอัตลักษณ์แบบระบุชัด การเปลี่ยน id จะบอก SwiftUI ว่า "นี่คือมุมมองคนละรายการ" ทำให้สร้างอินสแตนซ์ใหม่และรีเซ็ตสถานะ

CounterView()
    .id(selectedTab) // new identity per tab

อัตลักษณ์ใน ForEach

ForEach ต้องการอัตลักษณ์ที่คงที่สำหรับแต่ละองค์ประกอบ ใช้เส้นทางคีย์ไปยัง id ที่คงที่ และอย่าใช้ดัชนีของอาร์เรย์กับคอลเลกชันที่เปลี่ยนแปลงได้

ForEach(items, id: \.id) { item in
    RowView(item: item)
}

กับดักอัตลักษณ์ของดัชนี

การใช้ id: \.self กับดัชนีหรือค่าที่เปลี่ยนแปลงได้จะทำให้อัตลักษณ์สลับตำแหน่งเมื่อข้อมูลเปลี่ยน ส่งผลให้แอนิเมชันผิดพลาดและสูญเสียสถานะ

// Risky if items reorder or values repeat:
// ForEach(0..<items.count, id: \.self) { ... }

อัตลักษณ์และแอนิเมชัน

แอนิเมชันจะค่อย ๆ เปลี่ยนระหว่างสถานะของอัตลักษณ์เดียวกัน หากอัตลักษณ์เปลี่ยน SwiftUI จะใช้การเปลี่ยนผ่านแบบเพิ่ม/ลบ แทนที่จะแสดงแอนิเมชันที่ราบรื่น

withAnimation {
    // same identity -> property animates
    // changed id     -> transition (fade/slide)
}

ตัวปรับแต่งแบบมีเงื่อนไขเปลี่ยนอัตลักษณ์

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

// Better: keep one identity
Text("Hi")
    .opacity(isHidden ? 0 : 1)
// Worse: branching creates two identities

AnyView ลบข้อมูลอัตลักษณ์

การห่อมุมมองด้วย AnyView จะซ่อนชนิดของมุมมองจาก SwiftUI ทำให้ความสามารถในการเปรียบเทียบความแตกต่างอย่างมีประสิทธิภาพลดลง หากเป็นไปได้ ให้ใช้ชนิดที่เป็นรูปธรรม หรือ @ViewBuilder แทน

// Prefer @ViewBuilder over returning AnyView
@ViewBuilder
func content() -> some View {
    if flag { A() } else { B() }
}

อัตลักษณ์คงที่ = สถานะคงที่

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

ตรวจสอบสั้น ๆ: อัตลักษณ์ของมุมมอง

ทดสอบความเข้าใจเกี่ยวกับอัตลักษณ์ของมุมมอง

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

ทบทวน: การทำความเข้าใจอัตลักษณ์ของมุมมอง

SwiftUI ระบุอัตลักษณ์ของมุมมองทั้งในเชิงโครงสร้าง (ตำแหน่งในต้นไม้) และแบบระบุชัด (.id) อัตลักษณ์ที่คงที่ช่วยรักษา @State และทำให้เกิดแอนิเมชันของคุณสมบัติที่ราบรื่น การเปลี่ยนอัตลักษณ์จะรีเซ็ตสถานะและเรียกใช้การเปลี่ยนผ่าน

กำหนด id ที่คงที่ให้ ForEach หลีกเลี่ยงอัตลักษณ์จากดัชนีกับข้อมูลที่เปลี่ยนแปลงได้ ลดการใช้แขนงที่ทำให้อัตลักษณ์สลับไปมา และหลีกเลี่ยง AnyView เมื่อสามารถใช้ชนิดที่เป็นรูปธรรมได้

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

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

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

คอร์ส: 122
บทเรียน: 409

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

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

บทเรียน “ทำความเข้าใจเอกลักษณ์ของมุมมอง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ทำความเข้าใจเอกลักษณ์ของมุมมอง”

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

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

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

บทเรียน “ทำความเข้าใจเอกลักษณ์ของมุมมอง” ใช้เวลานานแค่ไหน

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

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

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

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

ทำความเข้าใจเอกลักษณ์ของมุมมอง
ลดการประเมิน Body ซ้ำ
มุมมองแบบ Equatable และขอบเขต @State
การวิเคราะห์ประสิทธิภาพด้วยเครื่องมือ SwiftUI

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