คอมโพเนนท์แบ่งเป็น 2 ประเภท
1.ฟังก์ชันคอมโพเนนท์ (Function Component) เป็นคอมโพเนนท์ที่เป็นฟังก์ชัน การทำงานกับข้อมูลในคอมโพเนนท์ประเภทนี้ต้องอาศัยฟีเจอร์ที่เรียกว่า React Hooks ดังตัวอย่างโค๊ด
App.js
import React ,{useState} from 'react';
function App(){
const [data,setData] = useState(0);
return(
<div>
<p>
ข้อมูลปัจจุบัน : {data}
</pgt;
<button onClick={()=>setData(data+1)} > คลิก </button>
</div>
);
}
export default App;
จะขึ้นต้นการประกาศด้วยคำว่า function และมีการใช้ React Hooks คือ useState(0) ที่ใช้แทน การกำหนดค่า State
2.คลาสคอมโพเนนท์ (Class Component) คอมโพเนนท์ประเภทนี้เป็นคลาส ที่สามารถทำงานร่วมกับข้อมูลได้ด้วยตัวมันเอง ดังตัวอย่างโค๊ด
App.js
import React ,{Component} from 'react';
class App extends Component{
constructor(){
super();
this.state = {
data:0
};
}
function test(){
}
render(){
return (
<div>
<p> ข้อมูลปัจจุบัน : {this.state.data} </p>
<button onClick={()=>this.setState({data:this.state.data+1})}></button>
</div>
);
}
}
export default App;
จะเห็นว่าขึ้นต้นประกาศด้วย class มี constructor มี render() และมี function ที่จัดการต่าง ๆ ได้ภายใน class มี state คือตัวแปรที่เปลี่ยนค่าได้