ReactJS - เรนเดอร์ถูกเรียกเมื่อใดก็ตามที่เรียกว่า "setState"

React แสดงองค์ประกอบทั้งหมดและส่วนประกอบย่อยใหม่ทุกครั้งที่setStateเรียกใช้หรือไม่

ถ้าเป็นเช่นนั้นทำไม ฉันคิดว่าความคิดคือการตอบสนองเพียงเล็กน้อยตามที่ต้องการ - เมื่อรัฐเปลี่ยน

ในตัวอย่างง่ายๆดังต่อไปนี้คลาสทั้งสองจะแสดงอีกครั้งเมื่อมีการคลิกข้อความแม้ว่าข้อเท็จจริงที่ว่ารัฐจะไม่เปลี่ยนแปลงในการคลิกที่ตามมาเนื่องจากตัวจัดการ onClick ตั้งstateค่าเป็นค่าเดียวกันเสมอ:

this.setState({'test':'me'});

ฉันคาดว่าการแสดงผลจะเกิดขึ้นก็ต่อเมื่อstateข้อมูลมีการเปลี่ยนแปลง

นี่คือตัวอย่างรหัสในฐานะ JS Fiddleและตัวอย่างข้อมูลในตัว:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/

React แสดงส่วนประกอบและส่วนประกอบย่อยทั้งหมดใหม่ทุกครั้งที่ setState ถูกเรียกหรือไม่

โดยค่าเริ่มต้น - ใช่

มีบูลีนวิธีใดที่ควรคอมโพสิตentUpdate (วัตถุ nextProps วัตถุ nextState)แต่ละองค์ประกอบมีวิธีนี้และรับผิดชอบในการพิจารณา "ควรปรับปรุงองค์ประกอบ ( ฟังก์ชั่นการแสดงผลทำงาน)?" ทุกครั้งที่คุณเปลี่ยนสถานะหรือส่งอุปกรณ์ประกอบฉากใหม่จากองค์ประกอบหลัก

คุณสามารถเขียนวิธีการดำเนินการshouldComponentUpdateของคุณเองสำหรับส่วนประกอบของคุณ แต่การใช้งานเริ่มต้นจะส่งกลับค่าจริงเสมอ - หมายถึงฟังก์ชั่นการเรนเดอร์ใหม่เสมอ

อ้างจากเอกสารอย่างเป็นทางการhttp://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

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

ส่วนถัดไปของคำถามของคุณ:

ถ้าเป็นเช่นนั้นทำไม ฉันคิดว่าความคิดคือการตอบสนองเพียงเล็กน้อยตามที่ต้องการ - เมื่อรัฐเปลี่ยนไป

มีสองขั้นตอนในสิ่งที่เราอาจเรียกว่า "เรนเดอร์":

1. DOM เสมือนการแสดงผล: เมื่อทำให้วิธีการที่เรียกว่ามันจะกลับใหม่Dom เสมือนโครงสร้างของส่วนประกอบ ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้เมธอดการแสดงผลนี้จะถูกเรียกเสมอเมื่อคุณเรียกใช้setState ()เนื่องจากshouldComponentUpdateจะส่งกลับค่าจริงเสมอตามค่าเริ่มต้น ดังนั้นโดยค่าเริ่มต้นไม่มีการเพิ่มประสิทธิภาพที่นี่ในการตอบสนอง

2. การแสดงผล DOM แบบดั้งเดิม: การตอบสนองจะเปลี่ยนโหนด DOM จริงในเบราว์เซอร์ของคุณเฉพาะเมื่อมีการเปลี่ยนแปลงใน DOM เสมือนและมีความจำเป็นน้อย - นี่คือคุณลักษณะที่ยอดเยี่ยมของ React ซึ่งปรับการกลายพันธุ์ DOM จริงและทำให้การตอบสนองรวดเร็ว

ไม่ตอบสนองจะไม่แสดงผลทุกอย่างเมื่อสถานะมีการเปลี่ยนแปลง

