React Lifecycle:ภาพรวม

วงจรชีวิตใน React สามารถพิจารณาได้ในสามขั้นตอนที่แตกต่างกัน:การติดตั้ง การอัปเดต และการเลิกเมาต์ การติดตั้งเกิดขึ้นเมื่อองค์ประกอบ React แสดงผลไปยัง DOM (Document Object Model) เมื่อมีการเปลี่ยนแปลงส่วนประกอบนั้น จะเข้าสู่ขั้นตอนการอัพเดต

ในขั้นตอนการอัปเดตของวงจรชีวิต ชุดของเมธอดภายในจะถูกรันเพื่อตรวจสอบข้อมูลใหม่และแสดงส่วนประกอบนั้นอีกครั้ง การเลิกเมาต์เป็นเพียงการเอาส่วนประกอบออกจาก DOM

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

วงจรชีวิตปฏิกิริยาคืออะไร?

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

ในระยะที่สอง ผู้ใช้โต้ตอบกับส่วนประกอบและทำการเปลี่ยนแปลงบางอย่าง ในกรณีส่วนใหญ่ ผู้ใช้ได้ดำเนินการที่เปลี่ยนแปลงสถานะของส่วนประกอบ ขณะนี้เราอยู่ในขั้นตอนการอัปเดตของวงจรชีวิต

ในขั้นตอนการอัปเดต React จะแสดงส่วนประกอบอีกครั้งเพื่อแสดงการเปลี่ยนแปลง ในตัวอย่างด้านบนของเราเกี่ยวกับการเปลี่ยนสถานะเพื่อทริกเกอร์เฟสการอัปเดต setState() เมธอดจะถูกเรียกเพื่อเปลี่ยนสถานะเริ่มต้นและเริ่มกระบวนการแสดงผลใหม่ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ setState โปรดอ่านบทความแนะนำนี้

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

วิธีวงจรชีวิตทั่วไป

ตอนนี้เราได้ดูลำดับวงจรชีวิตของส่วนประกอบ React แล้ว มาดูวิธีการทั่วไปของวงจรชีวิตกัน เมธอดของวงจรชีวิตคือเมธอด React ที่ถูกเรียกในขั้นตอนของวงจรชีวิตที่ต่างกัน บางส่วนจำเป็นในขณะที่บางส่วนเป็นทางเลือก เราจะมาดูวิธีการทางเลือกที่จำเป็นและใช้กันทั่วไป

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

การติดตั้ง

เมื่อทำการติดตั้ง class component วิธีแรกที่ใช้กันทั่วไปคือ constructor() กระบวนการ. มันอยู่ที่นี่ในวิธีคอนสตรัคเตอร์ที่สามารถประกาศสถานะเริ่มต้นของส่วนประกอบได้โดยตรง

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

  }
}

ในตัวอย่างนี้ เรากำลังตั้งค่าสถานะเริ่มต้นเป็นวัตถุสำหรับผู้ใช้ปัจจุบัน constructor() วิธีการต้องใช้สำเร็จรูป super() กระบวนการ. สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคอนสตรัคเตอร์พื้นฐาน super() อ่านคู่มือ setState ของเรา

สำหรับจุดประสงค์ของเรา เมื่อติดตั้งส่วนประกอบนี้ เราจะถือว่ายังไม่มีใครเข้าสู่ระบบ เพื่อให้ผู้ใช้เข้าสู่ระบบ เราต้องการแบบฟอร์มการเข้าสู่ระบบ นี่นำเราไปสู่วิธีแรกที่จำเป็น render() .

วิธีการที่จำเป็นในการติดตั้งส่วนประกอบคือ render() กระบวนการ. หลังจากที่สร้างองค์ประกอบคลาสด้วยชุดสถานะเริ่มต้นแล้ว เราสามารถแสดงองค์ประกอบอื่นหรือ HTML ได้

render(){
    return (
     <LoginForm />
    )
  }

ไวยากรณ์ของ render() และคำสั่ง return แตกต่างจากวิธีอื่นเล็กน้อย สังเกตว่าเราใช้วงเล็บหลังการส่งคืน ไม่ใช่วงเล็บปีกกา ในคำสั่ง return เรากำลังแสดงองค์ประกอบ LoginForm

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

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

