ReactJS คือ ตอนที่ 3 : สถานะ (State) และ Props

03มิ.ย. 2023 by รับทำแอพ สบายไอที

State และ props คืออะไร
1.1 Props (คุณสมบัติ)
1.2 สถานะ (State)
ความแตกต่างระหว่าง State และ Props
การไหลของข้อมูล (Data Flow) : State และ Props
ยก State ขึ้น
State เทียบกับ Props: เมื่อใดควรใช้อันไหน

ReactJS เป็นไลบรารี JavaScript ยอดนิยมที่ใช้สร้างอินเทอร์เฟซผู้ใช้แบบไดนามิกและแบบโต้ตอบ ช่วยให้นักพัฒนาสามารถทำเว็บ ReactJS และทำแอพที่สามารถอัปเดตและแสดงผลได้อย่างมีประสิทธิภาพเพื่อตอบสนองต่อการเปลี่ยนแปลงของข้อมูล ซึ่งนำไปสู่ประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น แนวคิดพื้นฐานสองประการที่ทำให้สิ่งนี้เป็นไปได้คือ ‘สถานะ’ (state) และ ‘props’ ทั้งสองด้านนี้เป็นกุญแจสำคัญในการทำเว็บ ReactJS และทำแอพ

1. State และ props คืออะไร

ใน React ทั้ง ‘state’ และ ‘props’ เป็นวัตถุ JavaScript ธรรมดา ทั้งคู่มีอิทธิพลต่อเอาต์พุตของส่วนประกอบ React แต่ฟังก์ชันการทำงานนั้นแตกต่างกัน

1.1 Props (คุณสมบัติ)

props ย่อมาจาก properties เป็นอินพุตของส่วนประกอบ React พวกเขาถูกส่งลงมาจากองค์ประกอบหลักและไม่สามารถเปลี่ยนแปลงได้ภายในองค์ประกอบย่อยที่ได้รับ ซึ่งหมายความว่าองค์ประกอบย่อยไม่สามารถเปลี่ยน props ได้ มันสามารถอ่านได้เท่านั้น

นี่คือตัวอย่าง:

function WelcomeMessage(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <WelcomeMessage name="Jane" />;
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ในตัวอย่างข้างต้น WelcomeMessage เป็นองค์ประกอบการทำงานที่ยอมรับวัตถุที่เรียก props และส่งคืนองค์ประกอบ React เราเรียกส่วนประกอบของฟังก์ชันนี้ด้วยไวยากรณ์คล้าย HTML <WelcomeMessage />: นี่ name คือเสาที่ส่งต่อจาก App(parent) ไปยัง WelcomeMessage(child)

1.2 สถานะ (State)

สถานะ (State) คล้ายกับ props แต่เป็นส่วนตัวและควบคุมโดยส่วนประกอบทั้งหมด กล่าวอีกนัยหนึ่ง ซึ่งแตกต่างจาก props ที่ส่วนประกอบได้รับ สถานะเป็นแบบท้องถิ่น (local) และเป็นเจ้าของโดยส่วนประกอบ (component) สถานะ (State) จะใช้เมื่อส่วนประกอบจำเป็นต้องติดตามข้อมูลระหว่างการเรนเดอร์ คอมโพเนนต์สามารถเปลี่ยนสถานะ (State) ของตัวเองได้ ซึ่งจะทริกเกอร์การแสดงผลซ้ำและการอัปเดตเป็น DOM

นี่คือตัวอย่าง:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      count: state.count + 1
    }));
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

ในตัวอย่างนี้ Counter เป็นส่วนประกอบของคลาสที่นับจำนวนการคลิกปุ่ม มันเริ่มต้นสถานะในตัวสร้างด้วย count ค่าที่กำหนดเป็น 0 จากนั้นอัปเดตสถานะนี้ทุกครั้งที่คลิกปุ่ม

2. ความแตกต่างระหว่าง State และ Props

ความแตกต่างที่สำคัญระหว่างสถานะ (state) และ props นั้นอยู่ในธรรมชาติ สถานะเปลี่ยนแปลงได้และจัดการภายในคอมโพเนนต์ ในขณะที่พร็อพเปลี่ยนรูปไม่ได้และส่งผ่านจากคอมโพเนนต์หลักไปยังคอมโพเนนต์ย่อย

ลองนึกภาพว่าคุณกำลังทำเว็บ ReactJS และทำแอพ โดยที่ส่วนประกอบต่างๆ ก็เหมือนกับฟังก์ชันที่ส่งกลับ HTML props เป็นเหมือนอาร์กิวเมนต์ของฟังก์ชัน และสถานะก็เหมือนกับตัวแปรภายในของฟังก์ชัน

การทำความเข้าใจความแตกต่างระหว่าง props และสถานะจะช่วยให้คุณตัดสินใจได้ว่าจะใช้ props เมื่อใด ใช้สถานะสำหรับค่าที่ควรเปลี่ยนแปลงเมื่อเวลาผ่านไปและส่งผลต่อเอาต์พุตของคอมโพเนนต์ ในทางกลับกัน ใช้ props สำหรับค่าที่ส่งผ่านจากองค์ประกอบหลักและตั้งใจให้คงที่

3. การไหลของข้อมูล (Data Flow) : State และ Props

ข้อมูลในแอ็พพลิเคชัน React ไหลลง จากองค์ประกอบพาเรนต์ไปยังคอมโพเนนต์ย่อย ซึ่งมักเรียกว่า “one-way data flow” หรือ “unidirectional data flow” นี่คือวิธีที่ state และ props มีบทบาทในเรื่องนี้:

