React Tutorial: วิธีเริ่มต้นใช้งานและการเปรียบเทียบ

โดยเฉพาะอย่างยิ่ง Front-end และ JavaScript เป็นโลกที่แปลกประหลาด ปริมาณของสิ่งใหม่ ๆ ที่เปิดตัวในแต่ละวันมักถูกเย้ยหยันโดยคนที่ไม่ได้ร่วมงานกับพวกเขาและอีกหลายคนที่ทำเช่นนั้น ถึงกระนั้น ในบางครั้ง เราก็เต็มไปด้วยข้อมูล ห้องสมุด และการอภิปรายใหม่ ๆ และเราต้องการบางสิ่งที่เสถียร เช่น ที่หลบภัยสำหรับเรือรบ ซึ่งเราสามารถอยู่ได้นานขึ้นอีกหน่อย เมื่อถึงช่วงปลาย React ดูเหมือนจะเป็นท่าเรือที่เชื่องในทะเลแห่งวิวัฒนาการ JavaScript แบบไดนามิก

ด้วยเหตุนี้ เราจึงตัดสินใจสร้างบทช่วยสอน React แบบหลายส่วนนี้ เพื่อแสดงความสามารถและดูว่ามันเปรียบเทียบกับ Angular และ VueJS อย่างไร

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

สถานะของปฏิกิริยาในปี 2019

React เป็นไลบรารีมุมมองที่เราสามารถติดตามย้อนกลับไปได้ในช่วงต้นปี 2011 เมื่อต้นแบบแรกที่เรียกว่า FaxJs ปรากฏบนหน้า Facebook ของมัน Jordan Walke (ซึ่งเป็นผู้เขียนต้นแบบดังกล่าวด้วย) ได้เปิดตัว React ที่ JSConfUS บน 29 พฤษภาคม 2556 และเปิดให้ใช้งานอย่างเปิดเผยบน GitHub เมื่อวันที่ 2 กรกฎาคม 2556

React ยังคงได้รับความนิยมในปี 2014 เมื่อการประชุมเริ่มที่จะขยายชุมชนและทำให้ React เป็นที่นิยม จากมุมมองของฉัน ปี 2015 เป็นปีแห่งความสำเร็จของ React บริษัทใหญ่ๆ (เช่น Airbnb และ Netflix) เริ่มชอบและนำโซลูชัน React มาใช้ นอกจากนี้ React Native ก็ปรากฏตัวขึ้นในปีนั้นด้วย แนวคิดเบื้องหลัง React Native ไม่ใช่สิ่งใหม่ แต่การรับชมเป็นเรื่องที่น่าสนใจ โดยเฉพาะอย่างยิ่งเมื่อได้รับการสนับสนุนจาก Facebook

การเปลี่ยนแปลงครั้งใหญ่อีกประการหนึ่งคือ Redux ซึ่งเป็นการนำ Flux ไปใช้งาน วิธีนี้ทำให้การจัดการของรัฐเข้าถึงได้ง่ายขึ้นและง่ายขึ้น ทำให้การดำเนินการนี้ประสบความสำเร็จมากที่สุดในปัจจุบัน

ระหว่างนั้นและตอนนี้ มีสิ่งอื่นๆ มากมายรวมถึงเครื่องมือ React, การเขียนอัลกอริธึมหลัก, ไฟเบอร์, การเปลี่ยนแปลงการกำหนดเวอร์ชันเชิงความหมาย และอื่นๆ กรอไปข้างหน้าจนถึงวันนี้ เราอยู่ที่ 16.6.3 อาจเป็นสองสามสัปดาห์ก่อนที่เวอร์ชันใหม่ที่มี Hooks จะพร้อมใช้งาน (ซึ่งควรจะเป็น 16.7.0 แต่เวอร์ชันนั้นได้เปิดตัวไปแล้วเนื่องจากการแก้ไขบางอย่างสำหรับ React.lazy) React เป็นที่รู้จักและเสถียรและได้รับความคิดเห็นที่ยอดเยี่ยม

แต่ปฏิกิริยา คือ อะไร?

