React компонентоос хэд хэдэн элементүүдийг буцаах нь ердийн үзэгдэл ч тэдгээрийг заавал нэг суурь элементэд багцалсан байх дүрэмтэй. Энэ дүрэм нь зарим тохиолдолд DOM -д илүү зангилаа /элемент/ үүсгэдэг асуудлыг React 16 хувилбараас фрагментээр солин шийдвэрлэсэн. Фрагмент гэдгийг ойлгохын тулд төслийн кодод багахан өөрчлөлтийг хийе. ErrorBoundary классийн ажиллагааг шалгах зорилгоор Car компонентод нэмэн өгсөн

     if (this.props.name === 'Toyata Prius') {
       throw new Error('Алдаа гарлаа !!!')
     }

кодийг хасвал програм TOGGLE CAR товч дээр дарахад алдаа хаялгүй хэвийн ажиллана.

Програмчлалын C# хэлэнд өгөгдлийн энгийн төрлүүдээс гадна enum буюу дурдах /тоолох/ гэсэн төрөл бий. enum төрөл логик холбоотой тогтмолуудаар илэрхийлэгдэнэ.

Төрлийг enum оператороор зарладаг.

enum нэр
{
    // тоологын утгууд
    утга1,
    утга2,
    .......
    утгаN
}

enum араас тооллогын нэрийг өгнө. Дараа нь хаалтанд таслалаар тусгаарлан тооллогын утгууддыг тогтмолуудыг бичнэ.

react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

код бүхий шинэ ErrorBoundary компонентийг үүсгэе.

switch/case бүтэц илэрхийллийн утгыг утгуудын багцтай харьцуулан утга тохирсон бол тодорхой кодийг биелүүлдэг.

switch бүтцийн албан ёсны тодорхойлолт

switch (илэрхийлэл)
{
    case утга1:
        илэрхийллийн утга утга1-тэй тохирох үед ажиллах код
        break;
    case утга2:
        илэрхийллийн утга утга2-тэй тохирох үед ажиллах код
        break;
    //.............
    case утгаN:
        илэрхийллийн утга утгаN-тэй тохирох үед ажиллах код
        break;
    default:
        илэрхийллийн утга утгуудын багцад байхгүй үед ажиллах код
        break;
}

switch түлхүүр үгийн араас хаалтад харьцуулах илэрхийллийг өгнө.

Өөр функцийн дотор тодорхойлогдсон функцийг локал функц гэдэг. Локал функц тухайн аргын хүрээнд хийгдэх үйлдлүүдийг агуулдаг. Локал функцийг ойлгохын тулд хоёр тоон массивийн нийлбэрийг харьцуулах Compare аргыг

void Compare(int[] numbers1, int[] numbers2)
{
    int numbers1Sum = 0;
    int numbers2Sum = 0;

    foreach (int number in numbers1)
        numbers1Sum += number;

    foreach (int number in numbers2)
        numbers2Sum += number;

    if (numbers1Sum > numbers2Sum)
        Console.WriteLine("numbers1 массивийн тоонуудын нийлбэр их");
    else
        Console.WriteLine("numbers2 массивийн тоонуудын нийлбэр их");
}

int[] numbers1 = { 1, 2, 3 };
int[] numbers2 = { 3, 4, 5, 6, 7 };

Compare(numbers1, numbers2);

гэж тодорхойльё.

react компонентийн амьдалын суурь циклүүдийн сүүлийнх нь componentWillUnmount юм. Аргыг Car компонентод

   componentWillUnmount() {
    console.log('Car componentWillUnmount')
  }

нэмэн тодорхойльё. Арга хэзээ дуудагдахыг нэрнээс нь ойлгосон гэж бодож байна. componentWillUnmount арга компонентыг устган түүнийг DOM -оос хасах үед дуудагдана. Аргын ажиллагааг харахын тулд хөтөч дээр хуудсаа нээгээд машиний жагсаалтыг

Өөрөө өөрийгөө дуудах функцийг рекурсив (recursion) гэж нэрлэдэг. Рекурсивийг мэдээлэл зүйн үндсэн ойлголтуудын нэг гэж үздэг. Асуудлын шийдлийн энэхүү арга нь математик индукцтэй төстэй. Өөрөөр хэлбэл функц өөрийгөө дуудахын тулд эхлээд функцийг өөр утгатайгаар дуудсан үр дүнг авсан байх хэрэгтэй болдог.
Функц өөрөө өөрийгөө дуудах ажиллагаа програмчлалын ихэнх хэлүүдэд байдаг тул ухагдхууныг ойлгон хэрэгжүүлж сурсан байх хэрэгтэй. Рекурсивийн (recursion) хэрэгжүүлэлтийг тодорхой шийдлүүд дээр харцгаая.

Төслийн Car компонентийг Stateful буюу Component классаас удамшсан класс байдлаар тодорхойлсноор react компонентийн амьдралын циклүүдэд хандах боломжийг авсан. Car компонентод дээр компонентийн төлвийн өөрчлөлтүүдийн циклүүдийг харцгаая. Үүний тулд Car компонентийн кодийг

class Car extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    console.log('Car shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentDidUpdate() {
    console.log('Car componentDidUpdate')
  }

  render() {
    console.log('Car render')
    const inputClasses = [styles.input]

    ...

    return (
      <div className={styles.Car} style={style}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>Он: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
      </div>
    )
  }
}

export default Car

гэж өөрчилье.

Өмнөх хичээлүүдийн бүх жишээнүүдэд тогтмол тооны параметерүүдийг ашигласан. Харин params түлхүүр үгийг ашиглан аргад тодорхойгүй тоотой параметрийг дамжуулж болно.

void Sum(params int[]  numbers)
{
    int result = 0;
    foreach (var n in numbers)
    {
        result += n;
    }
    Console.WriteLine(result);
}
 
int[] nums = { 1, 2, 3, 4, 5};
Sum(nums);
Sum(1, 2, 3, 4);
Sum(1, 2, 3);
Sum();

Компонентийн бусад амьдралын циклүүдийг судлахын өмнө функционал компонентийг ердийн буюу Component классаас удамшсан компонент болгож суръя. Манай төслийн Car компонент jsx кодийг буцаах ердийн функц хэлбэрийн хэрэгжүүлэлттэй.