ถนนสู่การตอบสนอง

Dec 01 2022

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

ภาพถ่ายโดย Ksenia Yakovleva บน Unsplash

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

ฉันคิดว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับแนวคิด Javascript และ HTML DOM ถ้าไม่ คุณสามารถอ่านแนวคิดเหล่านี้ได้ที่นี่: คู่มือJavascript , บทนำสู่ DOM

เรามาเข้าเรื่องกันเลยดีกว่า!!

เว็บเพจถูกสร้างขึ้นอย่างไร?

คุณเคยสงสัยไหมว่าเว็บทำงานอย่างไร? จะเกิดอะไรขึ้นหลังจากที่คุณพิมพ์ URL ของเว็บไซต์แล้วคลิก Enter คุณจะเห็นหน้าเว็บนั้นบนหน้าจอของเราได้อย่างไร? ลองดูทีละขั้นตอน

1. เมื่อคุณค้นหาเว็บไซต์ใด ๆ คำขอ HTTP จะถูกส่งไปยังเซิร์ฟเวอร์

2. เซิร์ฟเวอร์จะส่งไฟล์เว็บไซต์

3. เบราว์เซอร์จะแยกวิเคราะห์ไฟล์เหล่านี้ ในตอนแรก ไฟล์ HTML จะถูกแยกวิเคราะห์ จากนั้นจึงแยกวิเคราะห์ไฟล์ CSS และ JavaScript

4. เบราว์เซอร์สร้าง DOM จาก HTML ที่แยกวิเคราะห์แล้วแสดงบนหน้าจอ

นี่คือวิธีที่หน้าเว็บแสดงบนหน้าจอของคุณ (มีแนวคิดอื่นๆ เช่น เซิร์ฟเวอร์ DNS และโปรโตคอล HTTP แต่นั่นไม่ใช่ประเด็นที่เรากังวล) มันง่ายอย่างนั้น แต่เดี๋ยวก่อน DOM นี้คืออะไร? มันมาจากไหน? เรามาสำรวจ DOM กันสักหน่อยดีไหม?

DOM หมายถึง Document Object Model ซึ่งแสดงถึงเอกสาร HTML ที่มีแผนผังตรรกะ แต่ละสาขาประกอบด้วยโหนด และแต่ละโหนดประกอบด้วยวัตถุ วิธีการ DOM อนุญาตให้เข้าถึง DOM ด้วยวิธีการเหล่านี้ คุณสามารถเปลี่ยนโครงสร้างและเนื้อหาของเอกสารได้

อย่างที่เราทราบกันดีว่า HTML เป็นองค์ประกอบพื้นฐานของเว็บ และเราสามารถสร้างเว็บเพจโดยใช้ HTML ได้ มาสร้างหน้าเว็บง่ายๆ ที่แสดงข้อความ “Hello world!!” ดังที่แสดงด้านล่าง:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

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

มาดูรหัส JavaScript ที่โต้ตอบกับ "Hello World!!" ที่สร้างขึ้นด้านบน หน้าและเปลี่ยนเนื้อหาเป็น “Wassup World!!”

การสร้างองค์ประกอบ HTML ด้วย Javascript:

ดังที่เราได้เห็นแล้วว่าเราสามารถแก้ไของค์ประกอบ HTML ผ่านจาวาสคริปต์ได้ ลองสร้างหน้าเว็บที่มีdivที่มี “root” เป็น id และ h1เป็น child ของdiv h1ประกอบด้วย “Hello World!!” รหัสสามารถพบได้ในกล่องทรายด้านล่าง

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

การเขียนโปรแกรมที่จำเป็นคือวิธีที่คุณทำบางสิ่ง และการเขียนโปรแกรมเชิงประกาศเป็นเหมือนสิ่งที่คุณทำ นี่คือบทความที่สวยงามเกี่ยวกับการเขียนโปรแกรมที่จำเป็นกับการประกาศ

React เป็นภาษาประกาศ กล่าวคือ ช่วยให้เราสามารถเขียนโค้ดโดยไม่ต้องกังวลว่าสิ่งต่างๆ จะเกิดขึ้นภายใต้ประทุนอย่างไร

มาดูกันว่าการเขียนโปรแกรมเชิงประกาศจะทำให้ชีวิตเราง่ายขึ้นได้อย่างไร

ภาพรวมของ React API:

React API มีวิธีการจัดการกับ DOM เช่น React.createElement() และ ReactDOM.render() พิจารณาเมธอด React.createElement() ให้เทียบเท่ากับ document.createElement() และ ReactDOM.render() เป็น document.append() มาดูวิธีการเหล่านี้กัน

