คำแนะนำโดยละเอียดสำหรับการไม่เปลี่ยนรูป

ข้อมูลที่ไม่เปลี่ยนรูปคืออะไร

ข้อมูลที่ไม่เปลี่ยนรูปหมายถึงข้อมูลที่ไม่สามารถเปลี่ยนแปลงได้เมื่อสร้างขึ้น

ด้วยการใช้ข้อมูลที่ไม่เปลี่ยนรูปเราสามารถจัดการกับการแคช, ทางเลือก, การตรวจจับการเปลี่ยนแปลงข้อมูลและปัญหาอื่น ๆ และทำให้การพัฒนาของเราง่ายขึ้น

ข้อมูลที่ไม่เปลี่ยนรูปใน JS

ใน JavaScript เราสามารถจำลองข้อมูลที่ไม่เปลี่ยนรูปผ่าน Deep Clone ซึ่งหมายความว่าทุกครั้งที่เราใช้งานข้อมูลเราจะใช้ข้อมูลโคลนลึกเพื่อสร้างข้อมูลใหม่

โคลนลึก

 /** * การเรียนรู้-การเรียนรู้-clone-deep.js * สร้างโดย MDS เมื่อวันที่ 15/6/6 */'ใช้อย่างเข้มงวด'; var cloneedeep = require ('lodash.clonedeep'); var data = {id: 'data', ผู้แต่ง: {ชื่อ: 'mdemo', gitHub: 'https://github.com/demohi'}}; var data1 = cloneedeep (data); //falsedata1.id = 'data1'; data1.author.name = 'demohi'; console.log (data.id); // data console.log (data1.id); // data1console.log (data.author.name); // mdemo console.log (data1.author.name);

แน่นอนคุณอาจรู้ว่านี่ช้ามาก ดังที่แสดงด้านล่างมันช้ามาก

ตัวเอกไม่เปลี่ยนรูป

immutable.js เป็นโครงการที่เปิดโดย Facebook ส่วนใหญ่เป็นการแก้ปัญหาของข้อมูล JavaScript ที่ไม่เปลี่ยนรูป มันให้วิธีที่มีประสิทธิภาพมากขึ้นโดยอ้างถึงแผนที่แฮชพยายามและพยายามเวกเตอร์

พูดง่ายๆคือ immutable.js แก้ปัญหาประสิทธิภาพผ่านการแบ่งปันโครงสร้าง ก่อนอื่นดูวิดีโอเพื่อดูว่าไม่เปลี่ยนรูป

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

ทำไมคุณถึงต้องการใช้ข้อมูลที่ไม่เปลี่ยนรูปใน React.js

ใครก็ตามที่คุ้นเคยกับ React.js ควรรู้ว่า React.js เป็นกรอบที่มี UI = F (สถานะ) เพื่อแก้ปัญหาการอัปเดต React.js ใช้ DOM เสมือน Virtual DOM ใช้ DIFF เพื่อแก้ไข DOM เพื่อให้ได้การอัปเดต DOM ที่มีประสิทธิภาพ

ฟังดูสมบูรณ์แบบ แต่มีปัญหา เมื่อสถานะได้รับการอัปเดตหากข้อมูลไม่เปลี่ยนแปลงคุณจะต้องทำ Dom Diff Virtual ซึ่งจะทำให้เกิดของเสีย สถานการณ์นี้เป็นเรื่องธรรมดามากโปรดดูบทความ Flummox

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

การคัดลอกรหัสมีดังนี้:

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

Purerendermixin เป็นเพียงการเปรียบเทียบแบบตื้นที่เรียบง่ายและไม่ได้ใช้สำหรับการเปรียบเทียบหลายชั้น ฉันควรทำอย่างไร? - หากคุณทำการเปรียบเทียบที่ซับซ้อนด้วยตัวเองการแสดงจะแย่มาก

วิธีแก้ปัญหาคือการใช้งานที่ไม่เปลี่ยนแปลง js เพื่อแก้ปัญหานี้ เนื่องจากตราบใดที่มีการเปลี่ยนแปลงข้อมูลในการอัปเดตแต่ละรัฐ Purerendermixin สามารถกำหนดการเปลี่ยนแปลงข้อมูลได้ทันทีซึ่งสามารถปรับปรุงประสิทธิภาพได้อย่างมาก ส่วนนี้ยังสามารถพบได้ในผู้ช่วยผู้ไม่เปลี่ยนใจ

สรุป: ใช้ purerendermixin + immutable.js

อ้างถึง

React.js conf 2015 - ข้อมูลที่ไม่เปลี่ยนรูปและตอบสนอง

ผู้ช่วยที่ไม่เปลี่ยนแปลง

purerendermixin

ไม่เปลี่ยนรูป