ตอบโต้การปฏิบัติที่ดีที่สุดและฟังก์ชั่นที่มีประโยชน์

เมื่อเร็ว ๆ นี้ React ได้กลายเป็นเครื่องมือใหม่ที่นักพัฒนาซอฟต์แวร์ใช้ในการสร้างทุกอย่างตั้งแต่แอปพลิเคชันหน้าเดียวไปจนถึงแอปพลิเคชันมือถือ แต่ตั้งแต่ฉันเริ่มลึกลงไปในการตอบสนองฉันได้เห็นโมดูลโหนด“ เจ๋ง ๆ ” ทั้งหมดนี้ซึ่งพัฒนาขึ้นอย่างเลวร้าย พวกเขาไม่ปฏิบัติตามกฎใด ๆ องค์ประกอบมีขนาดใหญ่เกินไป พวกเขาใช้สถานะสำหรับทุกอย่างสวยมากและพวกเขาจะไม่ยกระดับองค์ประกอบโง่ ๆ ใครก็ตามที่มีประสบการณ์มากพอจะเข้าใจถึงความยุ่งยากในการบำรุงรักษาและการโหลดบนเบราว์เซอร์หากคุณแสดงทุกองค์ประกอบทุกครั้ง ในบทความนี้ฉันจะแนะนำคุณเกี่ยวกับวิธีปฏิบัติที่ดีที่สุดของ React ทั้งในวิธีการตั้งค่า React และวิธีทำให้รวดเร็วมาก

โปรดทราบว่าฉันจะอัปเดตบทความนี้ต่อไปเมื่อมีแนวปฏิบัติใหม่เกิดขึ้น

ก่อนที่คุณจะเริ่มอ่านโปรดทราบว่า React เป็นห้องสมุดที่ใช้งานได้ (FP) หากคุณไม่ทราบว่า FP คืออะไรโปรดอ่านการตอบกลับของ Stack Exchange

ใช้ ES6 (transpiled กับ Babel)

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

ที่นี้:

เปลี่ยนเป็นสิ่งนี้:

ใช้ Webpack

การตัดสินใจใช้ Webpack นั้นง่ายมาก: การโหลดซ้ำร้อนๆ, ไฟล์ย่อส่วน, โมดูลโหนด :) และคุณสามารถแบ่งแอปพลิเคชันของคุณออกเป็นชิ้นเล็ก ๆ และขี้เกียจโหลดได้

หากคุณวางแผนที่จะสร้าง applcation ขนาดใหญ่ฉันขอแนะนำให้อ่านบทความนี้เพื่อทำความเข้าใจว่าการโหลดแบบขี้เกียจทำงานอย่างไร

ใช้ JSX

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

ดูขนาดมัดของคุณเสมอ

หนึ่งเคล็ดลับในการทำให้บันเดิลของคุณเล็กลงคือการนำเข้าโดยตรงจากเส้นทางรูทโมดูลโหนด

ทำเช่นนี้:

นำเข้า Foo จาก ‘foo / Foo’

แทน:

นำเข้า {Foo} จาก ‘foo’

ทำให้ส่วนประกอบของคุณเล็ก (เล็กมาก)

Rule of thumb คือหากวิธีการเรนเดอร์ของคุณมีมากกว่า 10 บรรทัดอาจใหญ่เกินไป แนวคิดทั้งหมดของการใช้ React คือการใช้งานโค้ดอีกครั้งดังนั้นหากคุณทิ้งทุกอย่างไว้ในไฟล์เดียวคุณจะเสียความสวยงามของ React

สิ่งที่จำเป็นต้องมีองค์ประกอบของตัวเอง?

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

โครงสร้างด้านหลังมันคืออะไร คุณมีฟอร์มที่มีปุ่มและลิงก์สำหรับป้อนข้อมูลสองรายการ ให้ดูในรหัส:

มีอะไรผิดปกติที่นี่? การทำซ้ำ อินพุตมีโครงสร้างเดียวกันทำไมไม่สร้างองค์ประกอบนั้น

ตอนนี้มันสวยงามแล้ว ฉันจะไม่ได้รับรายละเอียดมากที่นี่ แต่ถ้าคุณต้องการที่จะอ่านต่อไปคิดปฏิกิริยา

แล้วรัฐล่ะ?

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

ใช้ ShouldComponentUpdate สำหรับการปรับปรุงประสิทธิภาพ

