useState

React аппликашний төлөвтэй ажиллахад зориулагдсан UseState хукийн ажиллагааг

import React from 'react'

function App() {
  return (
      <div className="container">
        <h1>Тоолуур</h1>
        <button className="btn btn-success mx-3">Нэмэх</button>
        <button className="btn btn-danger">Хасах</button>
      </div>
  );
}

export default App;

кодоор судлая. Туршилтын төслийг React хук хичээлд үүсгэсэнг сануулъя. Дээрх код бол харагдах байдлыг л тодорхойлж байгаа. Харин тоолууртай ажиллахын тулд төлвийг UseState хукийг ашиглан оруулан ирье.

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

request_quoteТусгай эрх авах

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

Холбоотой материалууд
Промисээс стрим үүсгэх

  Нээгдсэн тоо: 896 Бүртгүүлэх

Энэ хичээлд стримийг үүсгэж болдог RxJs сангийн Promise /промис/ бүтцийн талаар авч үзье. Promise үгийн орчуулгыг мэдэхгүй тул промис гээд явах нь илүү. Промис JavaScript -ын ES6 хувилбарт бий болсон асинхрон кодтой ажиллахад их эвтэйхэн бүтэц юм. RxJs нь JavaScript -ын хэрэгслүүдийг илүү сайжруулсан сан тул бид програмдаа промисоос стримийг үүсгэх боломжтой. Промисын талаарх мэдлэгээ сэргээхийн тулд index.js файлд бидэнд ямар нэгэн промис үүсгэн өгөх

function delay(ms = 1000) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, ms);
    });
}
Angular фреймворк

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

Сүүлийн жилүүдэд Angular, React, Vue гэх мэт Javascript сангуудын хөгжлөөр интернет програмчлалд динамик ажиллагаагтай сайт боловсруулах шинэ давалгаа үүссэн. Энэ нийтлэлээр Angular гэж юу вэ, юунд хэрэгтэй, ямар асуудлыг шийдэхэд бидэнд туслахыг тодруулъя. Angular бол Google компани боловсруулсан нээлттэй эх код бүхий JavaScript сан буюу фреймворк. Angular фреймворкийг ашиглан Single page application / нэг хуудас програм/ гэж нэрлэдэг динамик програмыг бүтээдэг. Энгийнээр хэлбэл Single page application гэдэг нь интернет дэх ердийн сайт боловч сайт ердөө нэг л хуудсаас бүрдэнэ. Энэ бол техникийн талаасаа ойлголт. Single page application хэрхэн ажилладаг, ердийн сайтуудаас ямар давуу талтайг Angular -ын албан ёсны веб сайтаас https://angular.io харж болно.

Өөрийн директив үүсгэх

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

Өмнөх хичээлүүдийн кодод директивүүдийг ашиглаж байсан ч тэдгээрийг Vue фреймворкийн тодорхой хэрэгсэл байдлаар ойлгон хэрэглэж ирсэн. Одоо директивүүдийн талаар дэлгэрүүлэн судлаж ойлголтоо гүнзгийрүүлэх цаг болсон. Директив гэдэг нь html шаблоны дотор ашиглан хуудасны элементүүдтэй харьцан ажиллах боломжийг өгдөг тусгай атрибут юм. Өмнөх хичээлүүдэд бид v-on, v-bind гэх мэтийн директивүүдийг их олон ашигласан. Энэ хичээлээр бид өөрсдийн директивийг үүсгэн ашиглаж сурцгаах болно. Хичээлд ашиглах төсөл доорх код бүхий

<template>
  <div>
      <h2>{{ title }}</h2>  
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }
}
</script>

<style scoped>

</style>

нэг App.vue компонентоос бүрдэнэ.

Интерсептор

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

Хичээлээр vue-resource сангийн интерсептор гэдэг сонирхолтой боломжийн тухай үзье. vue-resource сангийн github дээрх хаягаар хандан сан серверт илгээсэн хүсэлт, хариултад интерсепторийг хэрхэн дэмждэг талаар дэлгэрүүлэн үзэж болно.

Интерсепторийг идэвхижүүлбэл өөрөөр хэлбэл интерсептор функцуудыг нэмвэл серверт илгээгдэж буй хүсэлт, серверээс ирсэн хариу бүрийг барих боломж нээгдэнэ.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

илэрхийллийг хялбарчил.

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

 
Бодлого 2.116

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

 
Бодлого 8.122

Задаргааны сүүлээсээ 3 дахь гишүүний бином коэффициент 45 бол задаргааны 6-р гишүүнийг ол.

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

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