เมื่อไม่นานมานี้ เพื่อนคนหนึ่งส่งเดโม React มาให้ฉันเพื่อทดสอบความเข้าใจของฉันเกี่ยวกับ React

ฉันได้ดูการสาธิตนี้อย่างละเอียดยิ่งขึ้น แม้ว่าโค้ดจะมีขนาดเล็กมาก แต่ก็มีข้อมูลต่อไปนี้:

• ปัญหาการปิดตะขอ
• หลักการของรัฐ

การสาธิต

โครงสร้างของเดโมนั้นเรียบง่าย ประกอบด้วยปุ่มและรายการ

และเมื่อคลิกปุ่ม จะเพิ่มบางอย่างลงในรายการดังที่คุณเห็นด้านล่าง:

ดูเหมือนว่านี้:

จนถึงตอนนี้มันค่อนข้างง่ายใช่มั้ย

ส่วนที่ตลกและซับซ้อนคือเมื่อคุณคลิกAddปุ่ม ปุ่มใหม่จะมีonClick={add}กิจกรรมอยู่ในรายการด้วย

ดังนั้น หากคุณคลิกAddเจ็ดครั้ง หน้าจะมีลักษณะดังนี้:

คุณเข้าใจไหม? นี่คือการสาธิตออนไลน์:

ความท้าทาย

นี่คือคำถาม: หากเราคลิกตัวเลขเหล่านี้ จะเกิดอะไรขึ้น?

• หากเราคลิกปุ่ม0รายการจะเป็นอย่างไร
• หากเราคลิกปุ่ม6รายการจะเป็นอย่างไร

คำตอบ

นักพัฒนาบางคนอาจคิดว่าปุ่มใหม่จะถูกผลักไปที่รายการหลังจากคลิกหมายเลข

แต่คำตอบนี้ผิด เมื่อเราคลิกที่ตัวเลข ความยาวของรายการจะกลายเป็น [ the number+ 1] และหมายเลขสุดท้ายในรายการจะกลายเป็น[ the largest number before the click+ 1]

ฉันรู้ว่าข้อความนี้พูดได้คำเดียว แต่ให้ฉันอธิบายด้วยตัวอย่างบางส่วน

สมมติว่ารายการปัจจุบันคือ:

หากเราคลิก0ความยาวของรายการจะเปลี่ยนเป็น0 + 1 = 1และตัวเลขสุดท้ายจะกลาย6 + 1 = 7เป็น

ตอนนี้ หากเราคลิก2ความยาวของรายการจะเปลี่ยนเป็น2 + 1 = 3และตัวเลขสุดท้ายจะกลาย6 + 1 = 7เป็น

คุณสามารถทดลองใช้ได้โดยการจัดเตรียมการสาธิตที่ฝังไว้

แต่คุณรู้หรือไม่ว่าทำไมปรากฏการณ์นี้จึงเกิดขึ้น?

สถานะและการปิดบัญชี

ซึ่งเป็นผลมาจากสองปัจจัยที่ทำงานร่วมกัน:

• ปัญหาการปิดด้วยขอเกี่ยว
• รัฐประกอบอย่างไร

เมื่อคลิกปุ่มaddฟังก์ชันจะถูกเรียก จากนั้นการปิดจะถูกสร้างขึ้นตามบริบท

การปิดประกอบด้วย:

• addการทำงาน
• list
• setList

นี่เป็นความเข้าใจผิดที่พบบ่อย: การlistส่งคืนโดยการโทรหลายครั้งuseStateเป็นวัตถุเดียวกันกับที่อยู่เดียวกันในหน่วยความจำ

อันที่จริง การlistส่งคืนโดยการโทรแต่ละครั้งจะuseStateคำนวณตามสูตรต่อไปนี้:

base state + update1 + update2 + … = current state

สิ่งนี้นำไปสู่ปรากฏการณ์ที่สำคัญมาก: addฟังก์ชันที่สอดคล้องกับตัวเลขแต่ละตัวอยู่ในการปิดที่แตกต่างกัน และlistมีค่าต่างกัน

iเป็นตัวแปรระดับโมดูล พวกมันเหมือนกันในแต่ละการปิด

เมื่อคุณคลิก0สิ่งต่อไปนี้จะเกิดขึ้น:

• iเป็นตัวแปรระดับโมดูล 6
• listในการปิดนี้คือ[]

setList(
  [].concat(
    <button key={7} onClick={add}>{7}</button>
  )
);

เมื่อคุณคลิก2สิ่งนี้จะเกิดขึ้น:

• iเป็นตัวแปรระดับโมดูล 6
• listในการปิดนี้คือ[0, 1]

setList(
  [0, 1].concat(
    <button key={7} onClick={add}>{7}</button>
  )
);

คุณเข้าใจไหม?

บทสรุป

เนื่องจากหลักการประกอบของรัฐคือ:

base state + update1 + update2 + … = current state

และเนื่องจากการปิดlistปุ่มตัวเลขแต่ละปุ่มจึงบันทึกค่าที่ แตกต่างกัน

ในที่สุดสิ่งนี้นำไปสู่ปรากฏการณ์ที่อธิบายไว้ในตอนต้นของบทความ

ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับคุณ

สารละลาย

หากคุณไม่ต้องการปรากฏการณ์การปิดนี้ คุณสามารถแก้ไขพารามิเตอร์ของsetListto function form