• เมื่อใดก็ตามที่องค์ประกอบสกปรก (สถานะของมันเปลี่ยนแปลง) ส่วนประกอบนั้นและลูกของมันจะถูกเรนเดอร์ใหม่ สิ่งนี้ในระดับหนึ่งคือการสร้างการแสดงผลใหม่ให้น้อยที่สุดเท่าที่จะทำได้ เวลาเดียวที่ไม่มีการเรียกเรนเดอร์คือเมื่อบางสาขาถูกย้ายไปยังรูทอื่นซึ่งในทางทฤษฎีเราไม่จำเป็นต้องทำการเรนเดอร์อะไรอีก ในตัวอย่างของคุณTimeInChildเป็นองค์ประกอบลูกของMainดังนั้นจึงได้รับการแสดงผลอีกครั้งเมื่อสถานะของMainการเปลี่ยนแปลง

• ปฏิกิริยาไม่ได้เปรียบเทียบข้อมูลสถานะ เมื่อsetStateมีการเรียกมันจะทำเครื่องหมายองค์ประกอบว่าสกปรก (ซึ่งหมายความว่าจะต้องมีการแสดงผลซ้ำ) สิ่งสำคัญที่ควรทราบคือถึงแม้ว่าrenderวิธีการของส่วนประกอบนั้นจะเรียกว่า DOM จริงจะได้รับการอัปเดตก็ต่อเมื่อเอาท์พุทแตกต่างจากทรี DOM ปัจจุบันเท่านั้น ในตัวอย่างของคุณแม้ว่าstateข้อมูลจะไม่เปลี่ยนแปลง แต่เวลาของการเปลี่ยนแปลงครั้งล่าสุดทำให้ Virtual DOM แตกต่างจาก DOM ของเอกสารดังนั้นเหตุใดจึงมีการอัปเดต HTML

แม้ว่าจะมีการระบุไว้ในคำตอบอื่น ๆ ที่นี่ส่วนประกอบควร:

• ใช้shouldComponentUpdateเพื่อสร้างการแสดงผลเมื่อสถานะหรือคุณสมบัติเปลี่ยนไป

• เปลี่ยนเป็นการขยายPureComponentซึ่งใช้shouldComponentUpdateวิธีการภายในเพื่อการเปรียบเทียบแบบตื้น

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

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

ใช่. มันเรียกเมธอด render () ทุกครั้งที่เราเรียกใช้ setState แทนเมื่อ "shouldComponentUpdate" ส่งคืนค่าเท็จ

เหตุผลอื่นสำหรับ "การอัพเดทที่สูญหาย" อาจเป็นสาเหตุต่อไป:

• หากgetDerivedStateFromProps คงถูกกำหนดไว้แล้วมันจะวิ่งอยู่ในขั้นตอนการปรับปรุงทุกตามเอกสารที่เป็นทางการhttps://reactjs.org/docs/react-component.html#updating
• ดังนั้นหากคุณค่าของรัฐนั้นมาจากอุปกรณ์ประกอบฉากในตอนเริ่มต้นมันจะถูกเขียนทับในการอัพเดททุกครั้ง

หากเป็นปัญหาจากนั้น U สามารถหลีกเลี่ยงการตั้งค่าสถานะในระหว่างการอัพเดตคุณควรตรวจสอบค่าพารามิเตอร์สถานะเช่นนี้

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

โซลูชันอื่นคือการเพิ่มคุณสมบัติที่เตรียมใช้งานเป็นสถานะและตั้งค่าในครั้งแรก (ถ้าสถานะถูกเตรียมใช้งานเป็นค่าที่ไม่ใช่ null)

ไม่ใช่ส่วนประกอบทั้งหมด

stateในลักษณะองค์ประกอบเช่นแหล่งที่มาของน้ำตกของรัฐของ APP ทั้ง

ดังนั้นการเปลี่ยนแปลงจึงเกิดขึ้นจากที่ setState เรียก ต้นไม้แห่งrendersนั้นถูกเรียกมาจากที่นั่น หากคุณใช้องค์ประกอบที่บริสุทธิ์renderจะถูกข้ามไป