React хук

React 16.8 хувилбараас компонентийг Component классаас удамшуулахгүйгээр энгийн функц хэлбэрээр буюу функционал компонентийг бичих боломж бий болсон.
React компонентийн ажиллагааны үндэс бол төлвийн удирдлагад оршдог. Өөрөөр хэлбэл компонентийн төлвийг тодорхойлсон обьектийн аль нэгэн эсхүл бүхэлд нь өөрчлөлт ороход React энэ төлвөөс хамааралтай дэлгэцийн хэсгийг дахин зурдаг. Бид өмнөх хичээлүүдэд ашиглаж байсан Component классаас удамшсан компонентийн төлвийг өөрчлөхдөө this.setState({ pageTitle: newTitle }) гэх байдлаар setState аргыг ашиглаж байсан.

Арга ажиллан төлвийг өөрчилсөний дараа компонентийн render арга автоматаар дуудагдан компонентийг дахин зуран харуулдаг. Энд setState, render аргууд суурь Component классаас удамшдаг.
React 16.8 хувилбараас функционал компонентод шилжсэн. Өөрөөр хэлбэл компонентийг Component классаас удамшуулахгүйгээр энгийн функц байдлаар тодорхойлох болсон. Үүний давуу тал гэвэл функцтэй ажиллах нь энгийн бөгөөд ямар нэгэн классаас удамшихгүй тул компьютерийн нөөцийг бага зарцуулна. React -ийн динамик ажиллагааг функционал компонентод хангах үүднээс hook бий болсон. Хукууд бол компонентод ашиглаж болох React сангийн бие даасан функцууд юм.
hook -уудийг шинэ төсөл үүсгэн судлая. Төслийг хэрхэн үүсгэхийг react програм үүсгэх хичээлээс үзээрэй.
Төслөө үүсгээд ашиглахгүй файлуудыг устган

цэвэрлэгээ хийгээрэй. Төслийн хэвжүүлэлтийг bootstrap -аар хийе. Үүний тулд index.html файлд

bootstrap -ийн CDN холбоосыг оруулан өгөөрэй. App компонентод төслийн ажиллагааг шалгах зорилготой div  -ийг оруулсан байгаа. Төслийн компиляцийг хийвэл

гэж харагдана. Төслөө үүсгэн бэлтгэсэн тул дараагийн хичээлээс хукуудийн судалгааг хийх болно.

Жич: React 16.8 хувилбараас хойш Component классаас удамшсан компонентийг үүсгэж болохгүй гэж ойлгож болохгүй. Урьдын адилаар Component классаас удамшуулан компонентийг үүсгэн ашиглаж болох ч функционал компонентийн код илүү энгийн, өргөтгөх боломж, ажиллагааны оновчтой байдлыг ашиглахын тулд функционал компонент, хукуудийн талаар мэдэн тэдгээрийг ашиглаж сурсан байх хэрэгтэй.

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

Холбоотой материалууд
Node -ийг суулгах

  Нээгдсэн тоо: 1560 Нийтийн

Сүүлийн жилүүдэд нэг хуудас буюу SPA програмын боловсруулалтад өргөнөөр ашиглах болсон Angular, React, Vue гэх мэт дэвшилтэд фреймвокүүдийн суулгах ажиллагаанд ямар нэгэн скриптүүд ашиглахгүй бүх ажлыг пакетын менежерээр /npm/ суулгадаг болсон.

CSS классуудтай ажиллах

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

Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн хөгжлөөс хоцрохгүй байх үүднээс VueJs фреймворкийн хичээлүүдийг нийтэлж байгаа билээ. Энэ удаад VueJs -ийг ашиглан програмаа хэрхэн хэвжүүлэхийг доорх энгийн кодоор

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                }
            })
        </script>
    </body>
</html>

судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл

v-show ба v-if директивүүд

  Нээгдсэн тоо: 879 Нийтийн

Хэрэглэгч талын хуудасны элементүүдийг удирдах бас нэгэн арга бол v-if директивийг ашиглах юм. Хуудас дахь элементүүдийг удирдах ажиллагааг хөнгөн эвтэйхэн хийдэг нь раектив фреймворкуудын нэг давуу тал бөгөөд хичээлээр v-if директивийн ажиллагааны онцлогийг

    <body>
        <div id="app">
            <h1 v-if="isVisible">Гарчиг 1</h1>
            <h2 v-else style="color: red">Гарчиг 2</h2>
            <hr>
            <button @click="isVisible = !isVisible">Сэлгэгч</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isVisible: true
                }
            })
        </script>        
    </body>

кодоор авч үзье. Код хэрхэн ажиллахыг мэдэх тул тайлбар хэрэггүй.

Транформац /өөрчлөлт/ хийх операторууд

  Нээгдсэн тоо: 1609 Нийтийн

Энэ хичээлээс RxJs санг өгөгдөлтэй ажиллах ажиллагааг маш эвтэйхэн болгосон операторуудын талаар авч үзэж эхлэнэ. Өмнөх хичээлүүдэд бид төрөл бүрийн промис, массив, мөр, тоо, үйл явц гэх мэтийн өгөгдлүүдээс Observable /ажиглагч/ классын хувиудыг хэрхэн үүсгэхийг үзэцгээсэн. Энэ хичээлээс өмнөх хичээлүүдэд сурч авсан мэдлэгтээ суурилан RxJs санг ашиглан төрөл бүрийн өгөгдлүүдийг яаж удирдан, өөрчлөх операторуудтай танилцах болно. Энэ хичээлд map, pluck гэдэг хоёр сонирхолтой операторыг үзнэ.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

Кубын ирмэг a. Дээд талын төвийг суурийн оройтой холбоход үүсэх пирамидийн бүтэн гадаргуун талбайг ол.

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

 
Бодлого 4.041

A=(-2; 3; 5), B=(4; -1; 7) векторууд өгөгджээ. 3A-2B векторын координатуудын нийлбэрийг ол.

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

 
Бодлого 8.141

Утасны лавлах номыг дэлгэн 7 цифрээс бүрдсэн дугаарыг санамсаргүйгээр байдлаар сонгоход дугаарын сүүлийн дөрвөн цифрүүд ижил байх хувилбарын тоог ол.

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195