A solução para a falta de prevProps em getDerivedStateFromProps

Olá amigos!

Então, os desenvolvedores do React decidiram tornar nosso trabalho mais linear, direcionando, por assim dizer, nós negligenciando o caminho da menor chance de cometer um erro e escrevendo um código ruim, que, na minha opinião, é nosso direito inalienável e uma maneira de melhorar e inventar. Estamos falando de todos os métodos favoritos de componentWillReceiveProps e outros da mesma série, eles não serão mais, mas teremos uma alternativa na forma do método estático getDerivedStateFromProps. Pessoalmente, isso me lembra uma sala escura onde as coisas estão, e elas precisam ser encontradas, mas nada é visível.

Os desenvolvedores em suas respostas aos comentários irritados dos usuários do React escrevem o seguinte: Bem, nós não fornecemos prevProps, não é possível pensar em algo, prevProps não, bem, você fica lá, apenas armazena-os em um estado, em geral eles sugerem que façamos uma pequena muleta em nosso novo bom código. É tudo simples, é claro, você pode entender e perdoar, mas fiquei chateado pelo fato de agora não ter esse contexto, meu quarto estar emparedado, nada era visível a partir dele, até meus vizinhos não foram ouvidos, então decidi escrever uma coisa para mim, esconderá todas as muletas em si e meu código parecerá estranho, mas sem ossos (e sem ossos?).

Em geral, eu preciso implementar prevProps no estado do componente, também quero que tudo pareça como de costume e também é impossível viver sem essa mágica em getDerivedStateFromProps estático (isso é tolice!). Dois dias de tormento e auto-aperfeiçoamento e tudo está pronto, eu dei à luz um rato.

Instalação

npm install --save state-master 

Use

Basta escrever o mesmo getDerivedStateFromProps e componentDidUpdate, mas já modificado.
Envolvemos nosso componente em "withStateMaster", passamos uma lista de "adereços" cujas alterações você precisa acompanhar

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

Se o componente herdar de outro, passe o pai para que o pai getDerivedStateFromProps seja chamado

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

Esta é a minha solução para esse problema (embora talvez eu não tenha entendido a reação o suficiente e isso não seja um problema).

Por isso, resisti aos novos cânones do React, talvez um dia eu me humilhe e reescreva tudo como deveria.

Embora os desenvolvedores provavelmente refazem tudo novamente e outros problemas urgentes surgirão.
É isso aí, deito-me, mas eles não estão atingindo as pessoas acamadas.