ถ้าคุณเป็นผู้พัฒนา front-end และคุณยังไม่เคยได้ยินเกี่ยวกับมัน ฉันต้องขอแสดงความยินดีกับมันด้วย นั่นเป็นความสำเร็จที่ดีทีเดียว

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

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

เรามาหยุดที่ระบบการตั้งชื่อและมุ่งเน้นไปที่สิ่งที่แตกต่างใน React กับสิ่งที่เราไม่เคยมีมาก่อนการก่อตั้ง ก่อนอื่น เมื่อคุณนึกถึง React ครั้งแรก คุณคิดว่า JSX เป็นสิ่งแรกที่เข้ามาในสายตาคุณเมื่อคุณดูโค้ด JSX เป็นส่วนขยายไวยากรณ์ JavaScript ที่ค่อนข้างคล้ายกับ HTML/XML เมื่อพูดถึง React และ JSX เรามีความแตกต่างเล็กน้อยจาก HTML เช่น คลาสใน React คือ className ไม่มี tabindex แต่ tabIndex สไตล์จะยอมรับอ็อบเจ็กต์ JavaScript ที่มีคุณสมบัติ camelCased และอื่นๆ

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

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

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

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

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

อันที่จริง ฉันมีเหตุผลอื่นว่าทำไมฉันจึงแสดงตัวอย่างด้านบน บ่อยครั้งนักพัฒนาไม่เข้าใจว่าทำไมเราต้องทำสิ่งต่อไปนี้:

 import React from 'react';

ตัวอย่างข้อมูลควรอธิบายตนเองได้ แม้ว่าเราจะแยก Component แต่เราก็ยังต้องการ React เพราะ Babel transpils เหนือ JSX ไปด้านล่าง React.createElement ดังนั้น หากเราไม่นำเข้า React มันจะล้มเหลวสำหรับเรา ฉันพูดถึง Babel ซึ่งเป็นเครื่องมือที่ช่วยให้เราแนะนำสิ่งต่าง ๆ ที่ยังไม่อยู่ใน JavaScript (หรือมากกว่าในเบราว์เซอร์) หรือเป็นส่วนขยายอย่างใด (หรือภาษาอื่นเช่น TypeScript ซึ่ง Babel รองรับจาก Babel 7) ขอบคุณ Babel:

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

กล่าวโดยย่อ พรุ่งนี้คือวันนี้ใน JavaScript นี่อาจเป็นสิ่งที่ต้องมีบทความของตัวเอง เป็นมูลค่าการกล่าวขวัญว่าการนำเข้า React สามารถข้ามได้ด้วยเทคนิคอื่น ๆ (เช่นการแนะนำ ProvidePlugin ผ่าน Webpack เป็นต้น) แต่เนื่องจากพื้นที่จำกัดที่นี่ เราจะหลีกเลี่ยงและถือว่าผู้ใช้จะใช้ Create React App ( CRA) (เพิ่มเติมเกี่ยวกับเครื่องมือนี้จะกล่าวถึงในภายหลัง)

สิ่งสำคัญอันดับสอง และสำคัญกว่าตัว JSX มากคือ React นั้นใช้ DOM เสมือน กล่าวโดยย่อ DOM เสมือนคือหน่วยความจำของแผนผังในอุดมคติซึ่งแสดงโดย JavaScript ที่นักพัฒนาเขียน ซึ่งเปรียบเทียบในภายหลังกับ DOM จริงและซิงค์กับมันในกระบวนการที่เรียกว่าการกระทบยอด

React เปรียบเทียบกับ Angular และ Vue อย่างไร?

ฉันค่อนข้างไม่ชอบการเปรียบเทียบไลบรารี โดยเฉพาะอย่างยิ่งเมื่อเราถูกบังคับให้เปรียบเทียบลูกแพร์กับแอปเปิ้ล (ไลบรารีกับเฟรมเวิร์กและอื่น ๆ )

