ฉันจะรีเซ็ตส่วนประกอบการตอบสนองรวมถึงสถานะที่สามารถเข้าถึงได้ทุกสวิทช์ได้อย่างไร

บางครั้งฉันจะมีส่วนประกอบของปฏิกิริยาที่มีสภาพตามแนวคิดซึ่งฉันต้องการรีเซ็ต พฤติกรรมในอุดมคติจะเทียบเท่ากับการลบส่วนประกอบเก่าและอ่านส่วนประกอบใหม่ที่บริสุทธิ์

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

มี API หรือรูปแบบในการทำสิ่งนี้หรือไม่?

แก้ไข: ฉันทำตัวอย่างเล็กน้อยเพื่อแสดงให้เห็นถึงthis.replaceState(this.getInitialState())แนวทางและเปรียบเทียบกับthis.setState(this.getInitialState())แนวทาง: jsfiddle - replaceStateมีประสิทธิภาพมากขึ้น

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

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

ไม่มีทางลัดในการรีเซ็ตสถานะท้องถิ่นของส่วนประกอบแต่ละรายการ

คุณควรหลีกเลี่ยงreplaceStateและใช้setStateแทน

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

ในการตอบสนองหากคุณต้องทำผิดเกี่ยวกับลักษณะทั่วไปหรือความเชี่ยวชาญ: มุ่งเป้าไปที่ความเชี่ยวชาญ ในฐานะที่เป็นข้อพิสูจน์ต้นไม้สถานะสำหรับส่วนประกอบของคุณควรมีพาร์ซิเมนต์ที่แน่นอน (คุณควรฝ่าฝืนกฎนี้อย่างมีรสนิยมหากคุณกำลังนั่งร้านผลิตภัณฑ์ใหม่ที่ตีตราสินค้า)

อย่างไรก็ตามนี่คือวิธีที่คุณทำ คล้ายกับคำตอบของ Ben (ยอมรับ) ข้างต้น แต่เป็นแบบนี้:

this.setState(this.getInitialState());

นอกจากนี้ (เช่นที่ Ben กล่าว) ในการรีเซ็ต "สถานะเบราว์เซอร์" คุณต้องลบโหนด DOM นั้นออก ควบคุมพลังของ vdom และใช้keyเสาใหม่สำหรับส่วนประกอบนั้น การแสดงผลใหม่จะแทนที่การขายส่งส่วนประกอบนั้น

อ้างอิง: https://facebook.github.io/react/docs/component-api.html#replacestate

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

คีย์ = {วันที่ใหม่ (). getTime ()}

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

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}