الحل لعدم وجود prevProps في getDerivedStateFromProps

مرحبا اصدقاء!

لذا ، قرر مطورو React جعل عملنا مع عملهم أكثر خطًا ، للتوجيه ، إذا جاز التعبير ، تجاهلنا مسار أقل فرصة لارتكاب خطأ وكتابة رمز سيئ ، وهو ، في رأيي ، حقنا غير القابل للتصرف ووسيلة للتحسين والابتكار. نحن نتحدث عن جميع الأساليب المفضلة للمكون WillReceiveProps وغيرها من نفس السلسلة ، لن يكون هناك المزيد ، ولكن سيتم إعطاؤنا بديلاً في شكل الطريقة الثابتة getDerivedStateFromProps. شخصيا ، يذكرني بغرفة مظلمة حيث تكمن الأشياء ، ويجب العثور عليها ، ولكن لا يوجد شيء مرئي.

يكتب المطورون في ردودهم على التعليقات الغاضبة لمستخدمي React أنهم يقولون: حسنًا ، لن نقدم لك prevProps ، ليس من الممكن ، فكر في شيء ما ، prevProps لا ، حسنًا ، أنت تبقى هناك ، فقط قم بتخزينها في حالة ، بشكل عام يقترحون علينا إنشاء عكاز صغير في موقعنا كود جيد جديد. كل شيء بسيط ، بالطبع ، يمكنك أن تفهم وتسامح ، لكنني انزعجت من حقيقة أنه ليس لدي هذا السياق ، غرفتي خرسانية ، لم يكن هناك شيء مرئي منه ، حتى جيراني لم يسمعوا ، لذلك قررت كتابة شيء لنفسي ، ستخفي جميع العكازات في حد ذاتها وستبدو الكود الخاص بي غريبًا ، ولكنه عظمى (وعديم العظم).

بشكل عام ، أحتاج إلى تنفيذ prevProps في حالة المكون ، وأريد أيضًا أن يبدو كل شيء كالمعتاد ، ومن المستحيل أيضًا العيش بدون السحر في هذا getDerivedStateFromProps الثابت (هذا أحمق!). يومان من العذاب وتحسين الذات وكل شيء جاهز ، أنجبت فأرًا.

التثبيت

npm install --save state-master 

استخدم

فقط اكتب نفس getDerivedStateFromProps و ComponentDidUpdate ، ولكن تم تعديله بالفعل.
نلف مكوننا في "withStateMaster" ، وننقل هناك قائمة "الدعائم" التي تحتاج إلى تتبع تغييراتها

 import {Component} from 'react' import {withStateMaster, registerContext, unregisterContext} from 'state-master'; //  "",     const PROP_LIST = ['width', 'height', 'bgColor', 'fontSize', 'autoSize']; //   ,     const PROP_LIST = 'value'; //     const INITIAL_STATE = { width: 1000, height: 500 }; class ContainerComponent extends Component { static displayName = 'Container'; static getDerivedStateFromProps(data) { const { nextProps, prevProps, state, isInitial, changed, changedProps, isChanged, add, addIfChanged, isChangedAny, addIfChangedAny, isChangedAll, call, get } = data; //      ,   ,      PROPS_LIST //   ,       if (isInitial) { //   "name"    "value"     add('name', value); //   "name"       add('name'); } // changedProps  ,       if (changedProps.indexOf('value') !== -1) { add('value'); } //  true   prop -  if (isChanged('autoSize')) { add('autoSize'); } //  true   prop     (  true) if (isChanged('autoSize', true)) { add('autoSize', true); } // changed  true,     -  if (changed) { add('somethingChanged', true); } //  true,     -  //   ,     if (isChangedAny()) { add('somethingChanged', true); } //  true,      -  if (isChangedAny('bgColor', 'fontSize', ...)) { const {bgColor, fontSize} = nextProps; add('style', {bgColor, fontSize}); } //  true,      PROPS_LIST -  if (isChangedAll()) { add('allChanged', true); } //  true,      -  if (isChangedAll('width', 'height', ...)) { const {width, height} = nextProps; add('size', width + 'x' + height); //     //   ,   setTimeout(() => this.changeSomething(), 0); //   - ,        //       componentDidUpdate call(() => { this.initNewSizes(width, height); }); } //   "add",   prop -  addIfChanged('name', value); addIfChanged('name'); //   "add",  - prop   PROPS_LIST -  addIfChangedAny('name', value); addIfChangedAny('name'); //      null //   ,  ,     //    console.log(get()); //     "add",      //      ,       "add" return { size: nextProps.width + 'x' + nextProps.height } } constructor(props) { super(props); //  "registerContext",    this   getDerivedStateFromProps //     ,     "registerContext",       registerContext(this); } //      componentDidUpdate(data) { const { prevProps, prevState, snapshot, changedProps, changed, isChanged, isChangedAny, isChangedAll } = data; if (isChanged('value')) { const {value} = this.props; this.doSomeAction(value); } } componentWillUnmount() { //    ,  "registerContext"     unregisterContext(this); } render() { const {style, size} = this.state; return ( <div className="container" style={style}> Size is {size} </div> ) } } export const Container = withStateMaster(ContainerComponent, PROP_LIST, INITIAL_STATE); 

إذا ورث المكون من عنصر آخر ، قم بتمرير الأصل بحيث يتم استدعاء الأصل getDerivedStateFromProps

 export const Container = withStateMaster(ContainerComponent, PROP_LIST, null, ParentalComponent); 

هذا هو حل هذه المشكلة (على الرغم من أنني ربما لم أفهم رد الفعل بما فيه الكفاية ، وهذه ليست مشكلة على الإطلاق).

لذا قاومت قوانين القانون الجديدة ، ربما في يوم من الأيام سأضع نفسي وأعيد كتابة كل شيء كما ينبغي.

على الرغم من أن المطورين سيعيدون على الأرجح كل شيء مرة أخرى وستظهر مشاكل ملحة أخرى.
هذا كل شيء ، أنا أستلقي ، لكنهم لا يضربون الأشخاص طريح الفراش ، كما يقولون.