Noldan reaktiv dasturini yarating (7 qism): Reaktsiya va eng yaxshi amaliyotlarni sozlash

Ushbu xabar foydalanuvchilardan iborat bo'lgan boshlang'ich darajadagi xabarlarning bir qismidir
React uchun tayyor vositalar, shablonlar yoki qozon plitalari, lekin React dasturini qanday yaratishni boshidanoq o'rganishni va tushunishni istayman.

Ushbu seriyadagi barcha xabarlar:
1 qism: Kirish
2-qism: Initsializatsiya va birinchi fayl
3-qism: ES2015 sintaksisidan foydalanish
4-qism: Uslub qo'llanmasini qo'llash
5-qism: Express-serverni sozlash
6-qism: Modul to'plamidan foydalanish
7-qism: Reaktsiya va eng yaxshi amaliyotlarni o'rnatish
8-qism: Redux-ni sozlash
9-qism: React Router-ni sozlash
10-qism: TDD va Jest-ni sozlash

Reaktni sozlash

Ushbu postda biz React dasturini o'rnatamiz va juda oddiy tarkibiy qism yaratamiz, shunda biz React komponentlarini ishlab chiqishda yodda tutishingiz kerak bo'lgan eng yaxshi tajribalarni ko'rib chiqamiz. Ko'ngil ochish joyi shu erda boshlanadi, shuning uchun darhol qazib olaylik!

React va React Dom paketlarini qaramlik sifatida o'rnating:

$ npm o'rnatish - reaktsiya reaksiya domeni saqlanishi mumkin

Keyin index.js-ni oching va bizning dasturimizni aks ettiradigan juda oddiy React komponentasini yarating. Bizning indeks.pug shablon faylida bizda id ilovasi bo'lgan element mavjud, shuning uchun uni dasturni o'rnatish uchun ishlataylik.

/ **
 * index.js
 * /
'reaktsiya' dan import qilish reaktsiyasi;
'реак-dom' -dan {render} ni import qilish;
const MainApp = () => (
  

Assalomu alaykum!

);
// ilovani ko'rsatish
render (, document.getElementById ('ilova'));

Ushbu oddiy kod fuqaroligi bo'lmagan MainApp funktsional komponentini yaratadi va uni id dasturiga ega DOM elementiga o'rnatadi. Ushbu kod darhol ishlamaydi va agar siz to'plamni qurmoqchi bo'lsangiz yoki serverni ishga tushirsangiz, sizda xato bo'ladi.

Ushbu xatoning sababi bizning index.js faylimizda BSL hali tushunmaydigan JSX sintaksisiga ega. Babelga ushbu sintaksisni oddiy JavaScript-ga sharhlashiga ruxsat berish uchun biz Babel uchun React oldindan sozlamasidan foydalanmoqchimiz.

Paketni qaramlik sifatida o'rnating:

$ npm o'rnatish - babel-preset-reaktsiyasini saqlang

Keyin .babelrc faylidagi oldindan belgilashlar ro'yxatiga oldindan moslamani qo'shing:

{
  "oldindan sozlash": [
    "es2015",
    "sahna-0",
    "munosabat"
  ],
  "plaginlar": ["transform-inline-environment-o'zgaruvchilar"]
}

To'plamni tuzishga xalaqit beradigan astarli xato ham bo'lishi kerak. Linter shikoyat qilmoqda, chunki index.js JSX sintaksisini o'z ichiga olgan JavaScript faylidir, ammo jsx o'rniga js kengaytmasidan foydalanadi.

Ushbu qoidaning tavsifini bu erda o'qishingiz mumkin. 'Uni ishlatmaslik kerak' bo'limi, agar siz JSX sintaksisini o'z ichiga olgan fayllarning kengayishini cheklash haqida qayg'urmasangiz, ushbu qoidadan foydalanmasligingiz kerakligini aytadi.

Siz ushbu qoidadan foydalanishda davom etishingiz mumkin, lekin men barcha fayllar uchun js kengaytmasidan foydalanishni afzal ko'raman, shuning uchun men ushbu qoidani o'chirib qo'yaman:

{
  "uzaytiradi": "airbnb",
  "env": {
    "es6": rost,
    "brauzer": haqiqiy,
    "tugun": haqiqiy
  },
  "qoidalar": {
    "реакция / jsx-filename-extension": 0
  }
}