ดังนั้น ฉันจะพยายามเปรียบเทียบ React กับ Angular และ Vue โดยใช้ชุดคำถามและคำตอบสั้นๆ ที่ไม่เกี่ยวอะไรกับเรื่องทางเทคนิคมากนัก แทนที่จะพูดว่า “X ดีกว่า Y เพราะใช้ JSX ไม่ใช่เทมเพลต ” ประเด็นเช่นนี้มักจะเป็นความชอบส่วนบุคคล ความเร็ว การจัดสรรหน่วยความจำ ฯลฯ ค่อนข้างคล้ายกันใน React และคู่แข่งรายใหญ่ทั้งหมด (นึกถึง Angular และ Vue) มีรายงานที่ดีจริงๆ เกี่ยวกับเรื่องนี้ แต่โปรดทราบว่า: แอปพลิเคชันส่วนใหญ่ดูไม่เหมือนตารางขนาดใหญ่จริงๆ ที่สลับแถวในตาราง 10k ดังนั้น ผลลัพธ์เหล่านี้จึงเป็นการทดสอบความเร็วล้วนๆ ในโลกแห่งความเป็นจริง เจ้าจะไม่ทำสิ่งนั้นตั้งแต่แรก

ลองมาดูคำถามบางข้อเกี่ยวกับ React และเปรียบเทียบกับคู่แข่งกัน:

อยากมีโอกาสได้งานเยอะๆ React ได้รับความนิยมแค่ไหน?

นั่นเป็นคำตอบที่ง่าย—เลือก React ที่จริงแล้ว ฉันจะบอกว่า React มีประมาณ 6-10 เท่า (ค่อนข้างกว้าง แต่มีบางพอร์ทัลที่ 1:50 และบางแห่งที่มี 1:6) ตำแหน่งงานว่างมากกว่า Vue และ 2-4 เท่า กว่าเชิงมุม ความต้องการผู้เชี่ยวชาญ React นั้นแข็งแกร่ง ดังนั้นทำไม Vue จึงได้รับความนิยมใน GitHub (มีดาวมากกว่า React ในความเป็นจริง) แต่ก็มีตำแหน่งงานว่างน้อยลง ฉันไม่รู้.

ฉันต้องการชุมชนขนาดใหญ่ ห้องสมุดมากมาย การแก้ไขปัญหาที่อาจเกิดขึ้นอย่างรวดเร็ว

ตอบสนอง มองไม่เพิ่มเติม

ใช้งานง่ายและทำให้การพัฒนาสนุกหรือไม่?

อีกครั้งตามรายงานของ State of JS สำหรับปี 2018 และ 2017 ทั้ง React และ Vue ต่างก็มีชื่อเสียงที่ดีมาก และนักพัฒนาส่วนใหญ่บอกว่าพวกเขาจะใช้มันอีกครั้ง ในทางกลับกัน Angular มีแนวโน้มที่จะส่งผู้คนจำนวนมากขึ้นเรื่อย ๆ บอกว่าจะ ไม่ ใช้อีก

ฉันต้องการสร้างแอปพลิเคชันหน้าเดียวใหม่ แต่ฉันไม่ต้องการค้นหาไลบรารี

นั่นอาจเป็นที่เดียวที่ฉันจะบอกว่า Angular เป็นตัวเลือกที่ดีกว่า

ไม่มีบริษัทใหญ่โต อยากเป็นอิสระให้มากที่สุด เลือกแบบไหนดี?

Vue—เป็นหนึ่งเดียวในสามคนใหญ่ของเรา (Facebook สนับสนุน React ในขณะที่ Google อยู่เบื้องหลัง Angular)

การเริ่มต้นที่ง่ายที่สุดและเส้นโค้งการเรียนรู้ที่เร็วที่สุด?

วิว/ตอบสนอง. ฉันเอนเอียงไปทาง Vue ที่นี่ แต่นั่นเป็นเพียงความเห็นส่วนตัวของฉัน

ทำไม? เพราะคุณไม่จำเป็นต้องรู้ JSX (เป็นทางเลือก) และโดยพื้นฐานแล้วมันก็แค่ HTML + CSS + JavaScript

React Tutorial: เริ่มต้นใช้งานแอปแรกของคุณ

