การวิเคราะห์โดยย่อของ SuspenseList ใน React18 และการใช้งานคืออะไร

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เรียนรู้เกี่ยวกับ

อดีตและปัจจุบันของ Suspense

ฟีเจอร์นี้ปรากฏใน React เวอร์ชันเก่า ครั้งแรกคือเวอร์ชัน 16.6 ซึ่งเปิดตัวส่วนประกอบ Suspense ที่รองรับการแยกโค้ด ขณะนี้การดึงข้อมูลได้รับการสนับสนุนในเวอร์ชัน 16.9 นักเรียนที่สนใจสามารถย้ายไปที่ changelog ของ React

ก่อนหน้านี้มี

การใช้ Suspense อย่างง่าย

// ส่วนประกอบนี้ถูกโหลดแบบไดนามิก const OtherComponent = React.lazy(() => import('./OtherComponent'));

ฟังก์ชั่น MyComponent() {
  กลับ (
    <React.Suspense fallback={<สปินเนอร์ />}>
      <div>
        <ส่วนประกอบอื่นๆ />
      </div>
    </ตอบสนองใจจดใจจ่อ>
  -
}

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

SuspenseList คืออะไรที่

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

<SuspenseListเปิดเผยOrder="ไปข้างหน้า">
  <ทางเลือกใจจดใจจ่อ={'กำลังโหลด...'}>
    <โปรไฟล์รูปภาพ id={1} />
  </ใจจดใจจ่อ>
  <ทางเลือกใจจดใจจ่อ={'กำลังโหลด...'}>
    <โปรไฟล์รูปภาพ id={2} />
  </ใจจดใจจ่อ>
  <ทางเลือกใจจดใจจ่อ={'กำลังโหลด...'}>
    <โปรไฟล์รูปภาพ id={3} />
  </ใจจดใจจ่อ>
  -
</SuspenseList>

ขอแนะนำอุปกรณ์ประกอบฉากเพียงสอง Props ของ SuspenseList เท่านั้น

• forwards

forwards together revealOrder การ backwards ของ sub Suspense

• ย้อนกลับ โดยไม่คำนึงถึงความเร็วของคำขอ การแสดงย้อนกลับก่อน

• backwards ตรงกันข้ามกับการส่งต่อ

• together ว่าการระงับทั้งหมดจะแสดงพร้อมกันเมื่อพร้อม แทนที่จะแสดงทีละส่วน

tail ระบุวิธีแสดงพฤติกรรมของ รายการที่ไม่ได้โหลดใน SuspenseList

ตามค่าเริ่มต้น SuspenseList จะแสดงทางเลือกทั้งหมด

• collapsed

• SuspenseList รายการ

และแสดงเฉพาะรายการเท่านั้น

โปรเจ็กต์ที่ไม่ได้โหลด hidden ถัดไปจะไม่แสดงข้อมูลใด ๆ

PS: SuspenseList ใช้งานได้เฉพาะกับ Suspense หรือ SuspenseList ของระดับย่อยโดยตรง และจะไม่ทำงานบนโหนดหลาน

บทบาทของ SuspenseList

SuspenseList ช่วยให้เราสามารถดำเนินการประสานกลุ่มของพฤติกรรม Suspense ได้ แม้ว่าการสาธิตในการสาธิตจะค่อนข้างง่าย แต่ในโปรเจ็กต์ที่มีขนาดค่อนข้างใหญ่ เรามักจะใช้ Layout สำหรับเค้าโครง ยกตัวอย่างแพลตฟอร์มการจัดการระดับกลางและด้านหลังทั่วไปของเราและหน้าหลักฝั่ง C เป็นตัวอย่าง

ในระบบระดับกลางและส่วนหลัง เรามักจะใช้วิธีการจัดวางหน้าหลักด้วยแถบด้านบน + แถบด้านข้าง ในระดับนี้ อุตสาหกรรมปัจจุบันในอุตสาหกรรมส่วนใหญ่จะฝึกฝนรูทีนแบบ micro-front-end เช่น qiankun.js รวมถึง ทีมผู้เขียนได้สำรวจชุดระบบการใช้งานส่วนหน้าแบบไมโครของตัวเอง หากคุณอยู่ในเพจฝั่ง C อาจไม่เหมาะสมที่จะใช้วิธีการส่วนหน้าแบบไมโคร หากมีข้อกำหนดสำหรับการเรนเดอร์แบบหลายบล็อกในเพจ คุณสามารถใช้ SuspenseList และ Suspense ร่วมกับความสามารถของ React backend เพื่อเรนเดอร์ SSR เพื่อให้บรรลุการเรนเดอร์บล็อกที่เป็นอิสระอย่างเป็นระบบมากขึ้น ผลกระทบของลำดับการโหลดและพฤติกรรม