ReactJS - วงจรชีวิตของส่วนประกอบ

ในบทนี้เราจะพูดถึงวิธีวงจรชีวิตของส่วนประกอบ

วิธีการตลอดอายุการใช้งาน

  • componentWillMount ถูกดำเนินการก่อนการแสดงผลทั้งบนเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

  • componentDidMountจะดำเนินการหลังจากการเรนเดอร์ครั้งแรกบนฝั่งไคลเอ็นต์เท่านั้น นี่คือที่ที่การร้องขอ AJAX และ DOM หรือการอัปเดตสถานะควรเกิดขึ้น วิธีนี้ยังใช้สำหรับการรวมเข้ากับเฟรมเวิร์ก JavaScript อื่น ๆ และฟังก์ชันใด ๆ ที่มีการดำเนินการล่าช้าเช่นsetTimeout หรือ setInterval. เรากำลังใช้มันเพื่ออัปเดตสถานะเพื่อให้เราสามารถทริกเกอร์วิธีวงจรชีวิตอื่น ๆ ได้

  • componentWillReceivePropsจะเรียกใช้ทันทีที่มีการอัปเดตอุปกรณ์ประกอบฉากก่อนที่จะเรียกการเรนเดอร์อื่น เราเรียกใช้จากsetNewNumber เมื่อเราอัปเดตสถานะ

  • shouldComponentUpdate ควรกลับ true หรือ falseมูลค่า. สิ่งนี้จะพิจารณาว่าจะมีการอัปเดตส่วนประกอบหรือไม่ ตั้งค่าเป็นtrueโดยค่าเริ่มต้น. หากคุณแน่ใจว่าส่วนประกอบนั้นไม่จำเป็นต้องแสดงผลหลังจากนั้นstate หรือ props ได้รับการอัปเดตคุณสามารถกลับมาได้ false มูลค่า.

  • componentWillUpdate เรียกว่าก่อนการแสดงผล

  • componentDidUpdate เรียกว่าหลังจากการแสดงผล

  • componentWillUnmountถูกเรียกหลังจากที่ส่วนประกอบถูกยกเลิกการต่อเชื่อมจากโดม เรากำลังยกเลิกการต่อเชื่อมส่วนประกอบของเราในmain.js.

ในตัวอย่างต่อไปนี้เราจะตั้งค่าเริ่มต้น stateในฟังก์ชันตัวสร้าง setNewnumber ใช้เพื่ออัปเดตไฟล์ state. วิธีการตลอดอายุการใช้งานทั้งหมดอยู่ในคอมโพเนนต์เนื้อหา

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

หลังจากการแสดงผลครั้งแรกเราจะได้หน้าจอต่อไปนี้