วิธีที่ง่ายที่สุดในการเริ่มต้น React ในปัจจุบันคือการใช้ CRA ซึ่งเป็นเครื่องมือ CLI ที่สร้างโครงการสำหรับคุณ และช่วยให้คุณหลีกเลี่ยงการตั้งค่าที่จำเป็นทั้งหมดสำหรับ Webpack/Babel และอื่นๆ แต่คุณอาศัยวิธีการกำหนดค่าตามค่าเริ่มต้นและสิ่งที่รวมอยู่ในนั้นเมื่อเวลาผ่านไป ด้วยเหตุนี้ คุณจึงไม่จำเป็นต้องสนใจการอัปเดตที่สำคัญสำหรับไลบรารีที่สำคัญบางรายการ

แน่นอน ในภายหลัง คุณสามารถ "ดีด" ตัวเองและจัดการทุกๆ ด้านได้ด้วยตัวเองโดยเรียกใช้ npm run eject แนวทางนี้มีจุดแข็งในตัวเอง เนื่องจากคุณสามารถปรับปรุงแอปของคุณด้วยสิ่งต่าง ๆ ที่อาจไม่พร้อมใช้งาน (เช่น นักตกแต่ง) แต่ก็อาจเป็นสาเหตุของอาการปวดหัวได้เช่นกัน เนื่องจากต้องใช้ไฟล์พิเศษจำนวนมากและใช้เวลามากขึ้น

ดังนั้น สิ่งแรกที่ต้องทำคือ:

 npx create-react-app {app-name}

จากนั้น npm run start และคุณพร้อมที่จะไป

คลาสเทียบกับส่วนประกอบฟังก์ชัน

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

คอมโพเนนต์คลาสมีสองประเภท: Component และ PureComponent ข้อแตกต่างระหว่างสองสิ่งนี้คือ PureComponent กำลังทำการเปรียบเทียบอุปกรณ์ประกอบฉากและสถานะแบบตื้น—มีประโยชน์ในตัวของมันเองในสถานการณ์ที่คุณไม่ต้องการสร้างการแสดงผลที่ "สิ้นเปลือง" โดยที่ส่วนประกอบและลูกๆ ของมันอยู่ในสถานะเดียวกันทุกประการ หลังจากการเรนเดอร์ ถึงกระนั้น มันเป็นเพียงการเปรียบเทียบที่ตื้นเท่านั้น หากคุณต้องการใช้การเปรียบเทียบของคุณเอง (เช่น เนื่องจากคุณกำลังส่งอุปกรณ์ประกอบฉากที่ซับซ้อน) เพียงใช้ Component และแทนที่ shouldComponentUpdate (ซึ่งโดยค่าเริ่มต้นจะคืนค่าเป็น true) ตั้งแต่ 16.6 ขึ้นไป สิ่งที่คล้ายกันก็สามารถใช้ได้กับองค์ประกอบของฟังก์ชันด้วย — ขอบคุณ React.memo ซึ่งเป็นองค์ประกอบลำดับที่สูงกว่าและโดยค่าเริ่มต้นจะทำงานเหมือน PureComponent (การเปรียบเทียบแบบตื้น) แต่ต้องใช้อาร์กิวเมนต์ที่สองซึ่งคุณสามารถผ่านการเปรียบเทียบอุปกรณ์ประกอบฉากที่คุณกำหนดเองได้ .

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

React Lifecycle Methods

ตัวสร้าง (อุปกรณ์ประกอบฉาก)

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

componentDidMount()

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

componentWillUnmount()

• ล้างข้อมูลทั้งหมดที่ยังคงดำเนินอยู่—เช่น Ajax ควรถูกขัดจังหวะ ยกเลิกการสมัครรับข้อมูล ล้างตัวจับเวลา และอื่นๆ
• อย่าเรียก setState เนื่องจากไม่มีจุดหมายเพราะคอมโพเนนต์จะถูกยกเลิกการต่อเชื่อม (และคุณจะได้รับคำเตือน)

componentDidUpdate (prevProps, prevState, สแนปชอต)

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

