الفرق بين دورات حياة رد الفعل القديمة والجديدة: 1. تمت إزالة ثلاثة خطافات من دورة الحياة الجديدة، وهي ComponentWillMount وcomponentWillReceiveProps وcomponentWillUpdate 2. تمت إضافة خطافين جديدين إلى دورة الحياة الجديدة، وهما getDerivedStateFromProps (مشتقة من حالة الدعائم) و getSnapshotBeforeUpdate.
بيئة تشغيل هذا البرنامج التعليمي: نظام Windows7، إصدار التفاعل 18، كمبيوتر Dell G3.
لدى React مجموعتان من دورات الحياة قبل الإصدار 16.3 وبعده. قبل الإصدار 16.3، كان الإصدار القديم، وبعد ذلك، كان الإصدار الجديد، على الرغم من وجود إصدارات قديمة وجديدة، إلا أنهما متماثلان بشكل أساسي.
دورة حياة رد الفعل (القديمة)
تجدر الإشارة إلى أن الدالة ComponentWillReceiveProps لن يتم استدعاؤها عند تمرير الخاصيات للمرة الأولى، وسيتم استدعاؤها فقط عند تمرير الخاصيات بعد المرة الثانية (بما في ذلك المرة الثانية).
يجب أن يكون ComponentUpdate بمثابة صمام ويحتاج إلى قيمة إرجاع (صواب أو خطأ) لتحديد ما إذا كانت حالة هذا التحديث بحاجة إلى إعادة عرض.
دورة حياة رد الفعل (جديد)
الفرق بين دورة حياة التفاعل القديمة والجديدة
تقوم دورة الحياة الجديدة بإزالة ثلاثة خطافات، وهي: ComponentWillMount، ComponentWillReceiveProps، ComponentWillUpdate
تضيف دورة الحياة الجديدة خطافين جديدين، وهما:
1. getDerivedStateFromProps: احصل على الحالة المشتقة من الدعائم
يقبل معلمتين: الدعائم، الحالة
تقوم بإرجاع كائن حالة أو قيمة خالية، تُستخدم لتعديل قيمة الحالة.
سيناريو الاستخدام: إذا كانت قيمة الحالة تعتمد على الخاصيات في أي وقت، فيمكنك استخدام getDerivedStateFromProps
2. getSnapshotBeforeUpdate: احصل على اللقطة قبل التحديث (يمكنك الحصول على البيانات قبل التحديث)
تم الاتصال به قبل تحديث DOM
تقوم بإرجاع كائن أو قيمة فارغة، ويتم تمرير القيمة المرجعة إلى ComponentDidUpdate
ComponentDidUpdate(): يتم استدعاؤه بعد تحديث DOM
يقبل ثلاث معلمات: preProps، preState، snapshotValue
حالات الاستخدام:
يضيف p ذو الارتفاع الثابت صفًا جديدًا بانتظام، بحيث يظل ارتفاع الصف المعروض حاليًا دون تغيير عند إضافة صف جديد.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeتحديث سيناريوهات الاستخدام</title><style>.list{width: 200px;height: 150px;background-color: 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><!-- تقديم رد فعل -dom ، يُستخدم لدعم التفاعل لتشغيل DOM --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- تقديم بابل لتحويل jsx إلى js --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel" >class NewsList Extends React.Component{state = {newsArr:[]}compondidMount(){setInterval(() => {//احصل على الحالة الأصلية const {newsArr} = this.state//محاكاة الأخبار const news = ' News'+ (newsArr.length+1)// تحديث الحالة this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} ComponDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - height} render(){return(<div className="list" ref="list"> {this. state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM NewsList/>,document.getElementById('test'))</script></body></html>يوضح:
في React v16.3، يتم إدخال تغييرات جديدة في دورة الحياة. يتم أيضًا استخدام دورة الحياة القديمة، ولكن يمكن رؤية تحذير الإهمال على وحدة التحكم. ويذكر أيضًا أنه سيتم إهمال ثلاثة خطافات لدورة الحياة، لذا حاول عدم استخدامها. أو يمكنك إضافة البادئة UNSAFE_ أمامها.