เจาะลึก React Cache, Time Slicing และการดึง API แบบซิงโครนัส

แนวคิดเหล่านี้ไม่ตรงกับข้อกำหนดเดียวกัน นั่นคือ WhatWG / HTML5 / Ecma-262 และได้มาจากที่อื่น เช่น เบราว์เซอร์หรือกลไก JS

ฉันหมายถึงว่าเราควรแก้ไข 64 อย่างไร หลัง 76 ?

มันฟังดูบ้าบอมากสำหรับฉัน และมันยากมากที่จะเข้าใจว่ามันทำงานอย่างไร ความจริงก็คือมันเกิดขึ้นในระดับที่สูงกว่า

ต่อมา ฉันได้ชมการพูดคุยที่น่าทึ่งจาก Brandon Dail ที่ React Rally สิ่งนี้นำเสนอคุณสมบัติ Time Slicing และ Suspense ใหม่ที่มาพร้อมกับสถาปัตยกรรมไฟเบอร์ React:

ตามข้อมูลของ Dail ไฟเบอร์ก็เหมือนกับ JavaScript callstack ปกติ โดยที่แต่ละรายการในสแต็กเรียกว่า ไฟเบอร์ . มันแตกต่างกับ callstack ที่อาศัย เฟรม ซึ่งแสดงถึง ฟังก์ชัน (+ ข้อมูลเมตา) แต่ไฟเบอร์แสดงถึงส่วนประกอบ (+ ข้อมูลเมตา) . เรามาดูกันว่าไฟเบอร์เป็นเหมือนกล่องขนาดใหญ่รอบๆ ส่วนประกอบที่รู้ทุกอย่างเกี่ยวกับมัน

มีความแตกต่างที่สำคัญระหว่างสองแนวคิดนี้

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

ในทางกลับกัน ไฟเบอร์ — เหมือนกองไฟเบอร์ — แสดงถึงแนวคิดเดียวกัน แต่สร้างขึ้นใน โค้ด JavaScript หน่วยที่เล็กที่สุดไม่ใช่ฟังก์ชัน แต่เป็นส่วนประกอบ. จริงๆ แล้วมันทำงานในจักรวาล JavaScript

ความจริงที่ว่าสถาปัตยกรรมไฟเบอร์ถูกสร้างขึ้นอย่างสมบูรณ์ใน JavaScript หมายความว่าเราสามารถใช้ เข้าถึง และแก้ไขมันได้ เราสามารถแก้ไขได้โดยใช้ JavaScript มาตรฐาน

สิ่งที่ผลักดันฉันไปในทิศทางที่ผิดคือฉันคิดว่า React กำลังใช้วิธีแก้ปัญหาเพื่อตัดวิธีการทำงานของ JavaScript ภายใน ไม่เป็นเช่นนั้น . ไฟเบอร์เป็นเพียงอ็อบเจ็กต์ JavaScript ที่เป็นเจ้าของข้อมูลเกี่ยวกับส่วนประกอบ React และสามารถโต้ตอบกับวงจรชีวิตได้ มันสามารถดำเนินการกับฟังก์ชันภายในของ React เท่านั้น

แนวคิดนี้ ไม่ เพื่อกำหนดวิธีการทำงานของ JavaScript ใหม่ เช่น การบอก 83 ควรดำเนินการแก้ไขไมโครทาสก์ก่อนงานโทรกลับ มันขึ้นอยู่กับว่าวิธีการ React ควรถูกเรียกหรือไม่ ในบริบทที่เฉพาะเจาะจง เช่น การขัดจังหวะการเรียกใช้เมธอดวงจรการใช้งานที่แตกต่างกัน

เฮ้รอ! คุณบอกว่าไฟเบอร์สามารถควบคุมทุกอย่างในแอป React ได้ใช่ไหม แต่ส่วนประกอบจะบอก React ให้หยุดทำอะไรได้อย่างไร

