เมื่อ refactoring สถานะการพึ่งพาในการตอบสนองของตะขอนักพัฒนามักจะพบข้อผิดพลาดทั่วไปที่สามารถนำไปสู่ข้อบกพร่องปัญหาประสิทธิภาพและรหัสที่ยากต่อการดูแล นี่คือโครงร่างที่ครอบคลุมของข้อผิดพลาดทั่วไปที่จะหลีกเลี่ยงเมื่อจัดการกับการพึ่งพาสถานะในการตอบสนองของ hooks:
การโทรตะขออย่างมีเงื่อนไขหรือภายในลูป
หนึ่งในกฎพื้นฐานของการตอบสนองของตะขอคือตะขอต้องเรียกว่าไม่มีเงื่อนไขและอยู่ในลำดับเดียวกันเสมอในระหว่างการแสดงผลทุกครั้ง การละเมิดกฎนี้โดยการเรียกตะขอภายในงบเงื่อนไขหรือลูปอาจทำให้เกิดพฤติกรรมและข้อบกพร่องที่คาดเดาไม่ได้
ตัวอย่างเช่นการโทร `usestate` ภายในบล็อกแบบมีเงื่อนไขอาจทำให้เกิดปฏิกิริยาตอบสนองต่อการติดตามสถานะของตะขอระหว่างการแสดงผลเนื่องจากจำนวนหรือคำสั่งของการเปลี่ยนแปลงของตะขอตามเงื่อนไข จะโทรหาตะขอที่ระดับบนสุดของส่วนประกอบที่ใช้งานได้หรือตะขอที่กำหนดเองเพื่อให้แน่ใจว่ามีการโทรหาตะขอที่สอดคล้องกัน
-
สถานะการใช้งานมากเกินไปสำหรับค่าที่ไม่เกิดปฏิกิริยา
ไม่ใช่ทุกส่วนของข้อมูลหรือตัวแปรในส่วนประกอบที่ต้องเก็บไว้ในสถานะ การใช้ `usestate` โดยไม่จำเป็นสำหรับตัวแปรที่ไม่ส่งผลกระทบต่อการแสดงผลแนะนำการแสดงผลอีกครั้งและค่าใช้จ่ายเพิ่มเติม
ตัวอย่างเช่นหากมีการใช้ตัวแปรภายในและไม่จำเป็นต้องทริกเกอร์การอัปเดต UI จะเป็นการดีกว่าที่จะเก็บเป็นตัวแปรธรรมดาหรือใช้ `useref` หากคุณต้องการรักษาค่าระหว่างการแสดงผลโดยไม่ทำให้เกิดการแสดงใหม่ สิ่งนี้จะช่วยเพิ่มประสิทธิภาพพฤติกรรมการแสดงผลและหลีกเลี่ยงการอัปเดตที่ไม่จำเป็น
-
การกลายพันธุ์โดยตรงของรัฐ
React State นั้นมีความหมายที่จะไม่เปลี่ยนแปลง ข้อผิดพลาดทั่วไปคือการกลายพันธุ์วัตถุสถานะหรืออาร์เรย์โดยตรงแทนที่จะสร้างอินสแตนซ์ใหม่
ตัวอย่างเช่นการผลักรายการลงในอาร์เรย์ของรัฐโดยตรงโดยไม่ต้องสร้างการอ้างอิงอาร์เรย์ใหม่ป้องกันไม่ให้ React จากการรับรู้การอัปเดตซึ่งหมายความว่าส่วนประกอบจะไม่แสดงผลอย่างถูกต้องอีกครั้ง ให้อัปเดตสถานะโดยไม่เปลี่ยนรูปโดยการสร้างวัตถุหรืออาร์เรย์ใหม่ (เช่นการใช้ไวยากรณ์สเปรด)
-
ปัญหาสถานะเก่าในการอัปเดต
เนื่องจากการอัปเดตของรัฐอาจเป็นแบบอะซิงโครนัสและอาจเป็นแบตช์การอ้างอิงถึงค่าสถานะปัจจุบันโดยตรงภายในการอัปเดตสถานะต่อเนื่องอาจนำไปสู่ปัญหาของรัฐที่ค้าง
ตัวอย่างเช่นการเรียก `setCount (นับ + 1)` หลายครั้งในแถวอาจใช้ค่าที่ล้าสมัยของ 'นับ' ส่งผลให้เกิดพฤติกรรมที่ไม่คาดคิด เพื่อหลีกเลี่ยงสิ่งนี้ให้ใช้รูปแบบการอัปเดตที่ใช้งานได้ของ setter (`setCount (prevCount => prevCount + 1)`) ดังนั้นการอัปเดตแต่ละครั้งจะทำงานนอกค่าสถานะล่าสุด
-
อาร์เรย์การพึ่งพาที่ขาดหายไปหรือไม่ถูกต้องใน `useeffect '
อาร์เรย์การพึ่งพาใน `useeffect`,` usecallback` หรือ `usememo` เป็นสิ่งสำคัญสำหรับการกำหนดเมื่อผลกระทบหรือค่าความทรงจำควรอัปเดต การละเว้นการพึ่งพาหรือการระบุอย่างไม่ถูกต้องอาจทำให้เอฟเฟกต์ทำงานได้บ่อยเกินไปไม่เพียงพอหรือนำไปสู่การปิดค้าง
ข้อผิดพลาดทั่วไป ได้แก่ :
- การละเว้นการพึ่งพาที่ใช้ภายในการโทรกลับเอฟเฟกต์ทำให้เกิดปฏิกิริยาตอบสนองต่อการเตือนและอาจนำไปสู่ข้อบกพร่อง
- การพึ่งพาที่เกินความจริงที่ทำให้เกิดลูปเอฟเฟกต์ที่ไม่มีที่สิ้นสุด
- ลืมฟังก์ชั่นหรือวัตถุที่เปลี่ยนแปลงระหว่างการแสดงผลในอาร์เรย์การพึ่งพา
เครื่องมือผ้าสำลีเช่น `eslint-plugin-react-hooks` ช่วยบังคับใช้อาร์เรย์การพึ่งพาที่ถูกต้อง แต่นักพัฒนาต้องเข้าใจสิ่งที่จะรวมเพื่อหลีกเลี่ยงค่าค้างหรือค่าที่ไม่สอดคล้องกัน
-
การพึ่งพา `usestate` สำหรับตรรกะสถานะที่ซับซ้อน
สำหรับสถานะที่ซับซ้อนที่เกี่ยวข้องกับหลายฟิลด์หรือการอัปเดตที่สลับซับซ้อนโดยอาศัยการโทร `useState` หลายรายการเท่านั้นสามารถนำไปสู่รหัสที่ซับซ้อนและผิดพลาดได้ง่าย
ให้พิจารณาใช้ `usereducer` ซึ่งรวมศูนย์การอัพเดทของรัฐและชี้แจงว่าการเปลี่ยนแปลงของรัฐเกิดขึ้นได้อย่างไร นอกจากนี้ยังช่วยหลีกเลี่ยงปัญหาสถานะเก่าเนื่องจากฟังก์ชั่น `dispatch` ไม่เปลี่ยนแปลงระหว่างการแสดงผลและสามารถใช้อย่างปลอดภัยในการพึ่งพา
-
ละเลยที่จะทำความสะอาดผลข้างเคียง
เมื่อใช้ hooks เช่น `useeffect` เพื่อจัดการผลข้างเคียง (เช่นการสมัครสมาชิกตัวจับเวลาผู้ฟังเหตุการณ์) บางครั้งนักพัฒนาก็ลืมที่จะทำความสะอาดผลกระทบเหล่านั้นอย่างถูกต้อง
หากไม่มีการทำความสะอาดผลกระทบสามารถสะสมหรือทำงานได้อย่างไม่มีกำหนดทำให้เกิดการรั่วไหลของหน่วยความจำหรือพฤติกรรมที่ไม่พึงประสงค์ ส่งคืนฟังก์ชั่นการล้างข้อมูลจากเอฟเฟกต์เพื่อกำจัดการสมัครสมาชิกหรือยกเลิกตัวจับเวลาก่อนที่ส่วนประกอบจะไม่ได้รับการจัดการหรือก่อนที่เอฟเฟกต์จะทำงานอีกครั้ง
-
การใช้บริบทและการแบ่งปันสถานะไม่สอดคล้องกันหรือมากเกินไป
เมื่อการพึ่งพาสถานะการปรับเปลี่ยนสถานะการวางสถานะที่ใช้ร่วมกันมากเกินไปลงในบริบทที่ตอบสนองหรือสถานะทั่วโลกอาจทำให้เกิดปัญหาด้านประสิทธิภาพเนื่องจากการแสดงผลซ้ำที่ไม่จำเป็นในส่วนประกอบที่ใช้บริบทนั้น
แนวปฏิบัติที่ดีที่สุดคือการให้บริบทมุ่งเน้นไปที่ความรับผิดชอบเพียงครั้งเดียวหลีกเลี่ยงการโอเวอร์โหลดด้วยสถานะที่ไม่เกี่ยวข้อง decouple สถานะการพึ่งพาหากเป็นไปได้เพื่อลดขอบเขตของการแสดงผลอีกครั้ง
-
การอัปเดตที่ไม่มีประสิทธิภาพหรือไม่ถูกต้องไปยังสถานะซ้อน
การอัปเดตวัตถุที่ซ้อนกันหรืออาร์เรย์ในรัฐอาจเป็นเรื่องยาก ข้อผิดพลาดทั่วไปคือการพยายามอัปเดตคุณสมบัติภายในวัตถุที่ซ้อนกันโดยตรง (เช่นการกลายพันธุ์คุณสมบัติซ้อน) แทนที่จะเปลี่ยนวัตถุทั้งหมดหรือการอ้างอิงอาร์เรย์ทั้งหมด
เนื่องจาก React ใช้การเปรียบเทียบแบบตื้นเพื่อตรวจจับการเปลี่ยนแปลงของรัฐความล้มเหลวในการสร้างการอ้างอิงใหม่สำหรับข้อมูลที่ซ้อนกันจะป้องกันการอัปเดตจากการเรียกใช้ซ้ำ ตรวจสอบให้แน่ใจเสมอว่าจะเปลี่ยนโครงสร้างที่ซ้อนกันอย่างไม่คาดคิดเมื่ออัปเดตสถานะ
-
ลืมที่จะใช้สถานะล่าสุดในการโทรกลับ
การโทรกลับที่สร้างขึ้นภายในส่วนประกอบ (เช่นตัวจัดการเหตุการณ์หรือตัวจับเวลา) สามารถจับค่าสถานะเก่าเนื่องจากการปิด สิ่งนี้ทำให้การโทรกลับทำงานในสถานะเก่าซึ่งนำไปสู่ความไม่สอดคล้องกัน
ใช้เทคนิคเช่นรูปแบบการทำงานของการอัพเดทสถานะ `useref` เพื่อถือสถานะล่าสุดหรือตะขอบันทึกความทรงจำเช่น` usecallback` ด้วยการพึ่งพาที่ถูกต้องเพื่อหลีกเลี่ยงการปิดค้าง
-
รายละเอียดการใช้งานการทดสอบแทนพฤติกรรมผู้ใช้
แม้ว่าสิ่งนี้จะไม่ได้เกี่ยวกับการปรับโครงสร้างของรัฐโดยตรง แต่ก็เกี่ยวข้องกับวิธีการที่ตะขอมีผลต่อการทดสอบ การทดสอบที่ขึ้นอยู่กับรายละเอียดการใช้งานสถานะภายในสามารถหยุดเมื่อทำการปรับโครงสร้างจากส่วนประกอบคลาสเป็น hooks
การทดสอบควรมุ่งเน้นไปที่พฤติกรรมและเอาต์พุตของผู้ใช้แทนที่จะเป็นส่วนประกอบภายในหรือรายละเอียดเฉพาะของตะขอเพื่อให้มั่นใจถึงความแข็งแกร่งโดยไม่คำนึงถึงการปรับโครงสร้างภายใน
-
ละเว้นกฎ ESLINT HOOK และแนวทางปฏิบัติที่ดีที่สุด
ข้อผิดพลาดทั่วไปจำนวนมากสามารถป้องกันได้โดยปฏิบัติตามกฎตะขออย่างเป็นทางการของ React และใช้ปลั๊กอิน ESLINT ที่เหมาะสมเช่น `ESLINT-PLUGIN-React-Hooks`
การไม่ใช้เครื่องมือเหล่านี้มักจะนำไปสู่การพึ่งพาที่ขาดหายไปการใช้เบ็ดที่ไม่ถูกต้องหรือตรรกะที่ขาด ผ้าสำลีที่สอดคล้องกันช่วยจับความผิดพลาดก่อนและแนะนำนักพัฒนาไปสู่แนวปฏิบัติที่ดีที่สุด
-
สรุปข้อผิดพลาดสำคัญที่ควรหลีกเลี่ยง
- การโทรตะขอตามเงื่อนไขหรือภายในลูปแทนที่จะอยู่ในระดับบนสุดอย่างสม่ำเสมอ
- ใช้สถานะสำหรับตัวแปรที่ไม่จำเป็นต้องมีการแสดงผลอีกครั้ง ชอบ `useref` หรือตัวแปรท้องถิ่น
- การกลายพันธุ์สถานะโดยตรงแทนที่จะเป็นการอัปเดตที่ไม่เปลี่ยนรูป
- การอ้างอิงสถานะโดยตรงในการอัปเดตต่อเนื่องที่นำไปสู่ปัญหาของรัฐเก่า
- อาร์เรย์การพึ่งพาที่ไม่ถูกต้องหรือไม่สมบูรณ์ทำให้เกิดข้อบกพร่องของเอฟเฟกต์หรือลูปที่ไม่มีที่สิ้นสุด
- การใช้งานมากเกินไป `usestate` สำหรับตรรกะของรัฐที่ซับซ้อนแทนที่จะเป็น` usereducer '
- ลืมการทำความสะอาดเอฟเฟกต์ข้างเคียงใน `useeffect`
- การใช้บริบทมากเกินไปหรือในทางที่ผิดซึ่งนำไปสู่การแสดงซ้ำที่มากเกินไป
- การอัปเดตที่ไม่เหมาะสมสำหรับโครงสร้างสถานะที่ซ้อนกัน
- การโทรกลับจับสถานะค้างเนื่องจากการปิด
- การทดสอบที่ขึ้นอยู่กับรายละเอียดการใช้งานมากกว่าพฤติกรรม
- เพิกเฉยต่อกฎและคำเตือน ESLINT HOOK
โดยการจัดการการพึ่งพาสถานะอย่างรอบคอบด้วยความสนใจต่อความผิดพลาดทั่วไปเหล่านี้รหัสการตอบสนองของ Reactored Hooks จะมีความน่าเชื่อถือมากขึ้นบำรุงรักษาและมีประสิทธิภาพ การปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดของ React React และการใช้การสนับสนุนเครื่องมือสามารถลดความเสี่ยงได้อย่างมากเมื่อปรับเปลี่ยนสถานะในตะขอ
การอ้างอิงจากการอภิปรายของผู้เชี่ยวชาญหลายครั้งและแหล่งบล็อกเกี่ยวกับข้อผิดพลาดของการตอบสนองของตะขอได้ถูกรวมเข้าด้วยกันที่นี่เพื่อให้แน่ใจว่าครอบคลุมความผิดพลาดทั่วไปอย่างละเอียดและความละเอียดในการจัดการกับการพึ่งพาสถานะด้วยตะขอ React