การเปลี่ยนแปลง state/props : เมื่อสถานะของส่วนประกอบหรืออุปกรณ์ประกอบเปลี่ยน ส่วนประกอบจะตอบสนองโดยการแสดงผลซ้ำ
การแสดงผลซ้ำของคอมโพเนนต์ลูก : หากคอมโพเนนต์เป็นเจ้าของสถานะและสถานะนั้นเปลี่ยนแปลง คอมโพเนนต์และคอมโพเนนต์ย่อยจะแสดงผลซ้ำพร้อมกับสถานะที่อัปเดต
การส่งผ่านข้อมูลผ่าน props : ส่วนประกอบหลักสามารถส่งผ่านสถานะไปยังส่วนประกอบย่อยผ่าน props ทำให้ส่วนประกอบย่อยสามารถใช้ข้อมูลนี้ หรือแม้แต่แก้ไขผ่านฟังก์ชันที่ส่งผ่าน props

การไหลของข้อมูลทิศทางเดียว (unidirectional data flow) นี้ทำให้ง่ายต่อการติดตามและทำความเข้าใจว่าการเปลี่ยนแปลงเผยแพร่ผ่านแอปพลิเคชันอย่างไร ทำให้การดีบักและการบำรุงรักษาทำได้ง่ายยิ่งขึ้น

4. ยก State ขึ้น

ในบางครั้ง คุณอาจพบว่าคุณจำเป็นต้องแชร์สถานะระหว่างสององค์ประกอบที่ไม่มีความสัมพันธ์ระหว่างพ่อแม่และลูก ในกรณีเช่นนี้ คุณสามารถ “lift the state up” ซึ่งหมายถึงการย้ายสถานะไปยังบรรพบุรุษ (ancestor) ร่วมกันที่ใกล้เคียงที่สุด

ตัวอย่างเช่น ลองพิจารณาทำเว็บ ReactJS และทำแอพ โดยที่คุณมีคอมโพเนนต์พี่น้อง 2 ตัวที่ต้องแชร์และจัดการข้อมูลเดียวกัน ในที่นี้ การยกสถานะขึ้นเป็นองค์ประกอบหลักเป็นวิธีที่ดีในการจัดการสถานะที่ใช้ร่วมกันนี้

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: ""};

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(e) {
    this.setState({
      text: e.target.value
    });
  }

  render() {
    return (
      <div>
        <InputField text={this.state.text} handleInputChange={this.handleInputChange} />
        <DisplayField text={this.state.text} />
      </div>
    );
  }
}

function InputField(props) {
  return (
    <input value={props.text} onChange={props.handleInputChange} />
  );
}

function DisplayField(props) {
  return (
    <p>You typed: {props.text}</p>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ในตัวอย่างข้างต้น เรากำลังทำเว็บ ReactJS และทำแอพที่มีสองคอมโพเนนต์ที่เป็นพี่น้องกัน InputField และ DisplayField อัป InputField เดต text สถานะที่อยู่ใน App ส่วนประกอบในขณะที่ DisplayField แสดงไฟล์ text. นี่เป็นตัวอย่างคลาสสิกของการยกสถานะขึ้น

5. State เทียบกับ Props: เมื่อใดควรใช้อันไหน

ในขณะที่ทำเว็บ ReactJS และทำแอพ การทำความเข้าใจว่าเมื่อใดควรใช้สถานะหรือ props เป็นพื้นฐาน ต่อไปนี้เป็นแนวทางบางประการ:

ใช้สถานะสำหรับค่าที่ควรเปลี่ยนแปลงเมื่อเวลาผ่านไปและส่งผลต่อสิ่งที่แสดงผล
ใช้ props เพื่อส่งผ่านข้อมูลหรือตัวจัดการเหตุการณ์ไปยังส่วนประกอบย่อย
หากไม่ได้ใช้ค่าในการแสดงผล ค่านั้นอาจไม่อยู่ในสถานะ
หลีกเลี่ยงการทำซ้ำข้อมูลจาก props ในสถานะ เนื่องจากสิ่งนี้จะนำไปสู่จุดบกพร่อง เนื่องจากข้อมูลเหล่านี้อาจไม่ตรงกัน
สำหรับข้อมูลที่ใช้ร่วมกันระหว่างองค์ประกอบต่างๆ ให้ใช้กลยุทธ์การยกสถานะขึ้น

โปรดจำไว้ว่าสถานะทำให้ส่วนประกอบโต้ตอบและไดนามิก หากคอมโพเนนต์ของคุณไม่จำเป็นต้องมีลักษณะการทำงานแบบโต้ตอบหรือไดนามิก คุณสามารถทำให้เป็นคอมโพเนนต์ไร้สถานะได้ โดยใช้ props เท่านั้น

การทำความเข้าใจสถานะและอุปกรณ์เป็นพื้นฐานในการทำเว็บ ReactJS และทำแอพแบบไดนามิก เป็นสองด้านของเหรียญเดียวกันในการควบคุมพฤติกรรมและการเรนเดอร์ของคอมโพเนนต์ props อนุญาตให้ส่วนประกอบลูกรับรู้ข้อมูลระดับแอปพลิเคชันและการเปลี่ยนแปลง ในขณะที่สถานะอนุญาตให้ส่วนประกอบรักษาและอัปเดตข้อมูลภายใน

โปรดจำไว้ว่าพลังของ React อยู่ที่การทำงานร่วมกันระหว่างสถานะและ props และการไหลของข้อมูลทิศทางเดียว)nidirectional data flow) ที่ช่วยให้