Mobx React - แนวทางปฏิบัติที่ดีที่สุด

ในบทความนี้ฉันต้องการแสดงวิธีปฏิบัติที่ดีที่สุดสำหรับการใช้ React กับ mobx ฉันจะนำเสนอพวกเขาเป็นกฎ ดังนั้นเมื่อใดก็ตามที่คุณประสบปัญหาบางอย่างพยายามแก้ปัญหาโดยยึดกฎเหล่านี้

บทความนี้ต้องการให้คุณมีความเข้าใจพื้นฐานของร้านค้าใน mobx ถ้าไม่อ่านนี่ก่อน

ต้องการเริ่มต้นอย่างรวดเร็ว? ฉันสร้างโครงการเริ่มต้นซึ่งใช้แนวทางปฏิบัติที่แนะนำ https://github.com/danielbischoff/react-mobx-starter

ร้านค้าเป็นตัวแทนของรัฐ ui

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

แยกสายที่เหลือของคุณออกจากร้านค้า

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

รักษาตรรกะทางธุรกิจของคุณไว้ในร้านค้า

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

อย่าสร้างอินสแตนซ์ร้านค้าระดับโลก

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

เฉพาะร้านค้าเท่านั้นที่ได้รับอนุญาตให้เปลี่ยนคุณสมบัติ

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

ใส่คำอธิบายประกอบแต่ละองค์ประกอบด้วย @ observer เสมอ

การเพิ่มความคิดเห็นแต่ละองค์ประกอบด้วย @ observer อนุญาตให้แต่ละองค์ประกอบอัปเดตการเปลี่ยนแปลงของร้านค้า มิฉะนั้นส่วนประกอบพาเรนต์ที่มีคำอธิบายประกอบด้วย @ component จำเป็นต้องแสดงซ้ำเพื่ออัพเดตคอมโพเนนต์ชายด์ ดังนั้นส่วนประกอบน้อยลงจึงจำเป็นต้องมีการแสดงซ้ำ

ใช้คำนวณ @

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

คุณอาจไม่จำเป็นต้องตอบสนองเราเตอร์

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

พยายามสนับสนุนองค์ประกอบที่มีการควบคุมมากกว่าส่วนประกอบที่ไม่ได้รับการควบคุม

พยายามสร้างส่วนประกอบควบคุมเสมอ ทำให้การทดสอบส่วนประกอบและความซับซ้อนโดยรวมของส่วนประกอบง่ายต่อการจัดการ

ฉันหวังว่าฉันสามารถช่วยคุณได้ด้วยเคล็ดลับง่ายๆเหล่านี้
ถามคำถามหรือแสดงความคิดเห็นในความคิดเห็นด้านล่าง