“ การติดตั้ง” ใน React js คืออะไร?

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

ตัวอย่าง: componentDidMount() and componentWillMount()

งานหลักของ React คือการหาวิธีแก้ไข DOM ให้ตรงกับส่วนประกอบที่ต้องการแสดงบนหน้าจอ

การตอบสนองทำได้โดยการ "ติดตั้ง" (การเพิ่มโหนดไปยัง DOM) "การยกเลิกการต่อเชื่อม" (การลบออกจาก DOM) และ "การอัปเดต" (การเปลี่ยนแปลงโหนดที่มีอยู่แล้วใน DOM)

วิธีตอบสนองโหนดจะแสดงเป็นโหนด DOM และที่ไหนและเมื่อใดที่ปรากฏในต้นไม้ DOM มีการจัดการโดยระดับบนสุด API เพื่อให้ได้แนวคิดที่ดีขึ้นเกี่ยวกับสิ่งที่เกิดขึ้นให้ดูตัวอย่างง่ายๆที่สุดเท่าที่จะทำได้:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

แล้วfooคุณสามารถทำอะไรได้บ้าง? fooในขณะนี้เป็นวัตถุ JavaScript ธรรมดาที่มีลักษณะประมาณนี้ (ตัวย่อ):

{
  type: FooComponent,
  props: {}
}

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

คุณสามารถบอกให้ React "mount" ลงในคอนเทนเนอร์ DOM ได้โดยเรียก:

ReactDOM.render(foo, domContainer);

สิ่งนี้จะบอกว่า React ถึงเวลาแสดงfooบนหน้า React จะสร้างอินสแตนซ์ของFooComponentคลาสและเรียกrenderใช้เมธอด สมมติว่ามันแสดงผล a <div />ในกรณีนั้น React จะสร้างdivโหนด DOM ขึ้นมาและใส่ลงในคอนเทนเนอร์ DOM

กระบวนการสร้างอินสแตนซ์และโหนด DOM ที่สอดคล้องกับคอมโพเนนต์ React และใส่เข้าไปใน DOM เรียกว่าการติดตั้ง

โปรดทราบว่าโดยปกติคุณจะเรียกReactDOM.render()ติดตั้งส่วนประกอบรากเท่านั้น คุณไม่จำเป็นต้อง "ต่อ" ส่วนประกอบลูกด้วยตนเอง ทุกครั้งที่คอมโพเนนต์พาเรนต์เรียกใช้setState()และrenderวิธีการของมันบอกว่าควรแสดงผลลูกเฉพาะเป็นครั้งแรก React จะ "ต่อเชื่อม" ลูกนี้เข้ากับพาเรนต์โดยอัตโนมัติ

ปฏิกิริยาเป็นกรอบไอโซมอร์ฟิก / สากล นั่นหมายความว่ามีการแสดงเสมือนของโครงสร้างองค์ประกอบ UI และแยกจากการแสดงผลจริงที่ส่งออกในเบราว์เซอร์ จากเอกสารประกอบ:

การตอบสนองนั้นรวดเร็วมากเพราะไม่เคยพูดคุยกับ DOM โดยตรง React รักษาการแทนค่า DOM ในหน่วยความจำอย่างรวดเร็ว

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

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

ดังนั้นข้อสรุปก็คือReact คือการแสดงผลแบบไม่เชื่อเรื่องพระเจ้าซึ่งหมายความว่ามันไม่สนใจว่าผลลัพธ์สุดท้ายคืออะไร สามารถเป็น DOM Tree ในเบราว์เซอร์อาจเป็น XML, Native Components หรือ JSON

"เมื่อเราดูแพ็กเกจเช่น react-native, react-art, react-canvas และ react-three เป็นที่ชัดเจนว่าความสวยงามและสาระสำคัญของ React ไม่เกี่ยวข้องกับเบราว์เซอร์หรือ DOM" - ตอบสนองบล็อก js

ตอนนี้คุณรู้แล้วว่า React ทำงานอย่างไรมันก็ง่ายที่จะตอบคำถามของคุณ :)

การติดตั้งเป็นกระบวนการในการส่งออกการแสดงเสมือนของส่วนประกอบในการแสดง UI ขั้นสุดท้าย (เช่น DOM หรือ Native Components)

