Solusi untuk kurangnya prevProps di getDerivedStateFromProps

Halo teman-teman!

Jadi, para pengembang React memutuskan untuk membuat pekerjaan kami dengan pekerjaan mereka lebih linier, untuk mengarahkan, sehingga untuk berbicara, kami mengabaikan jalan kesempatan paling sedikit untuk membuat kesalahan dan menulis kode yang buruk, yang, menurut pendapat saya, adalah hak kita yang tidak dapat dicabut dan cara untuk meningkatkan dan menciptakan. Kita berbicara tentang semua metode favorit componentWillReceiveProps dan lainnya dari seri yang sama, tidak akan ada lagi, tetapi kita akan diberikan alternatif dalam bentuk metode statis getDerivedStateFromProps. Secara pribadi, itu mengingatkan saya pada sebuah ruangan gelap di mana segala sesuatu terletak, dan mereka perlu ditemukan, tetapi tidak ada yang terlihat.

Pengembang dalam tanggapan mereka terhadap komentar marah dari pengguna Bereaksi menulis bahwa mereka berkata: Ya, kami tidak akan memberi Anda prevProps, itu tidak mungkin, pikirkan sesuatu, prevProps jangan, well, Anda tetap di sana, cukup cache mereka dalam keadaan, secara umum mereka menyarankan kami membuat kruk kecil di kami kode baru yang bagus. Semuanya sederhana, tentu saja, Anda dapat memahami dan memaafkan, tetapi saya merasa terganggu oleh kenyataan bahwa sekarang saya tidak memiliki konteks ini, kamar saya tertutup, tidak ada yang terlihat darinya, bahkan tetangga saya tidak mendengar, jadi saya memutuskan untuk menulis sesuatu untuk diri saya sendiri, yang itu akan menyembunyikan semua kruk di dalam dirinya sendiri dan kode saya akan tampak aneh, tetapi tanpa tulang (dan tanpa tulang?).

Secara umum, saya perlu menerapkan prevProps dalam keadaan komponen, saya juga ingin semuanya terlihat seperti biasa, dan juga tidak mungkin untuk hidup tanpa sihir ini di getDerivedStateFromProps statis (ini bodoh!). Dua hari siksaan dan perbaikan diri dan semuanya sudah siap, saya melahirkan tikus.

Instalasi

npm install --save state-master 

Gunakan

Cukup tulis getDerivedStateFromProps dan componentDidUpdate yang sama, tetapi sudah dimodifikasi.
Kami membungkus komponen kami di "withStateMaster", berikan daftar "alat peraga" yang perubahannya perlu Anda lacak

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

Jika komponen mewarisi dari yang lain, operasikan induk sehingga induk getDerivedStateFromProps dipanggil

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

Ini adalah solusi saya untuk masalah ini (walaupun mungkin saya tidak cukup mengerti reaksinya, dan ini sama sekali bukan masalah).

Jadi saya menolak kanon React yang baru, mungkin suatu hari nanti saya akan merendahkan diri dan menulis ulang semuanya sebagaimana mestinya.

Meskipun pengembang mungkin akan mengulang semuanya lagi dan masalah mendesak lainnya akan muncul.
Itu saja, saya berbaring, tetapi mereka tidak mengenai orang yang terbaring di tempat tidur, seperti yang mereka katakan.