ความแตกต่างระหว่างส่วนประกอบและคอนเทนเนอร์ใน react redux

อะไรคือความแตกต่างระหว่างส่วนประกอบและคอนเทนเนอร์ใน react redux?

Componentเป็นส่วนหนึ่งของ React API ส่วนประกอบคือคลาสหรือฟังก์ชันที่อธิบายถึงส่วนหนึ่งของ React UI

Containerเป็นคำที่ไม่เป็นทางการสำหรับส่วนประกอบการตอบสนองที่ส่งconnectต่อไปยังร้านค้า redux คอนเทนเนอร์จะได้รับการอัปเดตและdispatchการดำเนินการของสถานะ Redux และโดยปกติจะไม่แสดงองค์ประกอบ DOM พวกเขามอบหมายการเรนเดอร์ให้กับคอมโพเนนต์ย่อยในการนำเสนอ

สำหรับรายละเอียดเพิ่มเติมโปรดอ่านการนำเสนอและส่วนประกอบคอนเทนเนอร์โดย Dan Abramov

ส่วนประกอบที่รับผิดชอบในการดึงข้อมูลและการแสดงผลเรียกว่าส่วนประกอบสมาร์ทหรือคอนเทนเนอร์ ข้อมูลอาจมาจาก redux การโทรผ่านเครือข่ายหรือการสมัครสมาชิกของบุคคลที่สาม

ส่วนประกอบที่เป็นใบ้ / การนำเสนอคือส่วนประกอบที่มีหน้าที่ในการนำเสนอมุมมองตามอุปกรณ์ประกอบฉากที่ได้รับ

บทความดีๆพร้อมตัวอย่างที่นี่

https://www.cronj.com/blog/difference-container-component-react-js/

ส่วนประกอบสร้างขอบเขตของมุมมองดังนั้นจึงควรแสดงองค์ประกอบ DOM ใส่เนื้อหาบนหน้าจอ

คอนเทนเนอร์มีส่วนร่วมในการทำข้อมูลอย่างละเอียดดังนั้นจึงควร "คุย" กับ redux เพราะจะต้องแก้ไขสถานะ ดังนั้นคุณควรรวมการเชื่อมต่อ (react-redux) สิ่งที่ทำให้การเชื่อมต่อและฟังก์ชันmapStateToPropsและmapDispatchToProps :

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

ส่วนประกอบ

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

ตู้คอนเทนเนอร์

คอนเทนเนอร์ก็เหมือนกับส่วนประกอบที่ไม่มี UI และคอนเทนเนอร์เกี่ยวข้องกับวิธีการทำงานของสิ่งต่างๆ . ส่วนใหญ่จะพูดคุยกับร้านค้า redux เพื่อรับและอัปเดตข้อมูล

ดูตารางเปรียบเทียบจาก Redux doc

คำอธิบายโดยละเอียดhttps://redux.js.org/basics/usage-with-react#presentational-and-container-components

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

อ่านเพิ่มเติม: ลิงค์

React, Redux เป็นไลบรารีอิสระ

React ให้กรอบสำหรับการสร้างเอกสาร HTML คอมโพเนนต์เป็นตัวแทนของส่วนใดส่วนหนึ่งของเอกสาร วิธีการที่เกี่ยวข้องกับส่วนประกอบสามารถจัดการกับส่วนที่เฉพาะเจาะจงของเอกสารได้

Redux เป็นกรอบงานที่กำหนดให้เป็นปรัชญาเฉพาะสำหรับการจัดเก็บและจัดการข้อมูลในสภาพแวดล้อม JS เป็นออบเจ็กต์ JS ขนาดใหญ่เพียงตัวเดียวที่มีการกำหนดวิธีการบางอย่างกรณีการใช้งานที่ดีที่สุดมาในรูปแบบของการจัดการสถานะของเว็บแอป

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

React Redux นำเสนอโซลูชันที่สะอาดซึ่งจะเชื่อมต่อคุณกับร้านค้า Redux โดยตรงเพียงแค่ห่อส่วนประกอบที่เชื่อมต่อไว้รอบ ๆ React Component อื่น (ของคุณContainer) เนื่องจากในการนำไปใช้งานของคุณการใช้งานของคุณคุณได้กำหนดส่วนของสถานะแอปพลิเคชันทั้งหมดที่คุณต้องการแล้ว ดังนั้นconnectนำข้อมูลนั้นออกจากร้านและส่งต่อเป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบที่ห่อหุ้มตัวเองไว้

ลองพิจารณาตัวอย่างง่ายๆนี้:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connecttypeฟังก์ชั่นผ่านเสา

วิธีนี้การเชื่อมต่อทำหน้าที่เป็นคอนเทนเนอร์สำหรับคอมโพเนนต์บุคคล

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