ReactJS คือ ตอนที่ 9 : ส่วนประกอบขององค์ประกอบ (Component Composition)

05มิ.ย. 2023 by รับทำแอพ สบายไอที
  1. ส่วนประกอบขององค์ประกอบ (Component Composition)คืออะไร
  2. ความรู้เบื้องต้นเกี่ยวกับส่วนประกอบ
  3. พื้นฐานของส่วนประกอบองค์ประกอบ (Component Composition)
  4. ส่วนประกอบองค์ประกอบขั้นสูง (Advanced Component Composition)
  5. ส่วนประกอบลำดับที่สูงกว่า (Higher-Order Components) (HOCs) และ Render Props
    5.1 ส่วนประกอบลำดับที่สูงกว่า (HOCs)
    5.2 Render Props
  6. องค์ประกอบองค์ประกอบในทางปฏิบัติ

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

1. ส่วนประกอบขององค์ประกอบ (Component Composition)คืออะไร

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

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

2. ความรู้เบื้องต้นเกี่ยวกับส่วนประกอบ

ใน ReactJS คอมโพเนนต์คือหน่วยการทำเว็บ ReactJS และทำแอพใดๆ แต่ละคอมโพเนนต์คือฟังก์ชันหรือคลาส JavaScript ที่เลือกที่จะยอมรับอินพุตที่เรียกว่า ‘props’ และส่งคืนองค์ประกอบ React ที่อธิบายว่าส่วนของ UI ควรปรากฏอย่างไร

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

3. พื้นฐานของส่วนประกอบองค์ประกอบ (Component Composition)

ลองพิจารณาตัวอย่างง่ายๆ สมมติว่าเรากำลังทำเว็บ ReactJS และทำแอพ และเรามีส่วนประกอบของปุ่มที่เราต้องการใช้ซ้ำในแอปพลิเคชันของเรา

function Button(props) {
    return <button>{props.label}</button>;
}

เราสามารถนำส่วนประกอบปุ่มกลับมาใช้ใหม่ในส่วนประกอบส่วนหัวได้ดังนี้:

function Header() {
    return (
        <header>
            <h1>Welcome to our website!</h1>
            <Button label="Click me" />
        </header>
    );
}

ที่นี่ Button คอมโพเนนต์คือคอมโพเนนต์ลูกในคอมโพเนนต์ Header หลัก นี่คือตัวอย่างพื้นฐานของการจัดองค์ประกอบ

4. ส่วนประกอบองค์ประกอบขั้นสูง (Advanced Component Composition)

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

การกักกัน : บางครั้ง เราไม่รู้ว่าลูกของส่วนประกอบล่วงหน้า ในกรณีเช่นนี้ เราสามารถใช้ childrenprop เพื่อส่งองค์ประกอบไปยังเอาต์พุตโดยตรง

function Container(props) {
    return <div>{props.children}</div>;
}

จากนั้นเราสามารถรวมส่วนประกอบหรือ JSX ระหว่างแท็กเปิดและแท็กปิดของ Container ส่วนประกอบ

<Container>
    <h1>Welcome to our website!</h1>
    <Button label="Click me" />
</Container>

ความเชี่ยวชาญ : บางครั้งเราอาจคิดว่าส่วนประกอบนั้นเป็นกรณีพิเศษของส่วนประกอบอื่น ตัวอย่างเช่น เราอาจมี UserWelcome ส่วนประกอบที่เป็นกรณีพิเศษของ Welcome ส่วนประกอบ

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

function UserWelcome() {
    return <Welcome name="User" />;
}

5. ส่วนประกอบลำดับที่สูงกว่า (Higher-Order Components) (HOCs) และ Render Props

หากต้องการเจาะลึกเพิ่มเติมเกี่ยวกับหลักการขั้นสูงของ ReactJS เราจำเป็นต้องหารือเกี่ยวกับแนวคิดเพิ่มเติมอีกสองแนวคิด: องค์ประกอบลำดับขั้นสูง (HOCs) และ Render Props แนวคิดเหล่านี้มีความสำคัญต่อการทำเว็บ ReactJS และทำแอพ

5.1 ส่วนประกอบลำดับที่สูงกว่า (HOCs)

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

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

function withLoadingSpinner(WrappedComponent) {
    return function EnhancedComponent(props) {
        if (props.isLoading) {
            return <div>Loading...</div>;
        }

        return <WrappedComponent {...props} />;
    };
}

ในตัวอย่างนี้ withLoadingSpinner คือ HOC ใช้ a WrappedComponentเป็นอาร์กิวเมนต์และส่งกลับค่าEnhancedComponent. สิ่งนี้ EnhancedComponent จะแสดงสปินเนอร์การโหลดหาก isLoading เสาเป็นจริง มิฉะนั้นจะทำให้ WrappedComponent.

หากต้องการใช้ HOC นี้ เราสามารถทำได้ดังนี้:

const UserProfileWithSpinner = withLoadingSpinner(UserProfile);

// somewhere in render method
<UserProfileWithSpinner isLoading={true} />

ด้วยวิธีนี้ เราสามารถใช้พฤติกรรมการโหลดซ้ำในส่วนประกอบต่างๆ โดยยึดตามหลักการ DRY (อย่าทำซ้ำตัวเอง)

5.2 Render Props

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

Render props มอบวิธีการมอบหมายการตัดสินใจในการเรนเดอร์ให้กับส่วนประกอบต่างๆ เอง ซึ่งทำให้เรามีความยืดหยุ่นมากขึ้นในการตัดสินใจว่าจะให้เรนเดอร์อะไร

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

class UserList extends React.Component {
    state = {
        users: []
    };

    // Imagine we fill this array in componentDidMount using a fetch request
    componentDidMount() {
        this.setState({
            users: ['John Doe', 'Jane Smith']
        });
    }

    render() {
        return this.props.children(this.state.users);
    }
}

ตอนนี้เราสามารถใช้UserListองค์ประกอบนี้ดังนี้:

<UserList>
    {users => (
        <ul>
            {users.map(user => (
                <li>{user}</li>
            ))}
        </ul>
    )}
</UserList>

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

6. องค์ประกอบองค์ประกอบในทางปฏิบัติ

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

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

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

การตัดสินใจเกี่ยวกับองค์ประกอบ

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

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

ผลกระทบขององค์ประกอบต่อประสิทธิภาพ

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

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

ส่วนประกอบ Composition และ TypeScript

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

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

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

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

React คืออะไร (ReactJS)

ReactJS คือ ตอนที่ 8 : แบบฟอร์ม (Forms) และอินพุต (Inputs)