การเลือกระหว่างส่วนประกอบของคลาสและส่วนประกอบการทำงานใน React

ความแตกต่างหลัก

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

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

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

ส่วนประกอบการทำงานเป็นเพียงฟังก์ชัน JavaScript ที่ส่งคืนองค์ประกอบการตอบสนอง ง่ายกว่าส่วนประกอบของคลาสและอ่านและเขียนได้ง่ายกว่า ต่อไปนี้คือส่วนประกอบเดียวกับด้านบน เขียนเป็นส่วนประกอบการทำงาน:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

จะใช้อะไรเมื่อไหร่

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

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

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

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

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

1. เมื่อคุณไม่จำเป็นต้องใช้ state หรือ lifecycle method: หากคุณไม่ต้องการใช้ state หรือ lifecycle method คอมโพเนนต์ที่ใช้งานได้ก็เป็นตัวเลือกที่ดี เพราะอ่านและเขียนง่ายกว่าคอมโพเนนต์คลาส

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

3. เมื่อคุณต้องการเพิ่มประสิทธิภาพ: เนื่องจากส่วนประกอบการทำงานบริสุทธิ์ จึงสามารถปรับให้เหมาะสมได้ง่ายขึ้นโดย React ซึ่งอาจส่งผลให้ประสิทธิภาพดีขึ้น

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

โดยทั่วไป คุณควรใช้ส่วนประกอบการทำงาน เว้นแต่ว่าคุณมีความต้องการเฉพาะที่สามารถตอบสนองได้ด้วยส่วนประกอบของคลาสเท่านั้น

useEffect & useState

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

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

นี่คือวิธีที่คุณจะนำไปใช้ ใช้เอฟเฟกต์ และ ใช้สถานะ ภายในส่วนประกอบการทำงานของคุณ

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

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

ประเด็นที่สำคัญ

สิ่งเหล่านี้เป็นประเด็นหลักในการเลือกระหว่างส่วนประกอบคลาสและส่วนประกอบการทำงานใน React:

1. ส่วนประกอบของคลาสถูกกำหนดโดยใช้คลาสที่ขยายคลาส React.Component และมีตัวเลือกเพิ่มเติมสำหรับการจัดการสถานะและเหตุการณ์วงจรชีวิต
2. คอมโพเนนต์ของฟังก์ชันเป็นเพียงฟังก์ชัน JavaScript ที่ส่งคืนองค์ประกอบ React และอ่านและเขียนได้ง่ายกว่าและง่ายกว่า
3. คุณควรใช้คอมโพเนนต์การทำงาน เว้นแต่ว่าคุณต้องการใช้ฟีเจอร์ที่มีให้ใช้งานในคอมโพเนนต์ของคลาสเท่านั้น เช่น เมธอด state หรือ lifecycle
4. คุณสามารถใช้ตะขอ useState และ useEffect เพื่อเพิ่มสถานะและแสดงผลข้างเคียงในส่วนประกอบการทำงาน
5. โดยรวมแล้ว ตัวเลือกระหว่างคลาสคอมโพเนนต์และคอมโพเนนต์การทำงานขึ้นอยู่กับสิ่งที่ดีที่สุดสำหรับความต้องการของคุณ และสิ่งที่ทำให้โค้ดของคุณอ่านและเข้าใจได้ง่ายที่สุด

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

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://www.codementor.io/maximiliangeiger/making-the-choice-between-class-components-and-functional-components-in-react-20uvaeyqci