รู้เบื้องต้นเกี่ยวกับการตอบสนอง

React เป็นไลบรารี JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้ ได้รับการโหวตให้เป็นที่ชื่นชอบมากที่สุดในหมวดหมู่ "Frameworks, Libraries และ Other Technologies" ของ Stack Overflow's 2017 Developer Survey

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

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

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

React เกี่ยวข้องกับองค์ประกอบนั่นคือส่วนประกอบจำนวนมากที่รวมฟังก์ชันการทำงานไว้ในภาชนะที่ห่อหุ้ม

เว็บไซต์ยอดนิยมหลายแห่งใช้ React โดยใช้รูปแบบสถาปัตยกรรม MVC Facebook (บางส่วน), Instagram (โดยสิ้นเชิง), Khan Academy (บางส่วน), New York Times (บางส่วน), Yahoo Mail (โดยสิ้นเชิง), แอปแกลเลอรีรูปภาพและวิดีโอใหม่ของ Dropbox คือ Carousel (โดยสิ้นเชิง) เป็นเว็บไซต์ยอดนิยมที่รู้จักกันว่าใช้ React

const Component2 = () => {
return <div></div>;
};
const Component3 = () => {
return <div></div>;
};
const Component1 = () => {
return (
<div>
<Component2 />
<Component3 />
</div>
);
};
ReactDOM.render(
<Component1 />,
document.getElementById(“app”)
);

แนวทางรหัสที่จำเป็นจะสั่งให้จาวาสคริปต์ทราบว่าควรดำเนินการอย่างไรในแต่ละขั้นตอน ด้วยวิธีการโค้ดที่เปิดเผยเราจะบอก JavaScript ว่าเราต้องการทำอะไรและให้ JavaScript ดูแลดำเนินการตามขั้นตอนต่างๆ

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

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

คุณสมบัติของ ReactJS

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

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

DOM เสมือน: การตอบสนองสร้างโดมเสมือนเช่นแคชโครงสร้างข้อมูลในหน่วยความจำ เฉพาะการเปลี่ยนแปลงสุดท้ายของ DOM เท่านั้นที่ได้รับการอัปเดตในเบราว์เซอร์ DOM ในภายหลัง

Javascript Expressions:สามารถใช้นิพจน์ JS ในไฟล์ jsx โดยใช้วงเล็บปีกกาตัวอย่างเช่น {}

ข้อดีของ ReactJS

ข้อดี / ประโยชน์ที่สำคัญของการใช้ ReactJS มีดังนี้

• ReactJS ใช้ virtual dom ที่ใช้แคชโครงสร้างข้อมูลในหน่วยความจำและมีการอัปเดตเฉพาะการเปลี่ยนแปลงสุดท้ายในเบราว์เซอร์ Dom ทำให้แอปเร็วขึ้น
• คุณสามารถสร้างส่วนประกอบที่คุณเลือกได้โดยใช้คุณลักษณะส่วนประกอบปฏิกิริยา ส่วนประกอบสามารถใช้ซ้ำได้และยังมีประโยชน์ในการบำรุงรักษาโค้ด
• Reactjs เป็นไลบรารีจาวาสคริปต์แบบโอเพนซอร์สดังนั้นจึงเริ่มต้นได้ง่าย
• ReactJS ได้รับความนิยมอย่างมากในช่วงสั้น ๆ และดูแลโดย Facebook และ Instagram มีการใช้งานโดย บริษัท ที่มีชื่อเสียงหลายแห่งเช่น Apple, Netflix และอื่น ๆ
• Facebook ดูแล ReactJS ซึ่งเป็นไลบรารีดังนั้นจึงได้รับการดูแลอย่างดีและอัปเดตอยู่เสมอ
• ReactJS สามารถใช้เพื่อพัฒนา UI ที่สมบูรณ์สำหรับทั้งแอปเดสก์ท็อปและอุปกรณ์เคลื่อนที่
• ง่ายต่อการดีบักและทดสอบเนื่องจากการเข้ารหัสส่วนใหญ่ทำใน Javascript แทนที่จะเป็น Html

นี่คือข้อเสีย / ข้อเสียของการใช้ ReactJS:

• โค้ดส่วนใหญ่เขียนด้วย JSX กล่าวคือ Html และ css เป็นส่วนหนึ่งของจาวาสคริปต์ซึ่งอาจทำให้สับสนได้เนื่องจากเฟรมเวิร์กอื่น ๆ ส่วนใหญ่ชอบแยก Html ออกจากโค้ดจาวาสคริปต์
• ขนาดไฟล์ของ ReactJS มีขนาดใหญ่

เวทมนตร์ของ React มาจากการตีความ DOM และกลยุทธ์ในการสร้าง UI

ในขณะที่สร้างแอปฝั่งไคลเอ็นต์ทีมงานของนักพัฒนา Facebook ตระหนักว่า DOM ทำงานช้า (The Document Object Model (DOM) คืออินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชัน (API) สำหรับเอกสาร HTML และ XML โดยกำหนดโครงสร้างเชิงตรรกะของเอกสารและวิธีการ มีการเข้าถึงและจัดการเอกสาร) ดังนั้นเพื่อให้เร็วขึ้น React จึงใช้ DOM เสมือนซึ่งโดยพื้นฐานแล้วการแสดง DOM แบบทรีใน Javascript ดังนั้นเมื่อจำเป็นต้องอ่านหรือเขียนไปยัง DOM ก็จะใช้การแสดงเสมือนของมัน จากนั้น DOM เสมือนจะพยายามค้นหาวิธีที่มีประสิทธิภาพสูงสุดในการอัปเดต DOM ของเบราว์เซอร์

ไม่เหมือนองค์ประกอบ DOM ของเบราว์เซอร์องค์ประกอบ React เป็นวัตถุธรรมดาและมีราคาถูกในการสร้าง React DOM ดูแลการอัปเดต DOM ให้ตรงกับองค์ประกอบ React เหตุผลก็คือ JavaScript นั้นเร็วมากและมันก็คุ้มค่าที่จะเก็บ DOM ทรีไว้เพื่อเพิ่มความเร็วในการจัดการ

แม้ว่า React จะถูกใช้ในเบราว์เซอร์ แต่เนื่องจากการออกแบบของมันจึงสามารถใช้ในเซิร์ฟเวอร์ที่มี Node.js ได้