ส่วนประกอบการทำงานเทียบกับส่วนประกอบของคลาสในปฏิกิริยา

ส่วนใหญ่มีสององค์ประกอบในการตอบสนอง:

  • ส่วนประกอบการทำงาน
  • ส่วนประกอบของคลาส

ส่วนประกอบการทำงาน

  • ส่วนประกอบการทำงานเป็นฟังก์ชันพื้นฐานของ JavaScript โดยทั่วไปแล้วจะเป็นฟังก์ชันลูกศร แต่ยังสามารถสร้างด้วยfunctionคำสำคัญปกติได้
  • บางครั้งเรียกว่าส่วนประกอบ "โง่" หรือ "ไร้สัญชาติ" เนื่องจากเพียงแค่ยอมรับข้อมูลและแสดงในรูปแบบบางอย่าง นั่นคือพวกเขามีหน้าที่หลักในการแสดงผล UI
  • componentDidMountไม่สามารถใช้วิธีการตอบสนองวงจรชีวิต (เช่น) ในส่วนประกอบที่ใช้งานได้
  • ไม่มีวิธีการแสดงผลที่ใช้ในส่วนประกอบที่ใช้งานได้
  • สิ่งเหล่านี้มีหน้าที่ส่วนใหญ่สำหรับ UI และโดยทั่วไปจะเป็นการนำเสนอเท่านั้น (ตัวอย่างเช่นคอมโพเนนต์ปุ่ม)
  • ส่วนประกอบที่ใช้งานได้สามารถยอมรับและใช้อุปกรณ์ประกอบฉากได้
  • ส่วนประกอบที่ใช้งานได้ควรได้รับการสนับสนุนหากคุณไม่จำเป็นต้องใช้สถานะ React
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

ส่วนประกอบของคลาส

  • ส่วนประกอบของคลาสใช้ประโยชน์จากคลาส ES6 และขยายComponentคลาสใน React
  • บางครั้งเรียกว่าส่วนประกอบ "สมาร์ท" หรือ "สถานะ" เนื่องจากมักจะใช้ตรรกะและสถานะ
  • วิธีการตอบสนองวงจรชีวิตสามารถใช้ได้ภายในส่วนประกอบของคลาส (ตัวอย่างเช่นcomponentDidMount)
  • คุณส่งอุปกรณ์ประกอบฉากลงไปยังส่วนประกอบของคลาสและเข้าถึงด้วย this.props
import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( 

Hello Person

); } } export default Person;

ข้อมูลมากกว่านี้

  • ส่วนประกอบของปฏิกิริยา
  • ส่วนประกอบของฟังก์ชันเทียบกับคลาส
  • Stateful vs Stateless Functional Components ใน React
  • สถานะและวงจรชีวิต