เอฟเฟกต์พีชคณิต ใช่ แต่ใน JavaScript ได้โปรด

React สามารถควบคุมส่วนประกอบต่างๆ และรู้ว่าส่วนประกอบกำลังทำงานอยู่หรือไม่ ต้องขอบคุณสถาปัตยกรรมไฟเบอร์ สิ่งที่ขาดหายไปในตอนนี้คือวิธีบอก React ว่ามีการเปลี่ยนแปลงบางอย่างสำหรับส่วนประกอบเฉพาะ ดังนั้นมันจะจัดการกับการเปลี่ยนแปลงนี้

นี่คือจุดที่ผลกระทบเกี่ยวกับพีชคณิต เข้าสู่เกม

เอฟเฟกต์พีชคณิตไม่ใช่สิ่งที่มีอยู่ใน JavaScript ฉันจะพยายามอธิบายว่ามันคืออะไรด้วยคำอธิบายในระดับที่สูงกว่า

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

บางภาษา เช่น OCaml หรือ Eff ได้รับประโยชน์จากฟีเจอร์เหล่านี้โดยกำเนิด นี่เป็นนามธรรมที่น่าสนใจมาก เนื่องจากรายละเอียดการใช้งานจะขึ้นอยู่กับพาเรนต์เท่านั้น:

คงจะดีไม่น้อยถ้ามีฟีเจอร์ดังกล่าวใน JavaScript

ทีม React ได้สร้างแนวทางที่คล้ายกันในบริบท React ที่เกี่ยวข้องกับ JavaScript 93 บล็อก ตามข้อมูลของ Dail มันเป็นแนวคิดที่ใกล้เคียงที่สุดใน JavaScript

การขว้างบางสิ่งบางอย่างทำให้สามารถส่งข้อมูลไปยังผู้ปกครองที่ไหนสักแห่งได้ ผู้ปกครองคนแรกที่จับข้อมูลได้สามารถจัดการกับข้อมูลและคำนวณข้อมูลได้

ตัวอย่างดีกว่าคำพูดนับพันคำ

ลองนึกภาพโค้ดต่อไปนี้ที่พยายามดึงข้อมูล Bulbasaur โดยใช้ API แบบซิงโครนัส :

โค้ดชิ้นนี้อาจแปลกเนื่องจากการดึงข้อมูลโดยใช้ API แบบซิงโครนัสไม่ใช่เรื่องปกติ กระโดดเข้าไปใน 100 กัน การใช้งานฟังก์ชัน:

โอ้รอ! นี่มันดูไม่เหมือนการเอาของเลยจริงๆ! ฉันไม่เข้าใจว่าฟังก์ชันนี้ตั้งเป้าไว้ทำอะไรเลย…

ลองจินตนาการถึงบางสิ่งรอบๆ ส่วนประกอบ สมมติว่ามีเส้นใยที่มีลักษณะดังนี้:

ใช้เวลาอ่านโค้ดสักครู่

ตอนนี้ เรามาข้ามไปที่ 118 กันดีกว่า การใช้งาน:

ส่วนสำคัญในตัวอย่างก่อนหน้าคือ 123 บล็อก.

มาสรุปสิ่งที่เกิดขึ้นผ่านโค้ดส่วนต่างๆ เหล่านี้:

• 137 ส่วนประกอบเรียก 140 วิธีการ.
• The 152 เมธอดพยายามอ่านแคชภายใน แต่มันว่างเปล่า ดังนั้นมันจึงพ่นบางสิ่ง / ที่ไหนสักแห่ง — เอฟเฟกต์พีชคณิต
• 169 parent จับข้อมูลนั้น จัดการ และดึงข้อมูล จากนั้นจะเติม 172 แคชกับข้อมูล
• การเรนเดอร์ซ้ำเกิดขึ้นใน 180 และตอนนี้ 190 แคชเต็ม ขณะนี้ข้อมูลพร้อมใช้งานในส่วนประกอบโดยใช้ API แบบซิงโครนัส