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Тусгай эрх авах

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

Холбоотой материалууд
Функцийг параметр байдлаар дамжуулах

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

Хичээлээр компонент хоорондын харилцан ажиллагааны бас нэгэн аргыг авч үзье. Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлд бид хүүхэд компонентод үйл явц үүсгээд түүнийг эцэг компонентод сонсохыг сурсан. Өөрөөр хэлбэл эцэг компонентод тодорхойлогдсон талбарын утгыг хүүхэд компонентоос өөрчилсөн. Үүнийг хийх бас нэгэн арга бий. Жишээ нь App компонентод

<script>
import Car from './components/Car.vue'

export default {
  data () {
    return {
      carName: 'Toyota',
      carYear: 2018
    }
  },
  methods: {
    changeCarName() {
      this.carName = 'Benz'
    }
  },
  components: {
    appCar: Car
  }
}
</script>
CSS оруулах

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

Компонентод Inline хэвжүүлэлт хийх нь javascript кодтой холилдон тийм аятайхан бус санагдаж байж болох. Кодлогчид css хэвжүүлэлтийг тусдаа файлд гаргаад хэрэгтэй файлдаа татан оруулан ашиглахыг ихэнхдээ илүүд үздэг. React -д хэвжүүлэлтийг тусдаа гарган ашиглах боломжтой бөгөөд үүний талаар хичээлд авч үзье.

Өөрчлөлтийг watch -аар судлах

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

Хэрэглэгч талын хуудасны боловсруулалтад javascript дэвшилтэд буюу реактив фреймворкуудыг ашиглах нь улам өргөн болж байгаа тул ойрын жилүүдэд энэ чиглэлийн програм зохиогчдын эрэлт өндөр болох нь гарцаагүй. Иймээс програмчлалын мэрэгжлээр суралцаж байгаа болоод ажиллаж буй залуучууд Angular, React, Vue зэрэг фреймворкуудын ажиллагааг судлан суралцахыг зөвлөе. Фреймворкуудийн ажиллагаанууд өөр өөрийн онцлогтой хэдий ч ерөнхий зарчим бараг ижил тул аль нэгийг нь сурсан байхад бусдыг нь амархан сурна. VueJs -ийн бусдаасаа ялгарах онцлог гэвэл суурь пакет жижигхэн, суралцахад хөнгөнд оршино. Энэ нь фреймворкийн функционал муу гэсэн үг биш гэдгийг сануулъя.VueJs -ээр хамгийн өндөр шаардлага тавьдаг хэрэглэгчийн хэрэгцээг ч хангах програмыг төвөггүй боловсруулж чадна.

API контекст

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

react 16 хувилбараас бий болсон програмийн компонентуудийн шатлалыг багахан хураангуйлах боломжийн талаар авч үзье. Тухайлбал компонент хооронд ашиглаж боломжтой глобал төлвүүдийг үүсгэдэг context гэсэн ухагдхуун юм. Үүнийг дараах энгийн жишээгээр харцгаая. Төсөлд

import React from "react";

const Counter2 = (props) => {
  return (
    <div
      style={{
        border: "1px solid #ccc",
        width: 250,
        margin: "0 auto",
      }}
    >
      <h3>Counter 2</h3>
      <p>Clicked</p>
    </div>
  );
};

export default Counter2;

код бүхий Counter2 шинэ компонентийг нэмье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

Хоёр тойрог гадна талаараа шүргэлцсэн. Нэг тойргийн шүргэгч нь нөгөө тойргийнхоо төвийг дайран гарсан. Шүргэлтийн цэгээс хоёрдахь тойргийн төв хүртэлх зай нь энэ тойргийн радиусаас 3 дахин урт. Нэгдүгээр тойргийн урт хоёрдугаар тойргийн уртаас хэд дахин их вэ?

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

 
Бодлого 3.058

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

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

 
Бодлого 2.140

бол илэрхийллийн утгыг ол.

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

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