Stateless Component ใน React

10 Feb 2018,
Share: 

สวัสดีครับ บทความนี้จะเกี่ยวกับ การสร้างและใช้งาน Stateless Component ใน React ซึ่งเป็นการสร้าง Component อีกรูปแบบหนึ่ง ที่ภายใน Component จะไม่มี State

ในบาง  Component ที่เราสร้างขึ้นมาใช้งานไม่จําเป็นจะต้องใช้ State อาจเป็นเพียง Component ที่รับข้อมูลเข้ามาแล้วแสดงผลเพียงอย่างเดียว จึงไม่จําเป็นต้องสร้าง Component แบบเดิมที่จะต้อง Extends React.Component ทําให้เวลาที่เราใช้งานก็จะมี Life Cycle ต่างๆ ของ React มาด้วย วิธีการสร้าง Stateless Component ง่ายๆก็คือสร้าง Function ขึ้นมาเท่านั้นเอง ตามตัวอย่างนี้

function myName(props) {
  return <h1>My name is {props.name}</h1>
}

Function ด้านบนจะรับค่า Props เข้ามา แล้ว Return JSX ออกไป มาดูตัวอย่างการใช้งานกัน เราจะสร้าง Stateless Component โดยสร้างไฟล์ชื่อว่า myname.js แล้วก็ใส่ Code นี้ลงไป

import React from 'react'

function header(props) {
    return (
        <div>
            <h1>{props.msg}</h1>
        </div>
    )
}

export default header

หรือจะเขียนเทห์ๆ แบบ ES6 จะได้แบบนี้

import React from 'react'

const header = ({ msg }) => (
    <div>
        <h1>{msg}</h1>
    </div>
)

export default header

เวลานํา Component ไปใช้งาน ก็ Import เข้ามาใช้เหมือน Component ทั่วไปได้เลย

<Header msg="My header" />

ลองเอาไปใส่ใน App.js

Image

ลองรันดูจะได้หน้าตาแบบนี้

Image

ข้อดีของ Stateless Component

  • ไม่ต้องใช้ this (ไม่ต้อง bind ใน Constructor) แล้ว เช่น this.props.name ก็ใช้ props.name ได้เลย หรือ {onClikc={handleClikc}
  • ไม่ต้อง extends Class ให้ยุ่งยาก

Suggestion blogs

[ภาษาซี] การรับและแสดงผลข้อมูลแบบตัวอักษร

การรับและแสดงผลแบบตัวอักษร นอกจากการใช้ printf() และ scanf() แล้ว ยังมี function เฉพาะที่ใช้ในการรับและแสดงผลข้อมูลดังนี้

Deno คืออะไร ว่ากันว่าจะมาแทน Node.js

สวัสดีครับ บทความนี้ผมจะมาเรียนรู้กันนะครับว่า Deno คืออะไร มีฟีเจอร์สำคัญอะไรบ้าง รวมไปถึงการใช้งานเบื้องต้นDeno เป็น JavaScript Runtime เหมือนกับ Node.js เลยครับ ผู้สร้าง Deno คือ Ryan Dahl ซึ่งเป็นคนเดียวกันกับผู้ที่เริ่มโครงการ Node.js ตั้งแต่ปี 2009 หลังจากนั้นเค้าก็ได้ออกจากโครงการ Node.js ไปเมื่อปี 2012 และกลับมาพัฒนาโครงการ Deno โดยใช้ภาษา Rust ในการพัฒนา และกล่าวด้วยว่า Deno นั้นสร้างขึ้นมาเพื่อลบข้อเสียของ Node.js ตอนนี้ Deno ก็ออกเวอร์ชั่น 1.0 พร้อมสําหรับการใช้งานจริงแล้ว

วิธีสร้าง VM Instance ใน google developers console

VM Instance เป็นบริการของ google ที่ให้เราสร้างเครื่อง Server(Virtual machine) โดยเราสามารถกําหนดได้ตั้งแต่ Hardware ของเครื่อง ไปจนถึง OS ที่เราต้องการ ทําให้เราสามารถมีเครื่อง Server เป็นของตัวเองได้ง่ายๆภายในไม่กี่คลิ๊ก เริ่มแรกให้เราเข้าไปที่ console.developers.google.com/project จะขึ้นหน้าจอสําหรับจัดการ project ให้เราคลิ๊ก Create Project


Copyright © 2019 - 2025 thiti.dev |  v1.58.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Nostr   Youtube channel   Telegram   Email contact   วงแหวนเว็บ