class түлхүүр үгээр үүсгэгддэг react компонентод байдаг бас нэгэн онцлогийг авч үзье. Өмнөх хичээлүүдэд бид App компонентийн төлвийг state обьектоор тодорхойлон ашигласан. react компонентийн төлвийг өөрөөр тодорхойлж болдогийг мэдэж байх хэрэгтэй. Javascript -ийн class түлхүүр үгээр үүсгэсэн класс байгуулагч /constructor/ гэсэн тусгай аргатай байдаг.
Материалыг бүртгэлтэй хэрэглэгч үзнэ.
how_to_regБүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 724 Нийтийн
Сүүлийн жилүүдэд Javascript хэл хөгжихийн хирээр түүнийг хэрэглэгч талын хуудасны хөгжүүлэлтэд улам ихээр ашиглан нэг хуудаст аппликашныг /SPA/ хийхэд өргөнөөр ашиглах боллоо. Цаашид Javascript програмистуудын эрэлт огцом өсөх хандлага бий болж байгаа тул та програмын чиглэлээр ажилладаг эсхүл суралцдаг бол сайтын хичээлүүдтэй танилцахыг санал болгоё. Хичээлд масиваас стрим үүсгэх боломжийг авч үзэх болно. Үүний тулд төслийн index.js файлд
function createSubscribe(name) {
return {
next(x) {
console.log(name, ': ', x);
},
error(err) {
console.log('Error: ', err);
},
complete() {
console.log(name, ': Completed!');
}
}
}
Rx.Observable.from([1, 2, 3, 4])
.subscribe(createSubscribe('from'));кодыг оруулан өгье.
Нээгдсэн тоо: 218 Бүртгүүлэх
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 хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал
хуудас нээгдэнэ.
Нээгдсэн тоо: 547 Нийтийн
Өмнөх хичээлүүдэд үзсэн онолын мэдлэг дээрээ суурилан түүнийгээ батгах дадлага болгон react дээр төслийг үүсгэе. Төслөө бид үе шаттайгаар өргөжүүлэх бөгөөд эхний ээлжинд компонент хэсэгт сурсан зүйлээ бататган авах болно. Цаашид судлах зүйлүүдийг төсөлдөө нэмэх байдлаар явах юм. Өөрөөр хэлбэл энэ төсөл манай туршилтын талбар болно.
Нээгдсэн тоо: 508 Нийтийн
React -д үйл явцыг хэрхэн боловсруулах талаар гүнзгийрүүлэн судлая. Үүний тулд Car компонентийн кодод Дарах нэртэй товчийг
import React from 'react'
const car = props => <div>
<h3>Машиний нэр: {props.name}</h3>
<p>Он: <strong>{props.year}</strong></p>
<button>Дарах</button>
</div>
export default carнэмэн өгөөд хуудсаа харвал
гэж харагдана.
Зөвлөмж: Хичээлийн материалыг бүрэн ойлгохын тулд React JS сан хичээлийн багцыг бүхэлд нь үзэхийг зөвлөе.
тэгшитгэлийг бод.