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 классаас удамшуулан компонентийг үүсгэн ашиглаж болох ч функционал компонентийн код илүү энгийн, өргөтгөх боломж, ажиллагааны оновчтой байдлыг ашиглахын тулд функционал компонент, хукуудийн талаар мэдэн тэдгээрийг ашиглаж сурсан байх хэрэгтэй.

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

Холбоотой материалууд
Директивийн тэмдэглэгээ

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

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

    <body>
        <div id="app">
            <h2>
                <a v-bind:href="url">E-surgalt</a>
            </h2>
            <h2>
                Тоолуур = {{ counter }}
            </h2>

            <button v-on:click="counter++">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:',
                    counter: 0
                }
            })
        </script>
    </body>
Функц ба хувьсагч

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

Функцын тухай ойлголт

Функц – гэдэг нь программын дурын хэсгээс дуудан ажлуулах боломжтой Javascript кодын хэсэг. Функцыг ашиглахын тулд түүнийг эхлээд тодорхойлох хэрэгтэй. Функц давтагдахгүй нэртэй байх ёстой. Нэр өгөх дүрэм нь хувьсагчийн нэрийг өгөх дүрэмтэй ижилхэн. Функцыг тодорхойлох бичлэг нь ерөнхийдээ доорх хэлбэртэй байна.

function <функцын нэр> ([<параметрүүдийн жагсаалт>])
{
     JavaScript оператор;
     JavaScript оператор;
     . . .
     JavaScript оператор;

     [return <Буцаах утга>]
}

Vuex -ийг суулгах

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

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs дээр төрөл бүрийн өгөгдлүүдтэй хэрхэн үр дүнтэй харьцах аргуудыг судлаж эхлэнэ. Үүнийг бид маш энгийн

жишээгээр үзнэ.

Rest, Spread операторууд

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

Хичээлээр ES6 -д бий болсон Rest, Spread операторуудын талаар авч үзэх юм. Операторуудын ажиллагааг судлахын тулд эхлээд зарим нэгэн бэлтгэл ажлыг хийх хэрэгтэй. num, str хоёр параметрийг аваад тэдгээрийг консолд үзүүлэх logStrings функцийг үүсгээд түүнийг дуудсан дараах кодыг авч үзье.

function logStrings(num, str) {
    console.log(num, str);
}

logStrings(20, 'e-surgalt.com');

webstorm -ийн терминалаас webpack -ийг ажлуулан bundle.js файлыг үүсгээд index.html -ийг хөтөч дээр нээн консолын цонхыг харвал

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 4.034

B(5;3) цэгт төгсгөлтэй AB вектор (3;1) гэсэн кординаттай бол A цэгийн абцисс, ординатын нийлбэрийг ол.

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

 
Бодлого 14.084

prob14_84_01 функцийн хязгаарыг ол.

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

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