close

React แนวคิดพื้นฐาน- Components, Props, State

1. Components

Components in React เป็นหน่วยการสร้างอิสระที่สามารถนำมาใช้ซ้ำได้ โดยจะแบ่งออกเป็นองค์ประกอบ UI ที่เล็กกว่าและสามารถรวมกันให้ใหญ่ขึ้น components ได้ ตัวอย่างเช่น แอปพลิเคชัน สามารถ มี components เช่น Header และ แต่ละองค์ประกอบมีหน้าที่รับผิดชอบของตนเองและสามารถรับ และ แสดงข้อมูลที่เกี่ยวข้องได้ Sidebar Content props state

ตัวอย่าง:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

 

2. Props

Props ใน React คือค่าที่ส่งผ่านเข้ามา components จากภายนอก พวกเขาช่วยในการส่งผ่านข้อมูลจากผู้ปกครอง ไป components ยังเด็ก เป็นแบบอ่านอย่างเดียวและไม่สามารถเปลี่ยนแปลงภายในส่วนประกอบได้ ในการใช้ เราจะส่งค่าไปยังแอตทริบิวต์ของคอมโพเนนต์และใช้ในส่วน UI components Props props

ตัวอย่าง:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

 

3. State

State in React เป็นข้อมูลที่ไม่แน่นอนที่สามารถเปลี่ยนแปลงได้ภายในส่วนประกอบ state แต่ละคอมโพเนนต์สามารถ จัดเก็บและจัดการข้อมูลไดนามิก ของตนเองได้ เมื่อมี state การเปลี่ยนแปลง React จะอัปเดตอินเทอร์เฟซผู้ใช้ที่เกี่ยวข้องโดยอัตโนมัติ State ได้รับการจัดการในคลาสเท่านั้น components และเริ่มต้นในตัวสร้างของคอมโพเนนต์ ในการอัปเดต state เราใช้ State เมธอด `set()`

ตัวอย่าง:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}