HMR yoqilmoqda

Issiq modulni almashtirishni yoqish kod blokini qo'shish kabi oddiy:

/ **
 * index.js
 * /
'reaktsiya' dan import qilish reaktsiyasi;
'реак-dom' -dan {render} ni import qilish;
if (module.hot) {
  modul.hot.accept ();
}
const MainApp = () => (
  

Assalomu alaykum!

);
// ilovani ko'rsatish
render (, document.getElementById ('ilova'));

Maslahatlar va eng yaxshi amaliyotlar

Qo'llanmani davom ettirishdan oldin, biz React bilan ishlash tajribamdan, shuningdek, Internetda o'qish va qidirishdan o'rgangan maslahatlar va eng yaxshi amaliyotlarning umumiy ro'yxatini ko'rib chiqamiz. Reaktiv komponentlaringizni yaratishda ularni yodda saqlang.

Mahalliy importga qarshi qaramlik

Mahalliy importga bog'liqlik importini yangi chiziqqa ajrating. Birinchi navbatda qaramlik importi kerak.

import qilish React, {tarkibiy qism 'reaktsiya' dan;
"foydali-modul" dan foydaliModulni import qilish;
'./my-local-module' dan myLocalModule-ni import qilish;

Fuqaroligi bo'lmagan funktsional komponentlar

Agar tarkibiy qism faqat render bilan ishlaydigan komponent bo'lsa yoki davlat ob'ektidan foydalanish kerak bo'lmasa, klass o'rniga oddiy JavaScript funktsiyasidan foydalaning. Bunga fuqaroligi bo'lmagan funktsional komponent deyiladi.

Shunday qilib, buni qilish o'rniga:

import qilish React, {tarkibiy qism 'reaktsiya' dan;
sinf MyComponent {komponentini kengaytiradi {
  render () {
    qaytish (
      
Salom!
    );   } }
standart MyComponent eksport qilish;

Buni bajaring:

'reaktsiya' dan import qilish reaktsiyasi;
const MyComponent = () => 
Salom!
;
standart MyComponent eksport qilish;

Qancha tartibsizlik olib tashlandi? Bundan tashqari, funktsiyani o'zi eksport qilish orqali uni soddalashtirishingiz mumkin:

'reaktsiya' dan import qilish reaktsiyasi;
default default () => 
Salom!
;

Ammo, men buni qilishni afzal ko'rmayman, chunki bu disk raskadrovka jarayonini ancha qiyinlashtiradi. Agar siz React Dev Tools-ni tekshirsangiz, komponent nomini "Noma'lum" ekanligini ko'rasiz, chunki funktsiya anonimdir.

Anonim funktsional komponent

Anonim funktsiyaning o'rniga oddiy nomlangan funktsiyadan foydalanish yaxshiroq bo'ladi:

'reaktsiya' dan import qilish reaktsiyasi;
birlamchi eksport funktsiyasi MyComponent () {
  return 
Salom!
; }
Nomlangan funktsional komponent

Taqdimot komponentlaridan boshlang

Taqdimot tarkibiy qismlarini aniqlash osonroq, tushunish oson va ularni qayta-qayta ishlatish mumkin, chunki ular dasturning qolgan qismidan mustaqil.

Agar siz ilovangizni taqdimot qismlariga ajratib qo'ysangiz, ularning barchasini bitta sahifaga joylashtirasiz va butun dastur davomida birlashtirilgan ko'rinishni va his qilishni amalga oshirish uchun ularning dizayni va o'zgarishini o'zgartirishingiz mumkin.

Tarkibingizni taqdimot komponenti sifatida yarating va faqat kerak bo'lganda holat qo'shing, bu bizni keyingi maslahatga olib keladi.

Shtatdan foydalanishni minimallashtiring

Qisman holatingizni tarkibiy qismlardan foydalaning va ular ma'lumotlarni UI uchun emas, balki UI uchun ishlatganligiga ishonch hosil qiling, boshqacha qilib aytganda, agar siz uni render () da ishlatmasangiz, unda bu holat bo'lmasligi kerak. Shuni esda tutingki, agar siz komponentingizni qayta ko'rsatmoqchi bo'lsangiz, faqat setState-dan foydalanishingiz kerak.

Aytaylik, bizda bitta tugmachadan iborat tarkibiy qism mavjud. Ushbu tugmani bir marta bosish mumkin va u bosilganda konsolga xabar yuboriladi:

import qilish React, {tarkibiy qism 'reaktsiya' dan;

sinf MyComponent {komponentini kengaytiradi {
  holat = {
    bosilganOnce: false,
  };
  handleClick = () => {
    if (! this.state.clickedOnce) {
      console.log ('Bosilgan');
    }
    this.setState ({
      bosdiOnce: true,
    });
  }
  komponentDidUpdate () {
    console.log ('Yangilangan!');
  }
  render () {
    qaytish (
      
               
    );   } }
standart MyComponent eksport qilish;

Bu noto'g'ri amalga oshirilishning misoli, bayroqni o'rnatish uchun shtatdan foydalanib, bosilganOnce tugmachani yana bosish mumkinmi yoki yo'qmi. Har safar tugma bosilganda, komponent kerak bo'lmasa ham, uni qayta namoyish etadi.

Ilova tugmachani bosishda qayta ko'rsatiladi

Bu yaxshiroq bo'lar edi:

import qilish React, {tarkibiy qism 'reaktsiya' dan;

sinf MyComponent {komponentini kengaytiradi {
  clickedOnce = noto'g'ri;
  
  handleClick = () => {
    if (! this.clickedOnce) {
      console.log ('Bosilgan');
    }
    this.clickedOnce = true;
  }
  komponentDidUpdate () {
    console.log ('Yangilangan!');
  }
  render () {
    qaytish (
      
               
    );   } }
standart MyComponent eksport qilish;

Ushbu bajarishda davlat kaliti o'rniga sinf mulki ishlatiladi, chunki bosilganOnce bayrog'i UI holatini anglatmaydi va shu sababli komponent holatida bo'lmasligi kerak. Ushbu yangi amalga oshirish bilan tugmachani bir necha marta bosish endi yangilashni boshlamaydi.

Har doim propTypes va defaultProplarni aniqlang

Barcha komponentlar komponentlar ichida imkon qadar yuqori aniqlangan propTypes va defaultProplarga ega bo'lishi kerak. Ular tarkibiy hujjatlar sifatida xizmat qiladi va darhol faylni o'qiyotgan boshqa ishlab chiquvchilarga ko'rinishi kerak.

React v15.5-dan beri React.PropTypes boshqa paketga o'tdi, shuning uchun paketni qaramlik sifatida o'rnataylik:

$ npm o'rnatish - prop-turlarini saqlash

Fuqaroligi bo'lmagan funktsional komponentlari uchun:

Vazifalar JavaScript-ga yuklangan, bu siz uni e'lon qilishdan oldin foydalanishingiz mumkin degan ma'noni anglatadi:

'reaktsiya' dan import qilish reaktsiyasi;
"prop-turlari" dan PropTypes-ni import qilish;
MyComponent.propTypes = {
  sarlavha: PropTypes.string,
};
MyComponent.defaultProps = {
  sarlavha: 'Oddiy hisoblagich',
};
standart MyComponent funktsiyasi (rekvizitlar) {
  return 

{props.title}

; }

ESLint funktsiyani aniqlashdan oldin shikoyat qiladi, lekin tarkibiy hujjatlarni yaxshiroq qilish uchun .eslintrc faylini o'zgartirib, funktsiyalar uchun ushbu tartiblash qoidasini o'chirib qo'yamiz:

{
  ...
  "qoidalar": {
    "реакция / jsx-filename-extension": 0,
    "foydalanishdan oldin-aniqlash": [
      "xato",
      {
        "vazifalar": noto'g'ri
      }
    ]
  }
}

Sinfga asoslangan komponentlar uchun:

Funktsiyalardan farqli o'laroq, JavaScript-dagi sinflar ko'tarilmaydi, shuning uchun MyComponent.propTypes = ... ni klassni aniqlamasdan oldin qilishimiz mumkin emas, lekin propTypes va defaultProps-larni statik sinf xususiyatlari sifatida aniqlashimiz mumkin:

import qilish React, {tarkibiy qism 'reaktsiya' dan;
"prop-turlari" dan PropTypes-ni import qilish;
sinf MyComponent {komponentini kengaytiradi {
  statik propTypes = {
    sarlavha: PropTypes.string,
  };
  statik defaultProps = {
    sarlavha: 'Oddiy hisoblagich',
  };
  render () {
    return 

{this.props.title}

;   } }
standart MyComponent eksport qilish;

Davlatni boshlash

Holat tarkibiy konstruktor ichida ishga tushirilishi mumkin:

sinf MyComponent {komponentini kengaytiradi {
  quruvchi (rekvizit) {
    super (rekvizitlar);
    this.state = {
      soni: 0,
    };
  }
}

Yaxshi usul bu davlatni sinf mulki sifatida boshlashdir:

sinf MyComponent {komponentini kengaytiradi {
  quruvchi (rekvizit) {
    super (rekvizitlar);
  }
  holat = {
    soni: 0,
  };
}

Bu ancha yaxshi, toza, o'qishga o'xshaydi va tarkibiy hujjatlarga hissa qo'shadi. Davlat ob'ekti propTypes va defaultProps-dan keyin ishga tushirilishi kerak:

import qilish React, {tarkibiy qism 'reaktsiya' dan;
"prop-turlari" dan PropTypes-ni import qilish;
sinf MyComponent {komponentini kengaytiradi {
  // birinchi navbatda propTypes
  statik propTypes = {
    sarlavha: PropTypes.string,
  };
  // defaultProps ikkinchi o'rinda turadi
  statik defaultProps = {
    sarlavha: 'Oddiy hisoblagich',
  };
  // konstruktor bu erga keladi
  konstruktor () {
    ...
  }
  // keyin davlat keladi
  holat = {
    soni: 0,
  };
}

SetState-ga funktsiyani o'tkazing

Reaktsiya hujjatlari this.state va this.pops qiymatlariga tayanib, keyingi holatni hisoblash uchun tushkunlikka tushadi, chunki React ularni sinxron ravishda yangilaydi. Bu holat SetState () -ni chaqirgandan so'ng darhol o'zgarmasligi mumkin degan ma'noni anglatadi.

sinf MyComponent {komponentini kengaytiradi {
  holat = {
    soni: 10,
  }
  onClick = () => {
    konsol.log (this.state.count); // 10
    
    // hisoblash darhol o'zgarmaydi
    this.setState ({hisoblash: this.state.count + this.props.step});
    
    konsol.log (this.state.count); // hali 10
  }
}

Bu oddiy stsenariylar uchun ishlaydi va holat hali ham to'g'ri yangilanadi, ammo bu murakkabroq stsenariylarda kutilmagan xatti-harakatlarga olib kelishi mumkin.

Ushbu stsenariyni ko'rib chiqing, sizda bitta tugmachani chiqaradigan tarkibiy qism mavjud. Ushbu tugmachani bosgandan so'ng, boshqaruvni bosish usuli chaqiriladi:

sinf MyComponent {komponentini kengaytiradi {
  statik defaultProps = {
    qadam: 5,
  }
  statik propTypes = {
    qadam: PropTypes.number,
  }
  
  holat = {
    soni: 10,
  }
  
  handleClick = () => {
    this.doSomething ();
    this.doSomethingElse ();
  }
  doSomething = () => {
    this.setState ({hisoblash: this.state.count + this.props.step});
  }
  doSomethingElse = () => {
    this.setState ({hisoblash: this.state.count - 1});
  }
  render () {
    qaytish (
      
        

Joriy soni: {this.state.count}

               
    );   } }

Tugmachani bosganingizda tugma holdClick () ni chaqiradi va u o'z navbatida doSomething () va keyin doSomethingElse () ni chaqiradi. Ikkala funktsiya ham shtat ichidagi hisoblash qiymatini o'zgartiradi.

Mantiqan, 10 + 5 15 bo'ladi, keyin 1ni olib tashlaymiz va natija 14 ga teng, to'g'rimi? Xo'sh, bu holda bunday emas - birinchi bosishdan keyin hisoblash qiymati 9 emas, 14 emas. Bu sodir bo'ladi, chunki 15. emas, balki doSomethingElse () deyilganda this.state.count qiymati 10 ga teng.

Buni tuzatish uchun siz ob'ekt emas, balki funktsiyani qabul qiladigan setState () ning ikkinchi shaklidan foydalanishingiz mumkin. Ushbu funktsiya birinchi dalil sifatida oldingi holatni oladi va yangilash ikkinchi argument sifatida qo'llanilganda rekvizitlar:

this.setState ((prevState, rekvizitlar) => ({
  hisoblash: prevState.count + props.step
}))

Biz o'z misolimizni tuzatish uchun ushbu shakldan foydalanishimiz mumkin:

sinf MyComponent {komponentini kengaytiradi {
  ...
  handleClick = () => {
    this.doSomething ();
    this.doSomethingElse ();
  }
  doSomething = () => {
    this.setState ((prevState, rekvizitlar) => ({
      hisoblash: prevState.count + props.step
    }));
  }
  doSomethingElse = () => {
    this.setState (prevState => ({
      hisoblash: prevState.count - 1
    }));
  }
  ...
}

Ushbu amalga oshirish bilan, hisoblar 10 dan 14 dan 18 gacha va hokazolarda to'g'ri yangilanadi. Oddiy matematiklar yana mantiqiy!

Ok funktsiyalaridan sinf xususiyatlari sifatida foydalaning

Ushbu kalit so'z har doim JavaScript dasturchilarini chalkashtirib yuborgan va uning xatti-harakati React tarkibiy qismlarida kamchiliklarga olib kelmaydi. Ushbu kalit so'z React komponentasida qanday o'zgarishini bilasizmi? Quyidagi misolni ko'rib chiqing:

import qilish React, {tarkibiy qism 'reaktsiya' dan;
sinf MyComponent {komponentini kengaytiradi {
  holat = {
    soni: 0,
  };
  onClick () {
    console.log (this.state);
  }
  render () {
    qaytish (
      
        

hisoblash: {this.state.count}

               
    );   } }
standart MyComponent eksport qilish;

Tugmani bosish xatoga olib keladi:

Noma'lum TypeError: "Belgilanmagan" xususiyatini o'qib bo'lmadi

Buning sababi onClick-da sinf usuli sifatida sukut bo'yicha bog'lanmagan. Buni tuzatishning bir necha yo'li mavjud. (pun mo'ljallangan, olish kerakmi?)

Buning usullaridan biri bu funktsiyani render () funktsiyasi ichida berish paytida funktsiyani to'g'ri kontekst bilan bog'lashdir:

 Meni bosing 

Yoki render () da o'q vazifasini ishlatib, kontekstni o'zgartirishdan saqlanishingiz mumkin:

 this.onClick (e)}> Meni bosing 

Shu bilan birga, ushbu ikkita usul ozgina ishlash narxiga ega, chunki funktsiya har bir renderga qayta taqsimlanishi kerak. Ushbu unchalik katta bo'lmagan xarajat oldini olish uchun siz konstruktor ichidagi funktsiyani bog'lashingiz mumkin:

import qilish React, {tarkibiy qism 'reaktsiya' dan;
sinf MyComponent {komponentini kengaytiradi {
  quruvchi (rekvizit) {
    super (rekvizitlar);
    this.onClick = this.onClick.bind (bu);
  }
  ...
  render () {
    ...
    
    ...
  }
}
standart MyComponent eksport qilish;

Ushbu usul yaxshiroq, ammo sizni osongina olib ketishingiz va shunga o'xshash narsalarni tugatishingiz mumkin:

quruvchi (rekvizit) {
  // bu yomon, haqiqatan ham yomon
  this.onClick = this.onClick.bind (bu);
  this.onChange = this.onChange.bind (bu);
  this.onSubmit = this.onSubmit.bind (bu);
  this.increaseCount = this.increaseCount.bind (bu);
  this.decreaseCount = this.decreaseCount.bind (bu);
  this.resetCount = this.resetCount.bind (bu);
  ...
}

Biz Babel-dan foydalanganimiz va sinf xususiyatlarini qo'llab-quvvatlaganimiz sababli, sinf usullarini belgilashda strelka funktsiyalaridan foydalanish yaxshiroq bo'lar edi:

sinf MyComponent {komponentini kengaytiradi {
  ...
  onClick = () => {
    // "bu" saqlanib qoladi
    console.log (this.state);
  }
  render () {
    qaytish (
      
        

{this.state.count}

               
    );   } }

Props ob'ektini yo'q qiling

Agar tarkibiy qismda ko'plab rekvizit mavjud bo'lsa, har bir xususiyatni o'z satriga joylashtirgan rekvizit ob'ektini yo'q qiling.

Fuqaroligi bo'lmagan funktsional komponentlari uchun:

standart MyComponent funktsiyasini eksport qilish ({
  ism,
  familiya,
  elektron pochta manzili,
  tavsif,
  onChange,
  onSubmit,
}) {
  qaytish (
    
      

{firstName}

      ...     
  ); }

Standart dalillar defaultProps-ni tushirish uchun bahona emas. Yuqorida aytib o'tilganidek, har doim propTypes va defaultProps-larni aniqlash kerak.

Sinfga asoslangan komponentlar uchun:

sinf MyComponent {komponentini kengaytiradi {
  ...
  render () {
    const {
      ism,
      familiya,
      elektron pochta manzili,
      tavsif,
      onChange,
      onSubmit,
    } = this.props;
    qaytish (
      
        

{firstName}

        ...       
    );   } }

Bu yanada toza, xususiyatlarni qayta buyurtma qilishni osonlashtiradi va Git uchun o'qilishi mumkin bo'lgan diff yaratishda xususiyatlarni ro'yxatga qo'shish / o'chirishni osonlashtiradi. Quyidagilarni ko'rib chiqing:

Har bir mulk yangi satrda bo'lganda farqni o'qish osonroq bo'ladi

O'ng tomonda siz qaysi mulk qo'shilganligini osongina ayta olasiz, ammo chap tomonda siz ushbu chiziqda biror narsa o'zgarganligini bilasiz va chiziqning qaysi qismi aniqlanganini aniq bilish uchun diqqat bilan qarashingiz kerak. o'zgartirildi.

Shartli ravishda ko‘rsatish

Shartga asoslanib ikkita komponentdan yoki JSX kod bloklaridan birini ko'rsatishingiz kerak bo'lsa, uchlik iborani ishlating:

isLoggedIn
  ? 
Xush kelibsiz, {username}!
  : Kirish

Agar kod bir nechta satrlardan iborat bo'lsa, qavslardan foydalaning:

isLoggedIn? (
  
    Xush kelibsiz, {usename}!   
): (        Kirish    )

Agar shartga qarab bitta komponentni yoki JSX kod blokini ko'rsatishingiz kerak bo'lsa, buning o'rniga qisqa tutashuvni baholashdan foydalaning:

isComplete && 
Bajarildingiz!

Bir nechta satrlar uchun qavslardan foydalaning:

isComplete && (
  
    Tayyor!   
)

Kalit atribut

Array.prototype.map va render () funktsiyasi ichida shunga o'xshash qator usullaridan foydalanish odatiy hol bo'lib, kalit atributini unutish oson. Yarashish etarli darajada qiyin, uni qiyinlashtirmang. Har doim kalitni tegishli joyga joylashtirishni unutmang. (pun yana mo'ljallangan, olish kerakmi?)

render () {
  qaytish (
    
    {       {         items.map (element => (elementlar xaritasi)           
  •             {item.name}           
  •         ))        }     
  ); }

Xarita (), filtr () yoki shunga o'xshash qator usullaridan foydalanganda, qayta qo'ng'iroq qilish uchun ikkinchi parametr elementning indeksidir. Ushbu indeksni kalit sifatida ishlatish umuman yomon fikr. React kalit atributidan foydalanib, qaysi elementlar o'zgartirilgan, qo'shilgan yoki olib tashlanganligini aniqlash uchun ishlatiladi va kalit qiymati barqaror bo'lishi kerak va har bir elementni aniq identifikatsiya qilishi kerak.

Massiv tartiblangan yoki massiv boshiga element qo'shilgan hollarda, indeksni ifodalovchi element bir xil bo'lishi mumkin bo'lsa ham, indeks o'zgartiriladi. Buning oqibatida keraksiz tarqatishlar va ba'zi hollarda noto'g'ri ma'lumotlar ko'rsatiladi.

UUID yoki ShortID-dan foydalanib, har bir element birinchi yaratilganda noyob identifikator hosil qiling va uni asosiy qiymat sifatida ishlating.

Holatni normallashtiring

Davlat ob'ektini normallashtirishga harakat qiling va uni iloji boricha tekis tuting. Shtatdagi ma'lumotlarni joylashtirish uni yangilash uchun murakkabroq mantiq talab etiladi. Chuqur joylashtirilgan maydonni yangilash naqadar dahshatli bo'lishini tasavvur qiling - kuting, o'ylamang, mana:

// davlat ob'ekti
holat = {
  ...
  xabarlar: [
    ...,
    {
      meta: {
        id: 12,
        muallif: '...',
        jamoat: yolg‘on,
        ...
      },
      ...
    },
    ...
  ],
  ...
};
// "ochiq" ni "true" ga yangilash
this.setState ({
  ... bu.shtat,
  xabarlar: [
    ... this.state.posts.slice (0, indeks),
    {
      ... this.state.posts [index],
      meta: {
        ... this.state.posts [index] .meta,
        ommaviy: haqiqiy,
      }
    },
    ... this.state.posts.slice (indeks + 1),
  ]
});

Ushbu kod nafaqat xunuk, balki ular bir-biriga bog'liq bo'lmagan tarkibiy qismlarni, agar ular namoyish etayotgan ma'lumotlar deyarli o'zgarmasa ham, qayta ko'rsatishga majbur qilishi mumkin. Buning sababi, biz barcha ota-bobolarimizni yangi daraxt ob'ekti bilan davlat daraxtida yangiladik.

Agar biz davlat daraxtini qayta tuzsak, xuddi shu maydonni yangilash osonroq bo'ladi:

holat = {
  xabarlar: [
    10,
    11,
    12,
  ],
  meta: {
    10: {
      id: 10,
      muallif: "muallif-a",
      jamoat: yolg‘on,
    },
    11: {
      id: 11,
      muallif: 'muallif-b',
      jamoat: yolg‘on,
    },
    12: {
      id: 12,
      muallif: 'muallif-c',
      jamoat: yolg‘on,
    },
  },
}
this.setState ({
  meta: {
    ... bu.state.meta,
    [id]: {
      ... this.state.meta [id],
      ommaviy: haqiqiy,
    }
  }
})

Sinf nomlaridan foydalaning

Agar siz biron bir shartli sinf nomini ishlatishingiz kerak bo'lgan vaziyatga duch kelgan bo'lsangiz, siz shunga o'xshash narsani yozgan bo'lishingiz mumkin:

  ...

Agar sizda bir nechta shartli sinf nomlari bo'lsa, bu juda yomon bo'ladi. Uchlikdan foydalanish o'rniga, sinf nomlari to'plamidan foydalaning:

'classnames' -dan sinf nomlarini import qilish;
const sinflari = sinf nomlari ('tab', {'faol': isActive});
  ...

Har bir fayl uchun bitta komponent

Bu qiyin qoida emas, lekin men har bir komponentni bitta faylda saqlashni va ushbu komponentni standart eksport qilishni afzal ko'raman. Menda buning biron bir aniq sababi yo'q, lekin men uni yanada toza va tartibli deb bilaman - agar siz ham shunday qilsangiz, yuqori beshlik!

Xulosa

Reaktiv komponentini ishlab chiqishning bitta to'g'ri yo'li yo'q. Sizga qayta ishlatiladigan va saqlanadigan tarkibiy qismlarni ishlab chiqishga yordam beradigan eng yaxshi amaliyotlar va naqshlarning bir nechtasini ko'rib chiqdik va men sizga qanday naqsh va amaliyotni afzal ko'rishingizni va nima uchun kerakligini bilish juda qiziq.

Ushbu seriyaning keyingi qismida biz oddiy "Do-Do" ilova dasturini tuzamiz va ushbu eng yaxshi amaliyot va naqshlardan foydalanamiz.

Ushbu maqola foydali bo'ldimi? Iltimos, quyidagi Clap tugmasini bosing yoki ko'proq ma'lumot olish uchun menga ergashing.

O'qiganingiz uchun rahmat! Agar biron-bir fikringiz bo'lsa, quyida sharh qoldiring.

7-b bo'limiga o'ting: Oddiy TODo ilovasini yaratish (ko'p o'tmay)