ความแตกต่างระหว่างวงจรชีวิตแบบเก่าและแบบใหม่ของการตอบสนอง: 1. Will hooks สามรายการได้ถูกลบออกจากวงจรชีวิตใหม่ ได้แก่ ComponentWillMount, ComponentWillReceiveProps และ ComponentWillUpdate; 2. Hooks ใหม่สองตัวได้ถูกเพิ่มเข้าไปในวงจรชีวิตใหม่ นั่นคือ getDerivedStateFromProps (มาจากสถานะอุปกรณ์ประกอบฉาก) และ getSnapshotBeforeUpdate
สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows7, เวอร์ชัน react18, คอมพิวเตอร์ Dell G3
React มีวงจรชีวิตสองชุดก่อนและหลังเวอร์ชัน 16.3 โดยก่อนเวอร์ชัน 16.3 จะเป็นเวอร์ชันเก่า และหลังจากนั้นจะเป็นเวอร์ชันใหม่ แม้ว่าจะมีเวอร์ชันเก่าและเวอร์ชันใหม่ก็ตาม
วงจรชีวิตการตอบสนอง (เก่า)
ควรเน้นย้ำว่าฟังก์ชัน componentWillReceiveProps จะไม่ถูกเรียกใช้เมื่อมีการส่งผ่านอุปกรณ์ประกอบฉากเป็นครั้งแรก
shouldComponentUpdate เปรียบเสมือนวาล์วและต้องการค่าส่งคืน (จริงหรือเท็จ) เพื่อพิจารณาว่าสถานะของการอัปเดตนี้จำเป็นต้องถูกเรนเดอร์อีกครั้งหรือไม่
วงจรชีวิตการตอบสนอง (ใหม่)
ความแตกต่างระหว่างวงจรชีวิตของปฏิกิริยาเก่าและใหม่
วงจรชีวิตใหม่จะลบ will hooks สามรายการออก ได้แก่:componentWillMount,componentWillReceiveProps,componentWillUpdate
วงจรชีวิตใหม่เพิ่ม hook ใหม่สองรายการ กล่าวคือ:
1. getDerivedStateFromProps: รับสถานะที่ได้รับจากอุปกรณ์ประกอบฉาก
ยอมรับสองพารามิเตอร์: อุปกรณ์ประกอบฉาก สถานะ
ส่งกลับวัตถุสถานะหรือค่าว่างที่ใช้ในการแก้ไขค่าของสถานะ
สถานการณ์การใช้งาน: หากค่าของ state ขึ้นอยู่กับอุปกรณ์ประกอบฉาก ณ เวลาใดเวลาหนึ่ง คุณสามารถใช้ getDerivedStateFromProps ได้
2. getSnapshotBeforeUpdate: รับสแนปชอตก่อนการอัพเดต (คุณสามารถรับข้อมูลก่อนการอัพเดตได้)
ถูกเรียกก่อนที่จะอัพเดต DOM
ส่งคืนอ็อบเจ็กต์หรือค่าว่าง และส่งคืนค่าส่งคืนไปยังcomponentDidUpdate
componentDidUpdate(): เรียกหลังจากอัพเดต DOM
ยอมรับพารามิเตอร์สามตัว ได้แก่ preProps, preState, snapshotValue
กรณีการใช้งาน:
p ที่มีความสูงคงที่จะเพิ่มแถวใหม่เป็นประจำ ดังนั้นเมื่อเพิ่มแถวใหม่ ความสูงของแถวที่ดูอยู่ในปัจจุบันยังคงไม่เปลี่ยนแปลง
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate สถานการณ์การใช้งาน</title><style>.list{width: 200px;height: 150px;สีพื้นหลัง: skyblue ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- เตรียม "คอนเทนเนอร์" --><div id="test"></div >< !-- แนะนำไลบรารีแกนตอบสนอง--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- แนะนำ react -dom ใช้เพื่อรองรับการตอบสนองเพื่อดำเนินการ DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- แนะนำ babel เพื่อแปลง jsx เป็น js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel" >คลาส NewsList ขยาย React.Component{ state = {newsArr:[]} componentDidMount(){setInterval(() => {//รับสถานะดั้งเดิม const {newsArr} = this.state//จำลองข่าว const news = ' News'+ (newsArr.length+1)//อัปเดตสถานะ this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} componentDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - ความสูง} render(){return(<div className="list" ref="list"> {this. state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM render(< NewsList/>,document.getElementById('ทดสอบ'))</script></body></html>แสดงให้เห็น:
ใน React v16.3 การเปลี่ยนแปลงวงจรชีวิตใหม่จะถูกนำมาใช้ วงจรการใช้งานแบบเก่ายังใช้อยู่ แต่สามารถดูคำเตือนการเลิกใช้งานบนคอนโซลได้ นอกจากนี้ยังเตือนด้วยว่า hook วงจรชีวิตสามรายการจะเลิกใช้แล้ว ดังนั้นอย่าพยายามใช้ หรือคุณสามารถเพิ่มคำนำหน้า UNSAFE_ ข้างหน้าได้