ในเบราว์เซอร์ที่หมายถึงการส่งออก React Element ไปยังองค์ประกอบ DOM จริง (เช่น HTML divหรือองค์ประกอบli ) ในโครงสร้าง DOM ในแอปพลิเคชันแบบเนทีฟนั่นหมายถึงการส่งออกองค์ประกอบการตอบสนองไปยังองค์ประกอบดั้งเดิม คุณยังสามารถเขียนเรนเดอร์ของคุณเองและเอาท์พุทส่วนประกอบ React เป็น JSON หรือ XML หรือแม้แต่ XAML หากคุณมีความกล้า

ดังนั้นตัวจัดการการติดตั้ง / การยกเลิกการต่อเชื่อมจึงมีความสำคัญต่อแอ็พพลิเคชัน React เนื่องจากคุณสามารถมั่นใจได้ว่าส่วนประกอบจะถูกส่งออก / แสดงผลเมื่อติดตั้งเท่านั้น อย่างไรก็ตามcomponentDidMountตัวจัดการจะถูกเรียกใช้เฉพาะเมื่อแสดงผลไปยังการแสดง UI จริง (DOM หรือส่วนประกอบดั้งเดิม) แต่ไม่ใช่ถ้าคุณกำลังแสดงผลเป็นสตริง HTML บนเซิร์ฟเวอร์โดยใช้renderToStringซึ่งเหมาะสมเนื่องจากส่วนประกอบไม่ได้ถูกต่อเข้าจริงจนกว่าจะถึง เบราว์เซอร์และดำเนินการในนั้น

และใช่การติดตั้งเป็นชื่อที่โชคร้าย / น่าสับสนถ้าคุณถามฉัน IMHO componentDidRenderและcomponentWillRenderน่าจะเป็นชื่อที่ดีกว่ามาก

การติดตั้งหมายถึงส่วนประกอบใน React (โหนด DOM ที่สร้างขึ้น) ที่แนบกับบางส่วนของเอกสาร แค่นั้นแหละ!

การละเว้น React คุณสามารถคิดว่าฟังก์ชันเนทีฟทั้งสองนี้เป็นการติดตั้ง:

replaceChild

appendChild

ซึ่งน่าจะเป็นฟังก์ชันทั่วไปที่ React ใช้เพื่อติดตั้งภายใน

คิดถึง:

componentWillMount === ก่อนเมาท์

และ:

componentDidMount === หลังจากเมาท์

https://facebook.github.io/react/docs/tutorial.html

ที่นี่ componentDidMount เป็นวิธีการที่เรียกโดยอัตโนมัติโดย React เมื่อคอมโพเนนต์ถูกแสดงผล

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

componentWillMountตรงกันข้าม มันจะเริ่มทำงานทันทีก่อนที่ส่วนประกอบของคุณจะแสดงผล

ดูเพิ่มเติมที่นี่ https://facebook.github.io/react/docs/component-specs.html

สุดท้ายคำว่า "mount" ดูเหมือนจะไม่ซ้ำกันสำหรับ react.js ฉันไม่คิดว่ามันเป็นแนวคิดทั่วไปของจาวาสคริปต์หรือแม้แต่แนวคิดเบราว์เซอร์ทั่วไป

การติดตั้งหมายถึงการโหลดเพจเริ่มต้นเมื่อคอมโพเนนต์ React ของคุณแสดงผลครั้งแรก จากเอกสาร React สำหรับ Mounting: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

คุณสามารถตัดกันสิ่งนี้กับฟังก์ชัน componentDidUpdate ซึ่งเรียกว่าทุกครั้งที่ React แสดงผล (ยกเว้นการเมาท์เริ่มต้น)

เป้าหมายหลักของ React js คือการสร้างส่วนประกอบที่ใช้ซ้ำได้ ส่วนประกอบคือส่วนต่างๆของเว็บเพจ ตัวอย่างเช่นในหน้าเว็บส่วนหัวเป็นส่วนประกอบส่วนท้ายเป็นส่วนประกอบการแจ้งเตือนขนมปังเป็นส่วนประกอบและอื่น ๆ คำว่า "ติดตั้ง" บอกเราว่าส่วนประกอบเหล่านี้โหลดหรือแสดงผลใน DOM นี่คือ API ระดับบนสุดจำนวนมากและวิธีการจัดการกับสิ่งนี้

เพื่อให้ง่ายขึ้นการติดตั้งหมายความว่าคอมโพเนนต์ถูกโหลดไปยัง DOM และไม่ได้ต่อเชื่อมหมายความว่าส่วนประกอบถูกลบออกจาก DOM