React.createElement() รับสองอาร์กิวเมนต์: องค์ประกอบที่จะสร้างและอุปกรณ์ประกอบฉาก หากคุณต้องการสร้าง แท็ก div อย่างง่าย ด้วย id “root” และข้อความ “Hello World!” ข้างในมันจะเป็นดังนี้:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

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

ตอนนี้เรามาสร้าง "Hello World!!" แบบเดียวกันอีกครั้ง หน้าด้วย React API

เสาย่อยสำหรับ React.createElement() สามารถเป็นข้อความล้วนหรือเป็นองค์ประกอบอื่นได้ นั่นคือวิธีที่เราสร้างองค์ประกอบที่ซ้อนกัน เพื่ออธิบาย ให้พิจารณาโค้ด HTML ต่อไปนี้: divเป็นคอนเทนเนอร์ที่มี div อื่นเป็นลูก แท็ก divลูก ประกอบด้วยแท็ก spanสองแท็กที่มีข้อความ "Hello" และ "World" ลิงก์ไปยังโค้ดแซนด์บ็อกซ์

การสร้างองค์ประกอบซ้อนด้วย React API

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

JSX:

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

เนื่องจาก JSX ไม่ใช่ Javascript คุณต้องแปลงเป็น JavaScript ซึ่งเบราว์เซอร์เข้าใจ

Babelเป็น transpiler ที่แปล JSX เป็น Javascript JSX ทั้งหมดถูกแปลงเป็น React API โดย Babel ดังที่แสดงด้านล่าง

Babel แปล JSX เป็น Javascript

ดังที่เห็นในภาพก่อนหน้านี้<div id="root”>ถูกแปลงเป็นReact.createElement(“div”,{id:”root”},children) นี่คือวิธีที่ Babel แปลง JSX เป็น React API

ในการใช้ Babel ในโปรเจ็กต์ของเรา เราต้องใช้ไฟล์สคริปต์จากunpkg.comและเราสามารถเริ่มเขียน JSX ภายในแท็กสคริปต์ที่กล่าวถึงtype =” text/babel” เพื่อความชัดเจนยิ่งขึ้น คุณสามารถอ้างอิงจากแซนด์บ็อกซ์ด้านล่าง

เรามาไกลจากการแก้ไข DOM ผ่าน Javascript ไปจนถึงการใช้ JSX ไม่เหมือนกับใน Javascript เราไม่ใส่ใจเกี่ยวกับวิธีสร้างองค์ประกอบในขณะที่ใช้ JSX เป็นหน้าที่ของ Babel ในการแปลงให้เป็น React API ซึ่งจะแก้ไข DOM

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

การสร้างส่วนประกอบการตอบสนอง:

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

ลองมาเป็นตัวอย่าง

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

เราได้ส่ง ฟังก์ชัน ข้อความเป็นพารามิเตอร์ไปยัง React.createElement() แทนที่จะเป็นองค์ประกอบ เมื่อเราส่งฟังก์ชันเป็นพารามิเตอร์ไปยัง React.createElement() React Reconcilerจะเรียกใช้ฟังก์ชันนั้นด้วยพารามิเตอร์ที่เราส่งผ่าน เมื่อผู้กระทบยอดพบองค์ประกอบของโฮสต์ ก็จะให้ตัวเรนเดอร์ดูแลการติดตั้งองค์ประกอบนั้น

ส่วนประกอบโฮสต์เป็นส่วนประกอบเฉพาะแพลตฟอร์มที่เป็นของสภาพแวดล้อมโฮสต์ (เช่น เบราว์เซอร์หรืออุปกรณ์เคลื่อนที่) ในกรณีของโฮสต์ DOM องค์ประกอบเหล่า นี้อาจเป็นองค์ประกอบ HTML เช่นdivหรือimg

ในกรณีของเรา จะมีการเรียกใช้ฟังก์ชันสองรายการ ข้อความ (“Hello World!!”)และข้อความ (“GoodBye World!!”)และทั้งสองฟังก์ชันจะส่งกลับ:

<div className=”msg”> สวัสดีชาวโลก!! </div>

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

หากต้องการใช้ส่วนประกอบแบบกำหนดเองเป็นแท็ก JSX เราต้องทำให้อักขระตัวแรกของชื่อฟังก์ชันเป็นตัวพิมพ์ใหญ่ เพื่อให้ Babel รับรู้ว่าเป็นส่วนประกอบแบบกำหนดเอง ดูเหมือนว่า:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

เย่!! เราได้สร้างส่วนประกอบ React แรกของเราแล้ว

บทสรุป:

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