React เป็นภาษาเทมเพลตที่ทำให้อุปกรณ์หรือสถานะของอุปกรณ์เปลี่ยนแปลงทุกครั้ง ดังนั้นลองจินตนาการว่าต้องแสดงทั้งหน้าทุกครั้งที่มีการกระทำ นั่นเป็นการโหลดครั้งใหญ่บนเบราว์เซอร์ นั่นคือสิ่งที่ ShouldComponentUpdate เข้ามาเมื่อใดก็ตามที่ React แสดงผลมุมมองที่มันตรวจสอบเพื่อดูว่า shouldComponentUpdate กลับมาเป็นเท็จ / จริง ดังนั้นเมื่อใดก็ตามที่คุณมีส่วนประกอบที่เป็นของโปรดและทำผิดพลาด หรือถ้าไม่ใช่การตรวจสอบคงที่เพื่อดูว่าอุปกรณ์ประกอบฉาก / รัฐมีการเปลี่ยนแปลง

หากคุณต้องการอ่านเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพให้อ่านบทความของฉันใน React Perf

คิดเกี่ยวกับความไม่แน่นอน

หากคุณมาจากภาษาสกาล่าหรือภาษาที่มีประสิทธิภาพสูงอื่น ๆ ความไม่สามารถเข้ากันได้เป็นแนวคิดที่คุณคุ้นเคย แต่ถ้าคุณไม่คุ้นเคยกับแนวคิดที่คิดว่าการเปลี่ยนแปลงไม่ได้เหมือนมีฝาแฝด พวกเขาเหมือนกันมากและพวกเขาดูเหมือนกัน แต่พวกเขาไม่เท่ากัน ตัวอย่างเช่น:

เกิดอะไรขึ้น? Object2 ถูกสร้างขึ้นเป็นข้อมูลอ้างอิงของ object1 ซึ่งหมายความว่าในทุกแง่มุมของคำว่า object2 นั้นเป็นอีกวิธีหนึ่งในการอ้างอิง object1 เมื่อฉันสร้าง object3 ฉันสร้างวัตถุใหม่ที่มีโครงสร้างเดียวกันกับ object1 ฟังก์ชัน Object.assign ใช้วัตถุใหม่แล้วโคลนโครงสร้างของ object1 ดังนั้นจึงสร้างการอ้างอิงใหม่ดังนั้นเมื่อคุณเปรียบเทียบ object1 กับ object3 พวกมันจะแตกต่างกัน ทำไมสิ่งนี้จึงสำคัญ นึกถึงการเพิ่มประสิทธิภาพฉันกล่าวถึงข้างต้นว่าปฏิกิริยาจะแสดงผลทุกครั้งที่มีการเปลี่ยนแปลงองค์ประกอบ เมื่อใช้ฟังก์ชัน ShouldComponentUpdate แทนที่จะทำการตรวจสอบอย่างละเอียดเพื่อดูว่าคุณลักษณะทั้งหมดแตกต่างกันหรือไม่คุณสามารถเปรียบเทียบวัตถุได้ หากคุณต้องการทราบเพิ่มเติมให้อ่านบทความนี้

ใช้องค์ประกอบที่ชาญฉลาดและเป็นใบ้

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

ส่วนประกอบที่โง่ยังง่ายต่อการตรวจแก้จุดบกพร่องเพราะบังคับใช้วิธีการจากบนลงล่างที่ React เกี่ยวข้องทั้งหมด

ใช้ PropTypes

PropTypes ช่วยให้คุณตั้งค่าการตรวจสอบความถูกต้องของข้อมูลสำหรับส่วนประกอบต่างๆ สิ่งนี้มีประโยชน์มากเมื่อทำการดีบั๊กและเมื่อทำงานกับนักพัฒนาหลายคน ทุกคนที่ทำงานกับทีมใหญ่ควรอ่านบทความนี้

ผูกฟังก์ชั่นเสมอในวิธีการสร้าง

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

someFunction = () => {
}

ใช้ Redux / Flux

เมื่อจัดการกับข้อมูลที่คุณต้องการใช้ Flux หรือ Redux Flux / Redux ช่วยให้คุณสามารถจัดการข้อมูลได้อย่างง่ายดายและลดความเจ็บปวดจากการจัดการแคชส่วนหน้า ฉันใช้ Redux เป็นการส่วนตัวเพราะมันบังคับให้คุณมีโครงสร้างไฟล์ที่ควบคุมได้มากขึ้น

โปรดทราบว่าบางครั้งมันมีประโยชน์มากในการใช้ Redux / Flux แต่คุณอาจไม่จำเป็นต้องเก็บสถานะทั้งหมดของแอปพลิเคชันของคุณไว้ในวัตถุธรรมดา อ่านเพิ่มเติมได้ที่นี่

ใช้ normalizr

ตอนนี้เรากำลังพูดถึงข้อมูลฉันจะใช้เวลาสักครู่และแนะนำคุณกับจอกศักดิ์สิทธิ์ในการจัดการกับโครงสร้างข้อมูลที่ซับซ้อน Normalizr โครงสร้างวัตถุ json ที่ซ้อนกันของคุณเป็นโครงสร้างอย่างง่ายที่คุณสามารถปรับเปลี่ยนได้ทันที

โครงสร้างไฟล์

