La solution au manque de prevProps dans getDerivedStateFromProps

Bonjour mes amis!

Ainsi, les développeurs de React ont décidé de rendre notre travail avec le leur plus linéaire, de diriger, pour ainsi dire, en négligeant le chemin de la moindre chance de faire une erreur et d'écrire un mauvais code, qui, à mon avis, est notre droit inaliénable et un moyen d'améliorer et d'inventer. Nous parlons de toutes les méthodes préférées de componentWillReceiveProps et d'autres de la même série, elles ne le seront plus, mais on nous donnera une alternative sous la forme de la méthode statique getDerivedStateFromProps. Personnellement, cela me rappelle une pièce sombre où se trouvent les choses, et elles doivent être trouvées, mais rien n'est visible.

Les développeurs dans leurs réponses aux commentaires en colère des utilisateurs de React écrivent qu'ils disent: Eh bien, nous ne vous donnerons pas prevProps, c'est impossible, pensez à quelque chose, prevProps ne le font pas, eh bien, vous restez là, il suffit de les mettre en cache dans un état, en général, ils suggèrent que nous fassions une petite béquille dans notre nouveau bon code. Tout est simple, bien sûr, vous pouvez comprendre et pardonner, mais j'étais ennuyé par le fait que maintenant je n'ai pas ce contexte, ma chambre était maçonnée, rien n'en était visible, même mes voisins n'étaient pas entendus, alors j'ai décidé d'écrire une chose pour moi, qui il cachera toutes les béquilles en lui-même et mon code semblera étrange, mais désossé (et désossé?).

En général, j'ai besoin d'implémenter prevProps dans l'état du composant, je veux aussi que tout ressemble à d'habitude, et il est également impossible de vivre sans cette magie dans getDerivedStateFromProps statique (c'est un idiot!). Deux jours de tourments et d'auto-amélioration et tout est prêt, j'ai donné naissance à une souris.

L'installation

npm install --save state-master 

Utiliser

Il vous suffit d'écrire les mêmes getDerivedStateFromProps et componentDidUpdate, mais déjà modifiés.
Nous enveloppons notre composant dans "withStateMaster", passons là une liste de "props" dont vous devez suivre les changements

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

Si le composant hérite d'un autre, passez le parent pour que le parent getDerivedStateFromProps soit appelé

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

Ceci est ma solution à ce problème (même si je n'ai peut-être pas assez compris la réaction, et ce n'est pas du tout un problème).

J'ai donc résisté aux nouveaux canons du React, peut-être qu'un jour je vais m'humilier et tout réécrire comme il se doit.

Bien que les développeurs recommenceront probablement tout à nouveau et d'autres problèmes urgents se poseront.
Voilà, je m'allonge, mais ils ne frappent pas le cloué au lit, comme on dit.