この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Blog นี้ผมจะมาเขียนอธิบายเกี่ยวกับความแตกต่างระหว่าง Functional Components กับ Class Components ใน react ที่ได้ศึกษามากันครับ
Component คืออะไร
Component คือ HTML Element หนึ่งอัน หรือ กลุ่มของ HTML Element อย่างน้อย 1 อันขึ้นไปมารวมกัน ( HTML Element คือ <span>, <div>, <button>, และอื่นๆเป็นต้น )
โดยในแต่ละ HTML Element มีการกำหนดคุณสมบัติต่างๆให้กับ Element เพื่อให้สามารถตกแต่ง Element ให้สวยขึ้นเช่น
<p style="color:red;">A red paragraph.</p> // จะทำให้ตัวหนังสือเป็นสีแดงหรือตั้งค่าพฤติกรรมต่างๆของ Element เช่น
<button disabled>button</button> // จะทำให้ไม่สามารถกดปุ่มได้Functional component คืออะไร
Functional component คือ component หนึ่งอัน หรือ เป็นกลุ่มของ component หลายๆอันมารวมกัน ใน react จะมีการเขียน functional component เป็น javascript มีรูปแบบการเขียนเหมือนให้ component นั้นๆเป็น function อันนึงของโปรแกรม โดยการเขียนแบบ function จะใช้ได้กับ React version 16.8.xx ขึ้นไปซึ่งมาพร้อมกับ React hook
Syntax :
function helloWorld(props) {
return <h1>hello world</h1>;
}Example :
HTML :
<div id="main"></div>JS :
function HelloFunction (props) {
return <h1>Hello {props.name}</h1>
}
ReactDOM.render(
<HelloFunction name="world" />,
document.getElementById('main')
);Output :
จากตัวอย่าง function HelloFunction จะทำการ return component ที่รับ props ที่มี key = name และ value ＝ world และจะถูกนำไป render ใน <div> ที่มี id=“main”
Class Component คืออะไร
Class Component คือ component หนึ่งอัน หรือ เป็นกลุ่มของ component หลายๆอันมารวมกัน ใน react จะมีการเขียน class component เป็น javascript มีรูปแบบการเขียนเหมือนให้ component นั้นๆเป็น class อันนึงของโปรแกรม ซึ่งเป็นการเขียนในรูปแบบเก่า
Syntax :
class helloWorld extends React.Component {
render() {
return <h1>hello world</h1>;
}
}Example :
HTML :
<div id="main"></div>JS :
class HelloClass extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>
}
}
ReactDOM.render(
<HelloClass name="world" />,
document.getElementById('main')
);Output :
จากตัวอย่าง class HelloClass จะทำการ render component ที่รับ props ที่มี key ＝ name และ value ＝ world และจะถูกนำไป render ใน <div> ที่มี id=“main”
Functional component VS Class Component ต่างกันอย่างไร
| Functional component | Class Component |
|---|---|
| รูปแบบการเขียนเป็น javascript function ทั่วไป function จะรับ props เป็น argument แล้ว return เป็น React element | รูปแบบการเขียนเป็นแบบ class ที่จะต้องสืบทอดจาก React lib อีกทีแล้ว render มาเป็น React element |
| เขียน code ได้สั้นลงเพราะมี lib มาช่วย | ต้องเขียน code หลายบรรทัดมากกว่าเนื่องจากต้องเขียน logic เป็น state |
| ไม่ต้อง render ใน Functional component สามารถ return component ได้เลย | ต้องมี render method ทุกครั้งเพื่อ return component |
| รูปแแบบการเขียนเป็น Stateless ทำให้ไม่ซับซ้อน | รูปแแบบการเขียนเป็น State มีความซับซ้อน มากกว่า |
| มี lifecycle methods บางตัวที่ไม่สามารถใช้ได้เช่น componentDidMount (ใช้ useEffect แทน) | สามารถใช้ componentDidMount ได้ใน class component มากกว่า |
สรุป
สรุปคือใน React การเขียนแบบ Functional component คือรูปแบบการเขียน component แบบใหม่ที่ทำให้ code เราอ่านง่ายเข้าใจง่ายขึ้นนั่นเอง
ข้อมูลอ้างอิง
https://reactjs.org/docs/components-and-props.html
15
