Die Lösung für das Fehlen von prevProps in getDerivedStateFromProps

Hallo Freunde!

Daher haben die Entwickler von React beschlossen, unsere Arbeit mit ihnen linearer zu gestalten, sozusagen den Weg der geringsten Wahrscheinlichkeit zu vernachlässigen, einen Fehler zu machen und einen schlechten Code zu schreiben. Dies ist meiner Meinung nach unser unveräußerliches Recht und ein Weg, uns zu verbessern und zu erfinden. Wir sprechen über alle bevorzugten Methoden von componentWillReceiveProps und andere aus derselben Serie. Sie werden es nicht mehr sein, aber wir erhalten eine Alternative in Form der statischen Methode getDerivedStateFromProps. Persönlich erinnert es mich an einen dunklen Raum, in dem Dinge liegen und gefunden werden müssen, aber nichts ist sichtbar.

Die Entwickler in ihren Antworten auf die verärgerten Kommentare der React-Benutzer schreiben, dass sie sagen: Nun, wir geben Ihnen keine prevProps, es ist nicht möglich, denken Sie an etwas, prevProps nicht, na ja, Sie bleiben dort, zwischenspeichern Sie sie einfach in einem Zustand, im Allgemeinen schlagen sie vor, dass wir eine kleine Krücke in unserem machen neuer guter Code. Es ist natürlich alles einfach, Sie können verstehen und vergeben, aber ich war verärgert darüber, dass ich diesen Kontext jetzt nicht habe, mein Zimmer zugemauert war, nichts davon sichtbar ist, selbst meine Nachbarn nicht gehört werden, also habe ich beschlossen, etwas für mich selbst zu schreiben es wird alle Krücken in sich verstecken und mein Code wird seltsam erscheinen, aber ohne Knochen (und ohne Knochen?).

Im Allgemeinen muss ich prevProps im Status der Komponente implementieren, ich möchte auch, dass alles wie gewohnt aussieht, und es ist auch unmöglich, ohne diese Magie in statischen getDerivedStateFromProps zu leben (das ist ein Dummkopf!). Zwei Tage voller Qual und Selbstverbesserung und alles ist fertig. Ich brachte eine Maus zur Welt.

Installation

npm install --save state-master 

Verwenden Sie

Schreiben Sie einfach die gleichen getDerivedStateFromProps und componentDidUpdate, die jedoch bereits geändert wurden.
Wir verpacken unsere Komponente in "withStateMaster" und übergeben dort eine Liste von "Requisiten", deren Änderungen Sie verfolgen müssen

 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); 

Wenn die Komponente von einer anderen erbt, übergeben Sie das übergeordnete Element, sodass das übergeordnete Element getDerivedStateFromProps aufgerufen wird

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

Dies ist meine Lösung für dieses Problem (obwohl ich die Reaktion möglicherweise nicht genug verstanden habe und dies überhaupt kein Problem ist).

Also habe ich mich den neuen Kanonen der Reaktion widersetzt, vielleicht werde ich mich eines Tages demütigen und alles neu schreiben, wie es sollte.

Obwohl die Entwickler wahrscheinlich alles noch einmal wiederholen werden und andere dringende Probleme auftreten werden.
Das war's, ich lege mich hin, aber sie schlagen die bettlägerigen Leute nicht, wie sie sagen.