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

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

Холбоотой материалууд
useRef

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

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

Хувьсагчид

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

ES6 хувилбарт бий болсон шинэ боломжуудыг судлах бэлтгэлийг Орчны тохиргоо хичээлээр үзсэн. Энэ хичээлээс ES6 хувилбарын шинэ боломжуудын талаар авч үзэж эхлэх ба хамгийн энгийн нь болох хувьсагчдад бий болсон шинэчлэлээс эхлэе.

const түлхүүр үг.

Javascript -ийн өмнөх хувилбаруудад хувьсагчийг var түлхүүр үгээр

var q = 1;
q = 2;
q = 'w';

үүсгээд цааш утгыг q = 2;, төрлийг q = 'w'; өөрчлөхөд ямар нэгэн асуудал үүсдэггүй. Гэвч Javascript -д утгыг нь солих боломжгүй тогтмол утга байдаггүй байсныг const түлхүүр үгээр зарлах боломжийг EcmaScript 6 -д бидэнд олгосон. Хэрвээ const түлхүүр үгээр

const MY_CONST = 1;
MY_CONST = 2;

MY_CONST тогтмолыг зарлаад дараа нь түүний утгыг өөрчлөх гэвэл webstorm тогтмолд утга олгох оролдлого хийлээ гэсэн алдааг заана. index.js файлын компиляцийг хийх гээд үзье.

Обьектууд

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

ES6 -д обьектод ямар өөрчлөлтүүд орсонг хичээлд үзэх болно. Кодод

const name = 'e-surgalt.com';
const age = 30;

хувьсагчид байгаад эдгээрийг хувьсагчийн нэртэй ижилхэн обьектын талбарт олгоё гэвэл ES5 -д

const obj = {
    name: name,
    age: age
};

гэж бичдэг. Одоо обьектыг консолд

console.log(obj);

гэж харуулъя.

API контекст

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

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/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 6.052

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

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

 
Бодлого 3.134

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

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

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

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