Хэрэглэгчийн эрх, програмын ажиллагааны онцлогоос хамааран зарим нэгэн чиглүүлэгчийг хамгаалах хэрэгцээ гардаг. Үүнийг Vuejs -д хэрхэн хэрэгжүүлэхийг өмнөх хичээлүүдийн жишээн дээр

авч үзье.

Дээд түвшингийн компонент гэж юу болох тэдгээрийг хэрхэн үүсгэн ашиглахыг авч үзье. Үүний тулд төслийн Car компонентийн кодийг дараах байдлаар

import React from "react";
import styles from "./Car.module.css";

class Car extends React.Component {
  render() {
    const inputClasses = [styles.input];

    if (this.props.name !== "") {
      inputClasses.push(styles.green);
    } else {
      inputClasses.push(styles.red);
    }

    if (this.props.name.length > 5) {
      inputClasses.push(styles.bold);
    }

    return (
      <div className={styles.Car}>
        <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;

өөрчилье.

Хүмүүс ОХП -ийн аргачлалыг дэмждэг хэлийг ашигласан бол энэ парадигмаар кодлоод байна гэж буруу бодох гээд байдаг. C# -ийн дотоод сангууд бүгд ОХП -д дээр суурилан ажилладаг тул таны код энэ аргачлалаар бичигдээд байгаа юм шиг харагдаж магадгүй. Обьект гэдэг нь өөртөө өгөгдөл, аргуудыг агуулсан кодлогч үүсгэх өгөгдлийн төрөл. Түүнээс ямар нэгэн супер зүйл ердөө биш. C# -ийн өгөгдлийн суурь төрлүүд ч бас классаас үүсдэг обьектууд. Үүний ижлээр асуудлыг эвтэйхэн, амар шийдэх боломжийг ОХП бидэнд олгож байгаа юм. Түүгээр ч зогсохгүй C# -ийн өгөгдлийн суурь төрлүүдийн классуудыг ч өөрийн хүссэнээр удирдах боломжийг өгдөг.

Байгуулагч үүсгэх

Классууд ба обьектууд хичээлд обьектыг үүсгэхдээ анхдагч байгуулагчийг ашигласан. Гэхдээ бид өөрийн байгуулагч аргыг тодорхойлж болно. Байгуулагч обьектын инициализацийг хийдэг. Хэрвээ класст байгуулагчийг тодорхойлон өгвөл анхдагч байгуулагч байхгүй болно.

Сайтын чиглүүлэгчид байхгүй эсхүл хуудас олдоогүй гэх мэтийн тохиолдолд хэрэглэгчдийг тохирох хуудаст шилжүүлэх хэрэгтэй болдог. Үүнийг redirect буюу шилжүүлэлт гэдэг. Vuejs -ийн шилжүүлэлтийн механизм хэрхэн ажилладагийг энэ хичээлээр авч үзье. Үүний тулд програмийн чиглүүлэгчдийн тодорхойлолтод

...
export default new VueRouter({
  routes: [
    {
      path: '',  
      component: Home
    },
    ...
    {
      path: '/none',
      redirect: '/cars'
    }
  ],
  ...
})

none гэсэн чиглүүлэгчийг үүсгээд түүнд хандвал cars хуудаст шилжүүлнэ гэдгийг redirect: '/cars' гэж заан өгье.

Компонентийн төлвийн өөрчлөлтийг хийх setState арга ансинхрон ажиллагаатай тул төлвийн өөрчлөлтийг зөв хийж сурах хэрэгтэй. Үүнийг Фрагмент хичээлд үүсгэсэн

import React, { Component } from 'react'

export default class Counter extends Component {
  state = {
    counter: 0
  }
  addCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  render() {
    return (
      <div>
        <h2>Тоолуур {this.state.counter}</h2>
        <button onClick={this.addCounter}>+</button>
        <button onClick={() => this.setState({ counter: this.state.counter - 1 })}>-</button>
      </div>
    )
  }
}

Counter компонентийн жишээн дээр авч үзье.

Өмнөх хичээлүүдээр бид өгөгдлийн төрлүүд, үйлдлүүд, цикл, нөхцөлт бүтэцүүд, массив, арга гээд C# програмчлалын хэлний суурь ойлголтуудыг үзсэн. C# бол бүрэн хэмжээний обьект хандлагат хэл. ОХП -ийн аргачлал орчин үед маш өргөн дэлгэрсэн тул өргөн дэлгэрсэн програмчлалын хэлүүд бүгд энэ парадигмийг дэмждэг. Энгийнээр ОХП -нь програмийг өөр хоорондоо харилцан холбогдож ажиллах обьектууд байдлаар зохиох аргачлал юм. Цаашид програмчлалын илүү нарийн ойлголтуудыг судлаж эхлэх учраас өмнөх хичээлүүдийг үзсэн байхыг зөвлөе.

Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг

гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.

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 компонентийг үүсгэе.