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Бүртгүүлэх

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

Холбоотой материалууд
Rest, Spread операторууд

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

Хичээлээр 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 -ийг хөтөч дээр нээн консолын цонхыг харвал

Шалгалтын алдааг үзүүлэх

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

Формийн шалгалтын ажиллагаануудтай үргэлжлүүлэн танилцая. Валидаторийг тохируулах хичээлийн жишээнд $v обьектод байгаа email түлхүүртэй обьектийг дэлгэц дээр харуулан цахим шуудангийн хаягийн талбарт оруулж буй өгөгдлүүд шалгагчийн төлөвт хэрхэн нөлөөлж байгааг ажигласан. Бодит жишээнд {{ $v.email }} бүтцийг ашиглаад байх нь тохиромжгүй тул түүнийг шаблоны кодоос

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
        <label for="email">Email</label>
        <input 
          type="email" 
          id="email" 
          class="form-control"
          @blur="$v.email.$touch()"
          v-model="email"
        >
      </div>
    </form>
  </div>
</template>

хасаад хуудсаа хөтөч дээр нээвэл

ердийн формийг үзүүлнэ.

Үйл явц нэмэх

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

Төлөв үүсгэх хичээлд App компонентийн бүх төлвүүдийг нэг дор state обьектод багцалсан. react -ийн төлвүүдтэй хэрхэн ажиллахыг харахын тулд App компонентод товч оруулаад түүн дээр дарахад h1 гарчигаар үзүүлэх текстийг солигдох ажиллагааг оруулъя. Үүний тулд App компонентийн кодод h1 гарчигийн доор

        <h1>
          {this.state.pageTitle}
        </h1>
        <button>Гарчиг өөрчлөх</button>
        <Car name={cars[0].name} year={cars[0].year} />

button тегээр Гарчиг өөрчлөх нэртэй товчийг нэмэн оруулаад хуудсаа харвал

String обьект

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

Обьектыг үүсгэх

String обьект нь энгийн тэмдэгтийн төрөлд харгалзах хэлний дотоод обьект юм. Обьект мөрийг шалгах, хэсгийг таслан авах, том жижиг үсгэнд шилжүүлэх гээд олон тооны аргуудтай. Энэ хичээлээр бид String обьектын ихээр хэрэглэдэг аргуудын талаар авч үзэх болно. String() конструктур нь анхны утгыг заан өгөх заавал байх шаардлагагүй параметртэй. Обьектыг үүсгэх жишээнүүд

var s = new String();
var head1 = new String("JavaScript хичээлүүд");

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 6.052

Арифметик прогресын 3-р гишүүн 5, 7-р гишүүн 13 бол эхний 10 гишүүний нийлбэрийг ол.

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

 
Бодлого 3.134

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

Жич: Тэгшитгэлийг заавал бодох гээд үзээрэй. Иймэрхүү бодлого ЭЕШ -д бараг ирэхгүй ч математикийг ганцхан ЭЕШ -аар хязгаарлавал та өөрийгөө хөгжүүлэхээ боомилсонтой адил.

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

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