ฉันจะทำคำสั่งทื่อที่นี่และบอกว่าฉันได้เห็นเพียง 2 โครงสร้างไฟล์ด้วย React / Redux ที่ทำให้สิ่งต่าง ๆ ใช้งานง่าย

โครงสร้างแรก:

โครงสร้างที่สอง:

ใช้ตู้คอนเทนเนอร์ (ปรับปรุง - 2017 อัปเดตบทต่อไป)

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

ตัวอย่าง:

ใช้เทมเพลตแทนตู้คอนเทนเนอร์

ในขณะที่ทำงานกับตู้คอนเทนเนอร์และคัดลอกอุปกรณ์ประกอบฉากลงไปในมุมมองฉันพบวิธีที่มีประสิทธิภาพมากขึ้นในการทำเช่นนี้ วิธีที่ฉันแนะนำตอนนี้คือแทนที่จะใช้คอนเทนเนอร์คือการสร้าง BaseTemplate ที่ขยายโดย AuthenticatedTemplate และ NotAuthenticatedBaseTemplate ในสองแม่แบบที่คุณจะเพิ่มฟังก์ชั่นทั้งหมดและสถานะที่ใช้ร่วมกันในทุกมุมมองที่ไม่มีการรับรองความถูกต้อง / รับรองความถูกต้อง ในมุมมองแทนการขยาย React.Component คุณขยายแม่แบบ ด้วยวิธีนี้คุณหลีกเลี่ยงการโคลนวัตถุใด ๆ และคุณสามารถกรองอุปกรณ์ประกอบฉากที่ส่งลงไปที่แผนภูมิองค์ประกอบ

หลีกเลี่ยงการอ้างอิง

การอ้างอิงจะทำให้รหัสของคุณยากต่อการรักษา รวมทั้งเมื่อคุณใช้ refs คุณกำลังจัดการ Dom เสมือนโดยตรง ซึ่งหมายความว่าองค์ประกอบจะต้องแสดงผลต้นไม้ Dom ทั้งหมดอีกครั้ง

ใช้การตรวจสอบ Prop

PropTypes จะทำให้ชีวิตของคุณดีขึ้นมากเมื่อทำงานกับทีมใหญ่ พวกเขาช่วยให้คุณสามารถตรวจแก้จุดบกพร่องส่วนประกอบของคุณ พวกเขาจะทำให้การดีบักของคุณง่ายขึ้นมาก ในแบบที่คุณกำหนดข้อกำหนดมาตรฐานสำหรับส่วนประกอบเฉพาะ

ความคิดเห็นอื่น ๆ

ฉันต้องการเน้นย้ำว่าคุณควรแยกส่วนประกอบทั้งหมดของคุณเป็นไฟล์เดี่ยว ๆ

ใช้เราเตอร์: ไม่มีอะไรจะพูดที่นี่นอกจากถ้าคุณต้องการสร้างแอปหน้าเดียวที่คุณต้องการเราเตอร์ ฉันใช้ React Router เป็นการส่วนตัว

หากคุณใช้ฟลักซ์อย่าลืมผูกร้านค้าเพื่อฟังการเปลี่ยนแปลงกิจกรรม คุณไม่ต้องการสร้างการรั่วไหลของหน่วยความจำ

หากคุณต้องการเปลี่ยนชื่อแอปพลิเคชันของคุณแบบไดนามิกคุณสามารถทำสิ่งนี้:

repo นี้เป็นตัวอย่างที่ดีของการรับรองความถูกต้อง React / Redux

มีอะไรใหม่ในปี 2017

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

ฟังก์ชั่นผู้ช่วยที่มีประโยชน์

ฟังก์ชั่นต่อไปนี้เป็นฟังก์ชั่นการเปรียบเทียบวัตถุ การใช้งาน: ตรวจสอบว่าสถานะหรืออุปกรณ์ประกอบฉากมีการเปลี่ยนแปลงใน shouldComponentUpdate

สร้างตัวลดแบบไดนามิก

การใช้งาน:

สร้างค่าคงที่:

แสดงผลถ้า:

การใช้งาน: แสดงองค์ประกอบถ้า somethingTrue

เปลี่ยนค่าสถานะแบบไดนามิก:

webpack.config.js ของฉัน

อ่านต่อเกี่ยวกับแอปพลิเคชันตอบโต้ประสิทธิภาพสูงได้ที่นี่

หากคุณชอบบทความนี้โปรดคลิก green สีเขียวด้านล่างเพื่อให้ผู้อื่นสามารถเพลิดเพลินได้ นอกจากนี้โปรดถามคำถามหรือออกจากบันทึกด้วยการปฏิบัติที่มีประโยชน์หรือฟังก์ชั่นที่มีประโยชน์ที่คุณรู้จัก

ติดตามฉันได้ที่ Twitter @nesbtesh