Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан. Түүнээс гадна програмийн бүх хуудаст давтагдах хэсэгт зориулан Layout /макет/ компонентийг боловсруулсан. Layout /макет/ компонент бусад хуудаснуудад давтагдах хэсгийг агуулах учраас кодийг

import React from "react";
import { Link } from "react-router-dom";
import "./Layout.scss";

const Layout = () => {
  return (
    <>
      <header>
        <nav className="nav">
          <ul>
            <li>
              <Link to="/">Нүүр</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/cars">Cars</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <h2>Агуулга</h2>
      </main>
      <footer>2023 Он</footer>
    </>
  );
};

export default Layout;

блокуудад салгаад хуудасны ажиллагааг шалгавал

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Хэвийг хаана ашиглах

• Дараа нь сэргээх боломжтойгоор обьектын төлвийг хадгалах хэрэгтэй бол
• Обьектын төлвийн хадгалалт хайрцаглалтын зарчмыг зөрчихгүйгээр хийгдэх хэрэгтэй бол

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр эхлээд ард нь хаалтанд параметрүүдийн жагсаалтыг бичээд их хаалтанд аргын бие байрлана.

delegate(параметрүүд)
{
    // командууд
}

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас хооронд динамик буюу дахин ачаалахгүйгээр шилжилт хийх боломжийг бүрдүүлсэн. App компонентийн кодод бүртгүүлсэн

function App() {
  return (
    <div>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">Нүүр</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <hr />
      <Routes>
        <Route path="/" element={<Cars />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

/ чиглүүлэгч манай нүүр хуудас буюу http://localhost:3000/ хаягийг зааж байгаа ч Cars компонентод шилжиж байгаа нь логикийн талаасаа ойлгомж муутай болсон. Иймээс кодийг / чиглүүлэгчээр нүүр хуудаст шилждэг болгоё.

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр обьектуудын харилцан ажиллагааны сул холбоосыг бий болгоно.

Хэвийг хаана ашиглах

• Холбоонууд нарийн, ээдрээтэй олон тооны харилцан холбоотой обьектууд байх үед.
• Өөр обьектуудтай нягт холбоотойгоос үүдэн дахин ашиглахад хүндрэлтэй обьектыг дахин ашиглах шаардлага гарах үед

Хэвийг UML диаграмаар дараах байдлаар тодорхойлно.

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

react програмд олон хуудас үүсгэн удирдахын тулд react -ийн бүрэлдхүүнд ордоггүй ч түүнтэй нягт холбоотой ажилладаг нэмэлт пакетийг суулгах хэрэгтэй. Үүний тулд VSCode -ийн терминалийн цонхыг нээгээд

npm i react-router-dom

командыг өгнө. Пакетийг facebook боловсруулаагүй ч react програмд олон хуудас үүсгэн удирдахад хамгийн өргөнөөр ашигладаг. Төсөлд пакетийг ашиглахын тулд төслийн кодийг тусгай компонентод багцлан react програмд react-router пакетийг ашиглаж байгааг мэдэгдэх юм.

Хөрвүүлэгч (Interpreter) хэв нь тодорхой хэлний дүрмийг илэрхийлэн энэ хэлний өгүүлбэр хөрвүүлэгчийг /орчуулагч/ тодорхойлдог.

Хэвийг UML диаграмаар дараах байдлаар тодорхойлно.

Делегат нь аргыг заасан обьектоор илэрхийлэгдэнэ. Өөрөөр хэлбэл делегат гэдэг нь аргын заагч бөгөөд түүгээр тухайн аргыг дуудаж болно.

Делегатийн тодорхойлолт

Делегатийг зарлахдаа delegate түлхүүр үгийг ашиглах ба түүний араас буцаах төрөл, нэр, параметрүүд байрлана. Жишээ нь

delegate void Message();

Message делегатийн буцаах төрөл void (өөрөөр хэлбэл юу ч буцаахгүй) бөгөөд ямарч параметрийг авахгүй. Энэ нь Message делегат ямарч параметр авдаггүй бөгөөд юу ч буцаадаггүй дурын аргыг зааж болно гэсэн үг.
Message делегатийн хэрэглэгээг

Message mes;            // 2. делегатийн хувьсагчийг үүсгэх
mes = Hello;            // 3. хувьсагчид аргын хаягийг олгох
mes();                  // 4. аргыг дуудах

void Hello() => Console.WriteLine("Hello World");
delegate void Message(); // 1. делегатийг зарлах

үзүүлсэн дээрх кодийг авч үзье.

Энэ хичээлээс эхлэн олон хуудастай төслийг үүсгэн хуудас хооронд шууд буюу дахин ачаалалтгүйгээр шилжин удирдах боломжийн талаар үзэх болно. Өөрөөр хэлбэл SPA нэг хуудаст програмийг зохиож сурах юм. Хичээлд зориулан шинэ төслийг үүсгэхдээ react програм үүсгэх хичээлийнхээс арай өөрөөр шууд VSCode засварлагчаас үүсгэх аргыг ашиглая. Аргууд хооронд ялгаа бага тул онцын асуудал үүсэх учиргүй. Эхлээд төслүүдээ хадгалж буй хавтаст react-router хавтасыг үүгээд VSCode засварлагчаар үүсгэсэн хавтасаа нээн өгөөд терминалын цонхыг нээгээд

npx create-react-app . командыг өгөөрэй.