อะไรคือข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยงเมื่อ 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 และการใช้การสนับสนุนเครื่องมือสามารถลดความเสี่ยงได้อย่างมากเมื่อปรับเปลี่ยนสถานะในตะขอ