Компонентийн бусад амьдралын циклүүдийг судлахын өмнө функционал компонентийг ердийн буюу Component классаас удамшсан компонент болгож суръя. Манай төслийн Car компонент jsx кодийг буцаах ердийн функц хэлбэрийн хэрэгжүүлэлттэй.
Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 245 Бүртгүүлэх
useMemo хукийн судалгааг
import React, {useState} from 'react'
function App() {
const [number, setNumber] = useState(40)
return (
<div className="container">
<h1>Тооцоологдох шинж: {number}</h1>
<button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
<button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
</div>
);
}
export default App;код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал
хуудас нээгдэнэ.
Нээгдсэн тоо: 1207 Төлбөртэй
Компонентууд хоорондоо холбогдон ажиллах шаардлага гарах нь мэдээж. Иймд хичээлээр компонентууд хоорондоо хэрхэн холбогдохыг авч үзье. Компонентыг Vue-д бүртгэх хичээлийн жишээнд App, Car хоёр компонентийг үүсгээд App компонентод Car компонентийг бүртгээд түүний темплейтийн суурь div дотор Car компонентийг оруулан ирсэн. Програмыг ажлуулбал
үр дүнг үзүүлж байгаа.
Нээгдсэн тоо: 2390 Төлбөртэй
Хаана ямар үйл явдал болсон талаарх дэлгэрэнгүй мэдээллийг Event обьект агуулж байдаг. Харамсалтай нь энд олон тооны хөтөч хоорондын зөрчил байдаг ч хамгийн чухал хэсгүүдийг зохицуулан ашиглах боломжтой.
Үйл явдлын төрөл
Үйл явдлын төрлийг Event обьектын type шинжээр мэдэж болно. Доорх кодод боловсруулагч onclick ба onmouseout үйл явдал үүсэхэд төрлийг тодорхойлж байгаа юм. Энэ бол хөтөч хоорондын зөрчлийг арилгасан шийдэл.
Нээгдсэн тоо: 453 Төлбөртэй
Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо 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;блокуудад салгаад хуудасны ажиллагааг шалгавал
тэгшитгэлийн хувьд 
утгыг ол
тэгшитгэлийн хамгийн их сөрөг язгуурыг ол.
тэнцэтгэл b -ийн ямар утганд биелэх вэ?