La solución a la falta de prevProps en getDerivedStateFromProps

Hola amigos

Entonces, los desarrolladores de React decidieron hacer nuestro trabajo con el suyo más lineal, para dirigir, por así decirlo, descuidando el camino de la menor oportunidad de cometer un error y escribir un código incorrecto, que, en mi opinión, es nuestro derecho inalienable y una forma de mejorar e inventar. Estamos hablando de todos los métodos favoritos de componentWillReceiveProps y otros de la misma serie, no habrá más, pero se nos dará una alternativa en forma del método estático getDerivedStateFromProps. Personalmente, me recuerda a una habitación oscura donde están las cosas, y necesitan ser encontradas, pero no se ve nada.

Los desarrolladores en sus respuestas a los comentarios enojados de los usuarios de React escriben que dicen: Bueno, no le daremos prevProps, es imposible, piense en algo, prevProps no, bueno, quédese allí, simplemente almacénelos en un estado, en general sugieren que hagamos una pequeña muleta en nuestro Nuevo buen código. Todo es simple, por supuesto, puedes entender y perdonar, pero me molestó el hecho de que ahora no tengo este contexto, mi habitación estaba tapiada, no se veía nada de ella, incluso mis vecinos no fueron escuchados, así que decidí escribir algo para mí, que ocultará todas las muletas en sí mismo y mi código parecerá extraño, pero sin hueso (¿y sin hueso?).

En general, necesito implementar prevProps en el estado del componente, también quiero que todo se vea como de costumbre, y también es imposible vivir sin el mágico esto en el estático getDerivedStateFromProps (¡esto es una tontería!). Dos días de tormento y superación personal y todo está listo, di a luz a un ratón.

Instalación

npm install --save state-master 

Uso

Simplemente escriba el mismo getDerivedStateFromProps y componentDidUpdate, pero ya modificado.
Envolvemos nuestro componente en "withStateMaster", le pasamos una lista de "accesorios" cuyos cambios necesita rastrear

 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 el componente hereda de otro, pase el padre para que se llame al padre getDerivedStateFromProps

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

Esta es mi solución a este problema (aunque quizás no entendí lo suficiente la reacción, y esto no es un problema en absoluto).

Así que me resistí a los nuevos cánones de React, tal vez algún día me humillaría y reescribiría todo como debería.

Aunque los desarrolladores probablemente volverán a hacer todo de nuevo y surgirán otros problemas urgentes.
Eso es todo, me acuesto, pero no están golpeando a la gente postrada en cama, como dicen.