ในการทำเช่นนี้ เราสามารถใช้วิธีทางเลือกอื่นที่ค่อนข้างธรรมดา componentWillMount() . หากมีการเรียกใช้เมธอดวงจรชีวิตนี้ เมธอดนี้จะดำเนินการหลังจากเรนเดอร์องค์ประกอบ นี่เป็นสถานที่ที่ดีในการสร้างสถานะใหม่ของเรา

componentWillMount() {
    this.setState({
     currentUser: "John"
    })
  }

ตอนนี้ หลังจากแสดงผลส่วนประกอบและก่อนการติดตั้ง สถานะของส่วนประกอบจะถูกตั้งค่าด้วยผู้ใช้ปัจจุบันของ John แม้ว่าหน้าจะรีเฟรช แต่สถานะจะถูกตั้งค่าด้วย John ดังนั้นผู้ใช้ของเราจะยังคงอยู่ในระบบ

การใช้ seState() วิธีการยังนำเราเข้าสู่ขั้นตอนการอัปเดตของวงจรชีวิต เมื่อ setState() เรียกว่าเป็นสัญญาณให้ React มีการเปลี่ยนแปลงส่วนประกอบ ตอนนี้ React จะแสดงส่วนประกอบอีกครั้งเพื่อแสดงการเปลี่ยนแปลงที่ทำกับผู้ใช้ ในกรณีของเรา มันจะแสดงว่า John เข้าสู่ระบบแล้ว

กำลังปรับปรุง

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

กำลังถอนการติดตั้ง

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

Unmounting มีทางเลือกเดียวเท่านั้น componentWillUnmount() . John ผู้ใช้ของเราต้องการออกจากระบบ เมื่อเขาคลิกปุ่มออกจากระบบ เราก็สามารถใช้ componentWillUnmount() เพื่อลบโปรไฟล์ผู้ใช้ของเขาออกจาก DOM

ตัวอย่างนี้ค่อนข้างวางแผน แต่แสดงให้เห็นอย่างชัดเจนว่าเกิดอะไรขึ้นในแต่ละขั้นตอนของวงจรชีวิต

class UserContainer extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     currentUser: " "
   }
 }
 componentWillMount() {
   this.setState({
     currentUser: "John"
   })
 }
 
 logout = () => {
  this.setState({
    currentUser: " "
  })
 }

 
 render() {
  if this.state.currentUser === "John" {
  return (
     <UserProfile />
      <button type="button" onclick={this.logout}>Logout</button>
    )

  } else {
    return(
     <button type="button>">Login</button>
    )
  }
 }
}

class UserProfile extends React.Component {
  componentWillUnmount() {
    alert("Logged Out")
  }
  render() {
   return (
    <h1>Welcome back, John!</h1>
   )
  }
}

เรามีสององค์ประกอบ อย่างแรกคือ UserContainer และมันเก็บส่วนประกอบ UserProfile ไว้ UserProfile มีข้อมูลผู้ใช้

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

เมื่อ John เข้าสู่ระบบแล้ว เราแสดงองค์ประกอบ UserProfile ข้อมูลนี้มีข้อมูลผู้ใช้ทั้งหมดของ John ดังนั้นเราจึงจำเป็นต้องลบออกจาก DOM ทันทีที่เขาออกจากระบบ

เมื่อมีการคลิกปุ่มออกจากระบบ มันจะเรียกใช้ฟังก์ชันการออกจากระบบของเราซึ่งจะทำให้ผู้ใช้ปัจจุบันกลับสู่สถานะเริ่มต้นของสตริงว่าง เนื่องจากฟังก์ชันล็อกเอาต์ของเราเรียก setState React จะแสดงคอมโพเนนต์คอนเทนเนอร์อีกครั้ง ตอนนี้จะไม่แสดงองค์ประกอบ UserProfile และเราจะได้รับการแจ้งเตือนแบบป๊อปอัปเพื่อแจ้งให้ผู้ใช้ทราบว่าได้ออกจากระบบแล้ว

บทสรุป

React lifecycle มีอะไรมากกว่าที่จะกล่าวถึงที่นี่ เป้าหมายของบทความนี้คือการแนะนำแนวคิดพื้นฐานพร้อมตัวอย่างโค้ดง่ายๆ เมื่อแนวคิดของวงจรชีวิตได้รับการแนะนำแล้ว เอกสาร React อย่างเป็นทางการจะมีความชัดเจนมากขึ้น

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