useEffect

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

import React, {useState} from 'react'

function App() {
  const [type, setType] = useState('users')
 
  return (
      <div className="container">
        <h1>Өгөгдлүүд: {type}</h1>
        
        <button onClick= {() => setType('users')} className="btn btn-primary mx-3">Хэрэглэгчид</button>
        <button onClick= {() => setType('todos')} className="btn btn-primary mx-3">Хийх ажлууд</button>
        <button onClick= {() => setType('posts')} className="btn btn-primary mx-3">Нийтлэлүүд</button>
        
      </div>
  );
}

export default App;

гэж үүсгэе.

Материалыг бүртгэлтэй хэрэглэгч үзнэ.

how_to_regБүртгүүлэх

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 1009 Төлбөртэй

Хичээлээр Promise ухагдхууны тухай жишээгээр авч үзье. Эхлээд Promise гэж юу болох юунд ашигладагийн тухайд гэвэл. ES6 - д Promise гэдэг нь синхрон буюу зэрэг биелэгдэх кодтой ажиллах механизм юм. Үүнийг ойлгохын тулд хүлээлт үүсгэх функцийг эхлээд ES5 - аар хэрэгжүүлсэн

function oldDelay(ms, func) {
    setTimeout(function () {
        func();
    }, ms);
}

oldDelay(3000, function () {
    console.log('Old delay passed!');
});

кодыг харцгаая. oldDelay функц эхний ms параметрээр хүлээлт үүсгэх хугацааг харин хоёрдахь func параметрээр хүлээлтийн хугацаа дуусахад дуудагдах функцийг авна. Хүлээлтийг setTimeout функцээр үүсгэх бөгөөд функц эхний параметрээр эргэн дуудалтын /callback/ функц харин хоёрдахь параметрээр хүлээлтийн хугацааг авдаг. setTimeout функцийн хоёрдахь параметр буюу хүлээлтийн хугацаанд oldDelay функцэд ирэх ms параметрийг өгөөд энэ хугацаа өнгөрөхөд ажиллах эргэн дуудалтын функцээс oldDelay функцэд параметрээр ирсэн func функцийг дуудна.

  Нээгдсэн тоо: 1418 Төлбөртэй

Хэрэглэгч талын хуудасны динамик, интерактив байдлыг хангахад түүний элементүүдийн харагдацыг тодорхой нөхцлөөр удирдаж байх нь их чухал. Иймээс энэ хичээлээр VueJs -ээр хуудас дээрх элементүүдийн харагдацыг удирдах аргуудтай танилцая.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h2>isVisible = True</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isVisible: true
                }
            })
        </script>        
    </body>
</html>

Дээрх энгийн код хуудаст h2 гарчигаар isVisible = True текстийг л үзүүлнэ. Vue -гийн тохиргооны обьектын data талбарт зарлагдсан isVisible талбарыг ашиглааагүй байгаа.

  Нээгдсэн тоо: 530 Төлбөртэй

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

App компонентийн Toogle car товч машиний мэдээллийн жагсаалтыг нээх, хаах ажиллагааг хийх бол Car компонентийн Дарах товчоор App компонентод h1 гарчигаар үзүүлж буй текстийг машиний нэрээр сольдог. Динамик жагсаалттай ажиллах практик болгон програмд Car компонентийн Дарах товчийг input -ээр солиод input -д оруулсан мэдээллээр Car компонентоос машиний нэрийг өөрчлөх машиний мэдээллийг жагсаалтаас хасах ажиллагаануудыг хэрэгжүүлье.

  Нээгдсэн тоо: 652 Төлбөртэй

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

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 415

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 505

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 485

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 554

 

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

Нээгдсэн тоо : 622

 

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

Нээгдсэн тоо : 613

 

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

Нээгдсэн тоо : 775

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 953

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 909

 
Энэ долоо хоногт

тэнцэтгэл биш хэдэн бүхэл тоон шийдтэй вэ?

Нээгдсэн тоо : 1470

 

тэгшитгэлийг бод.

Нээгдсэн тоо : 2137

 

b1=3, bn=96, Sn=189 геометр прогресийн 8-р гишүүнийг ол.

Нээгдсэн тоо : 955