shouldComponentUpdate(nextProps, nextState)

• เพื่อการเพิ่มประสิทธิภาพเท่านั้น
• หากคืนค่าเป็นเท็จ การเรนเดอร์จะไม่ถูกเรียกใช้
• สามารถใช้ PureComponent แทนได้หาก SCO ที่ถูกแทนที่เป็นเพียงการเปรียบเทียบอุปกรณ์ประกอบฉาก/สถานะแบบตื้น

getSnapshotBeforeUpdate()

• สามารถใช้สำหรับเก็บข้อมูลบางอย่างเกี่ยวกับ DOM ปัจจุบัน เช่น ตำแหน่งการเลื่อนปัจจุบัน ซึ่งสามารถนำมาใช้ใหม่ได้ในภายหลังภายใน componentDidUpdate เพื่อเรียกคืนตำแหน่งของการเลื่อน

componentDidCatch (ข้อผิดพลาด ข้อมูล)

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

มีวิธีการพิเศษสองวิธีซึ่งทั้งสองแบบคงที่และถูกกล่าวถึงในคำอธิบายอื่น

คงที่ getDerivedStateFromError (ข้อผิดพลาด)

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

คงที่ getSnapshotBeforeUpdate (อุปกรณ์ประกอบฉาก สถานะ)

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

โปรดทราบว่ามีวิธีการอื่นๆ อีกสองสามวิธีที่สามารถใช้ได้ ณ วันนี้ แต่ควรจะลบใน React 17.0 ดังนั้นจึงไม่มีการกล่าวถึงที่นี่

รัฐกับอุปกรณ์ประกอบฉาก

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

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

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

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

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

ในทางกลับกัน State เป็นสถานะท้องถิ่นที่สามารถแก้ไขได้ แต่โดยอ้อมโดยใช้ this.setState หากมีคนเปลี่ยนสถานะโดยตรง คอมโพเนนต์จะไม่รับรู้ถึงการเปลี่ยนแปลงและจะไม่แสดงผลซ้ำเพื่อสะท้อนการเปลี่ยนแปลงดังกล่าวไปยังสถานะ

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

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) – แบบฟอร์มนี้ช่วยให้เราแนบ callback ได้ ซึ่งจะถูกเรียกใช้เมื่อ state สะท้อนถึงข้อมูลที่เราต้องการ (ในอาร์กิวเมนต์แรก)

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

โต้ตอบบริบท

React เพิ่งทำให้ Context API เสถียรขึ้น (ซึ่งอยู่ใน React มาระยะหนึ่งแล้ว แต่เป็นฟีเจอร์ทดลองแม้จะถูกใช้อย่างแพร่หลายในไลบรารียอดนิยมบางตัว เช่น Redux) ซึ่งช่วยให้เราแก้ปัญหาหนึ่งอย่าง: การเจาะอุปกรณ์ประกอบฉาก การเจาะลึกอุปกรณ์ประกอบฉากเป็นวิธีที่จะส่งต่ออุปกรณ์ประกอบฉากอย่างลึกซึ้งภายในโครงสร้าง—เช่น อาจเป็นธีมบางประเภทสำหรับส่วนประกอบ การโลคัลไลเซชันสำหรับภาษาเฉพาะ ข้อมูลผู้ใช้ และอื่นๆ ก่อนบริบท (หรือก่อนที่มันจะไม่ใช่การทดลอง) มันถูกเจาะลึกโดยส่งผ่านแบบวนซ้ำจาก parent to child ผ่านไปยัง leaf สุดท้าย (เห็นได้ชัดว่ามี Redux ซึ่งสามารถแก้ปัญหาได้เช่นกัน) โปรดทราบว่าคุณลักษณะนี้แก้ปัญหาการเจาะอุปกรณ์ประกอบฉากเท่านั้น และไม่สามารถแทนที่ Redux หรือ Mobx ได้ แน่นอน หากคุณใช้ไลบรารีการจัดการสถานะเพื่อสิ่งนั้นเท่านั้น คุณสามารถเปลี่ยนได้อย่างอิสระ

ห่อ

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