บทช่วยสอน ตอบสนองต่อวงจรชีวิตขององค์ประกอบ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตอบสนองต่อวงจรชีวิตขององค์ประกอบ
ในบทนี้เราจะหารือเกี่ยวกับวงจรชีวิตตอบสนองส่วนประกอบ
วงจรชีวิตขององค์ประกอบสามารถแบ่งออกเป็นสามรัฐ:
วิธีการของวงจรชีวิตคือ:
componentWillMount ก่อนแสดงผลโทร, บริการฝั่งไคลเอ็นต์ยัง
componentDidMount: หลังจากที่สายแรกที่จะทำให้ลูกค้าเท่านั้นหลังจากองค์ประกอบได้รับการสร้างโครงสร้าง DOM ที่เกี่ยวข้องสามารถเข้าถึงได้ผ่าน this.getDOMNode () หากคุณต้องการที่จะใช้กับกรอบ JavaScript อื่น ๆ ที่คุณสามารถเรียกวิธี setTimeout นี้ setInterval หรือส่งคำขอ AJAX, ฯลฯ (หน่วยปฏิบัติการที่แตกต่างกันเพื่อป้องกันไม่ให้ปิดกั้น UI)
componentWillReceiveProps ถูกเรียกเมื่อองค์ประกอบได้รับเสาใหม่วิธีการนี้จะไม่ถูกเรียกในระหว่างการเตรียมการแสดงผล
shouldComponentUpdate ส่งกลับค่าบูลีนมันถูกเรียกว่าเมื่อองค์ประกอบได้รับอุปกรณ์ประกอบฉากใหม่หรือรัฐ มันไม่ได้เรียกว่าเมื่อเริ่มต้นหรือใช้ forceUpdate
มันสามารถใช้ในเมื่อคุณไม่จำเป็นต้องยืนยันคอมโพเนนต์ที่ปรับปรุง
componentWillUpdate ในองค์ประกอบที่ได้รับอุปกรณ์ประกอบฉากใหม่หรือรัฐ แต่ไม่มีการแสดงผลที่เรียกว่ามันจะไม่ถูกเรียกว่าในระหว่างการเตรียม
หลังจากการปรับปรุงเป็นส่วนประกอบcomponentDidUpdate สมบูรณ์ทันทีเรียกว่ามันจะไม่ถูกเรียกว่าในระหว่างการเตรียม
componentWillUnmount เรียกทันทีเมื่อองค์ประกอบที่จะถูกลบออกจาก DOM
อธิบายรายละเอียดของวิธีการเหล่านี้คุณสามารถดู เอกสารอย่างเป็นทางการ
ตัวอย่างต่อไปนี้หลังจากส่วนประกอบสวัสดีมีการโหลดที่กำหนดโดยวิธีการจับเวลา componentDidMount ทุกองค์ประกอบรีเซ็ต 100 มิลลิวินาทีโปร่งใสและเรื่องการแสดงผล:
var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); } }); ReactDOM.render( <Hello name="world"/>, document.body );
ตัวอย่างต่อไปนี้จะเริ่มต้นรัฐ setNewnumberสำหรับการปรับปรุงรัฐทุกองค์ประกอบวงจรชีวิตของเนื้อหา
var Button = React.createClass({ getInitialState: function() { return { data:0 }; }, setNewNumber: function() { this.setState({data: this.state.data + 1}) }, render: function () { return ( <div> <button onClick = {this.setNewNumber}>INCREMENT</button> <Content myNumber = {this.state.data}></Content> </div> ); } }) var Content = React.createClass({ componentWillMount:function() { console.log('Component WILL MOUNT!') }, componentDidMount:function() { console.log('Component DID MOUNT!') }, componentWillReceiveProps:function(newProps) { console.log('Component WILL RECIEVE PROPS!') }, shouldComponentUpdate:function(newProps, newState) { return true; }, componentWillUpdate:function(nextProps, nextState) { console.log('Component WILL UPDATE!'); }, componentDidUpdate:function(prevProps, prevState) { console.log('Component DID UPDATE!') }, componentWillUnmount:function() { console.log('Component WILL UNMOUNT!') }, render: function () { return ( <div> <h3>{this.props.myNumber}</h3> </div> ); } }); ReactDOM.render( <div> <Button /> </div>, document.getElementById('example') );