React.js :การใช้ Constructor ของ Component

ใน React.js นั้นทุกอย่างจะเริ่มต้นด้วย component จากนั้นก็จะมีเรื่องของ state เข้ามาเพื่อกำหนดจังหวะและ logic ในการทำงาน ซึ่งเรื่องของ state จะมาเขียนอธิบายในบทความหน้า แต่บทความนี้จะมาพูดถึง Constructor ซึ่งทาง React.js นั้นได้ออกแบบมาเป็นพื้นฐานรูปแบบทั่วไปเหมือนในภาษา Programming อื่นๆคือ ใช้คำว่า constructor เลยมีการเรียกใช้ super เพื่อใช้ constructor ของ class แม่ตามแบบฉบับ OOP มาตราฐาน

ซึ่งการกำหนด constructor ของ class component ชัดเจนทำให้ง่ายต่อการพัฒนา ต่างจากรูปแบบ javascript แบบเก่าที่ใช้งาน constructor ได้สับสน เอาละเรามาดูรูปแบบการใช้งานกัน

     class Car extends React.Component{
        constructor(){
            super()
            this.state = {color: "red", power: "oil"}
        }
        render(){
            return <h2>Car is {this.state.color} Color User Power: {this.state.power}</h2>
        }
    }

    class ElectricCar extends Car{
        constructor(){
            super()
            this.state = {power:"Electric", speed: 300}
        }
        render(){
            return <h2>Car is {this.state.color} Color, 
            User Power: {this.state.power}, Speed: {this.state.speed}</h2>
        }
    }
    ReactDOM.render(<Car/>, document.getElementById('contentA'))
    ReactDOM.render(<ElectricCar/>, document.getElementById('contentB'))

จากโค้ดจะเห็นมาสิ่งเริ่มต้นทำใน constructor นั้นจะเป็นการกำหนดค่า state และ prop ให้กับ component ที่สร้างขึ้นเพื่อเป็นการกำหนดค่าเริ่มต้น เหมือนกับ การสร้าง object ในภาษานั้นเองรวมไปถึงเพื่อให้ง่ายต่อการกำหนด design state การทำงานของ component ได้อีกด้วย นอกจากนี้ จะเห็นมาเราสามารถใช้คำสั่ง super เพื่อให้เรียกใช้ constructor ของ class แม่ ซึ่งสังเกตว่า Class Car นั้นมีการกำหนด ค่า state power เป็น oil แต่เมื่อ Class ElectricCar สืบทอด Class Car มีการ override state power ให้เป็น Electric นอกจากนี้ยังมีการเพิ่ม state speed อีกด้วย เมื่อสั่ง render component ทั้งสอง Class ก็จะได้ดังรูปครับ

จุดสังเกตว่าถ้าเราลองลบคำสั่ง super ใน class ElectricCar จะทำให้ Error รันไม่ผ่านนะครับอาจเป็นรูปแบบบังคับให้ทำการเรียก constructor ของ Class แม่เสมอก็ได้ครับ

โค้ดเต็ม

<!DOCTYPE html>
<html>

<head>
    <title>Hello World</title>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<div id="contentA"></div>
<div id="contentB"></div>
<script type="text/babel">
    class Car extends React.Component{
        constructor(){
            super()
            this.state = {color: "red", power: "oil"}
        }
        render(){
            return <h2>Car is {this.state.color} Color User Power: {this.state.power}</h2>
        }
    }

    class ElectricCar extends Car{
        constructor(){
            super()
            this.state = {power:"Eletric", speed: 300}
        }
        render(){
            return <h2>Car is {this.state.color} Color, 
            User Power: {this.state.power}, Speed: {this.state.speed}</h2>
        }
    }
    ReactDOM.render(<Car/>, document.getElementById('contentA'))
    ReactDOM.render(<ElectricCar/>, document.getElementById('contentB'))
</script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

ก็เป็นอันจบบทความการใช้งาน constructor ใน React.js ไว้เพียงเท่านี้นะครับ ยังไงก็ฝากติดตามบทความในตอนต่อๆไปนะครับ

Leave a Reply

Your email address will not be published. Required fields are marked *