React дээрх үгсийн тайлбар

Дан нүүр бүхий аппликейшн

Дан нүүр бүхий аппликейшн гэдэг нь нэг HTML хуудас, аппликейшныг ажиллуулахад хэрэгтэй JavaScript, CSS гэх мэт зүйлсийг л ачаалдаг аппликейшныг хэлнэ. Тухайн хуудас эсвэл дараагийн хуудсанд хандан үйлдэл хийхэд сервертэй харьцах шаардлагагүй ба тухайн нүүр дахин ачаалахгүй гэсэн үг юм.

Та React дээр дан нүүр бүхий аппликейшн хийж болох ч заавал тэгж хийх гээд байх хэрэггүй. Та мөн бэлэн байгаа вэбсайтыг нэмэлт харилцан үйлдэл хийдэг болгон сайжруулахаар React-ыг ашиглаж болно. React-т бичигдсэн код нь PHP эсвэл хэрэглэгч талын сангаар сервер дээр рендэр хийгдсэн тэмдэглэгээтэй зөрчилдөхгүй. Facebook-т React-ыг ингэж ашигладаг.

ES6, ES2015, ES2016, etc

Эдгээр нэршил нь Javascript хэлд хамаарах ECMAScript Хэлний Тодорхойлолтын стандартын хамгийн сүүлийн үеийн хувилбарууд юм. ES6 хувилбар (ES2015 гэж бас нэрлэдэг)-т суман функцууд, классууд, template literals, let болон const statements гэх мэт өмнөх хувилбаруудын нэмэлтүүд багтсан. Та аливаа нэг хувилбарын талаар дэлгэрэнгүй унших бол энд дарна уу.

Хөрвүүлэгч

Javascript хөрвүүлэгч нь JavaScript кодыг хувирган өөр формат бүхий Javascript код болгон буцаадаг. Түгээмэл ашигладаг нэг хэлбэр нь ES6 синтаксийг хуучин хөтөч хүлээн авч ажиллуулж болох синтакс руу хувиргах юм. React-тай түгээмэл ашигладаг хөрвүүлэгч нь Babel юм.

Багцлагч (Bundlers)

Багцлагч нь тусдаа өөр модуль дээр бичигдсэн (олон зуу бий) JavaScript, CSS кодыг нэгтгэн олон хөтөч дээр илүү оновчтой ажиллах, цөөн файл болгон нэгтгэдэг. React аппликейшн дээр түгээмэл ашиглагддаг багцлагч нь Webpack болон Browserify.

Пакэж удирдлага

Пакэж удирдлага нь таныг төслийнхөө dependencies-ыг зохицуулахад тусалдаг хэрэгсэл юм. npm, Yarn хоёр нь React аппликейшнд түгээмэл ашиглагддаг пакэж менежер. Хоёулаа ижилхэн npm пакэж бүртгэлд хамаарна.

CDN

CDN гэдэг нь Content Delivery Network гэсэн үгний товчлол. CDN нь дэлхий даяарх серверийн сүлжээнээс cache хийсэн, статик контентыг хүргэнэ.

JSX

JSX нь JavaScript-ын синтаксын өргөтгөл юм. Template хэлтэй төстэй. Гэхдээ JavaScript-ын бүрэн ажиллагаатай. JSX нь React.createElement() дуудлагад хөрвүүлэгддэг ба “React elements” гэх цулгуй Javascript объектыг буцаадаг. JSX-ын талаар анхан шатны мэдээлэл авахыг хүсвэл үүнийг уншина уу. Илүү ахисан шатны зааврыг эндээс харна уу.

React DOM нь HTML атрибутын нэрний оронд camelCase хэлбэрээр нэр бичдэг. Жишээ нь tabindex нь JSX дээр tabIndex болно гэсэн үг. class нь className болж бичигдэнэ. Яагаад гэвэл JavaScript дээр class гэдэг үг байдаг:

<h1 className="hello">My name is Clementine!</h1>

Элемент

React элемент нь React аппликейшныг бүтээдэг. Олны мэдэх “Components” гэх зүйлтэй элементийг хүмүүс андуурах нь бий. Дэлгэц дээр юу харуулахыг хүсэж байгааг элемент шийддэг. React элемент нь хэзээ ч өөрчлөгддөггүй.

const element = <h1>Hello, world</h1>;

Элэментийг шууд ашиглахаас илүү компонентоор дамжуулан хэрэглэдэг.

Компонент

React компонентууд нь дахин ашиглагдах жижиг хэсэг код бөгөөд дэлгэц рүү рендэр хийх React элементийг буцаадаг. React компонентийн энгийн хувилбар нь React элемент буцаах энгийн Javascript функц юм.

React компонентууд нь дахин ашиглагдах жижиг хэсэг код бөгөөд дэлгэц рүү дүрслэгдэх React элементийг буцаадаг. React компонентийн энгийн хувилбар нь React элемент буцаах энгийн жаваскрит функц юм:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Компонентууд нь ES6 класс байж болно:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Компонент нь өөр өөрийн гэсэн ажиллагаатай байх ба бусад компонент дотроо ажилладаг байж болно. Компонент нь бусад компонент, массив, стринг, тоог буцаадаг. Хэрэв хэрэглэгчийн интерфэйсийн чинь зарим нь (Button, Panel, Avatar) дахин ашиглагддаг эсвэл бие даасан байх нь илүү дээр (App, FeedStory, Comment) бол дахин ашиглах компонент байхаар анхнаасаа хийсэн нь дээр. Компонентын нэр нь дандаа том үсгээр эхэлсэн байх хэрэгтэй (<wrapper/> биг <Wrapper/>). Компонент рендэр хийх тухай дэлгэрэнгүйг эндээс харна уу.

props

props нь React компонентод оруулах утга юм. Эцэг компонентоос хүү компонент руу дамжуулдаг өгөгдөл юм.

props нь зөвхөн унших л зориулалттай ба өөрчлөлт хийж болохгүй:

// Wrong!
props.number = 42;

Хэрэв та хэрэглэгчийн оруулсан утга эсвэл сүлжээний хариу үйлдлээс хамааран зарим утгыг өөрчлөх хэрэгтэй бол state-ыг ашиглаарай.

props.children

props.children-ыг бүх компонентод ашиглаж болно. Аливаа нэг компонентын нээх, хаах таг хоёрын хооронд байх компонентыг агуулдаг. Жишээ нь:

<Welcome>Hello world!</Welcome>

Hello world! гэсэн стринг нь Welcome компонентын props.children дотор байна:

function Welcome(props) {
  return <p>{props.children}</p>;
}

Класс гэж тодорхойлогдох компонентуудад this.props.children ашиглаарай:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

Төлөв

Өөрчлөлт оруулах шаардлагатай бол компонентод state ашиглах хэрэгтэй. Жишээ нь Checkbox гэсэн компонентийн хувьд төлөв нь isChecked гэж байх хэрэгтэй ба NewsFeed компонент төлөвийнхөө fetchedPosts гэдэгт ямар өөрчлөлт орж буйг мэдэх хэрэгтэй.

state, props хоёрын хамгийн гол ялгаа нь гэвэл props нь эцэг компонентоос удамшдаг бол state нь тухайн компонентоос өөрөөс нь хамаардаг. Компонент өөрийнхөө props-ыг өөрчилж чадахгүй ч state-ээ өөрчилж чадна.

Өөрчлөлт орох өгөгдөл бүрт зориулсан төлөвөө “удирддаг” нэг компонент байх хэрэгтэй. Хоёр өөр компонентын төлвийг нэгэн зэрэг өөрчлөгддөг байхаар хийх гээд хэрэггүй. Оронд нь хамгийн ойрын эцгээс нь өргөн авч пропсоор хоёуланд нь дамжуулдаг байхаар хийх хэрэгтэй.

Амьдралын мөчлөг

Амьдралын мөчлөг метод нь компонентын өөр өөр үед ажилладаг тусгай тохиргоо бүхий функц юм. Компонент үүсээд, DOM руу орох үед (mounting) компонент шинэчлэгдэх, компонент unmounted болох эсвэл DOM-оос устгагдах үед ашиглагдах методууд гэж байдаг.

Controlled vs. Uncontrolled Components

Формд оруулах утгыг зохицуулах хоёр төрлийн арга React-д байдаг.

Утгыг нь React контрол хийдэг элементийг controlled component гэдэг. Хэрэглэгч controlled component-д өгөгдөл оруулах үед тухайн үйлдлийг зохицуулах функц ажиллах ба оруулсан өгөгдөл нь хүчинтэй эсэхийг таны бичсэн код шийднэ (шинэчилж оруулсан утгыг дахин рендэр хийж). Хэрэв дахин рендэр хийхгүй бол утга оруулах форм элемент нь өөрчлөгдөхгүй хэвээр байгаад л байна.

uncontrolled component нь React-ын гадна форм элемент ажиллаж байгаатай адил. Хэрэглэгч өгөгдөл оруулах форм талбарт (input box, dropdown г.м) шинэчилсэн мэдээлэл оруулахад React-аас ямар ч үйлдэл хийхийг шаардахгүй. Заавал ямар нэг утга оруулах ёстой гэж албадаж болохгүй гэсэн үг юм.

Инэнх тохиолдолд та controlled component ашиглах нь зүйтэй.

Keys

“key” гэдэг нь та элементийн массив үүсгэх үедээ оруулах хэрэгтэй стринг атрибут юм. Keys нь юу өөрчлөгдсөн, юу нэмэгдсэн, юу устгасан болохыг танихад React-т тусалдаг. Элементийг танихад туслах зорилгоор массивын дотор элементэд keys байх хэрэгтэй.

Нэг массив байх хамарал бүхий элементүүдийн хувьд key-нүүд нь өөр өөр байх хэрэгтэй. Харин заавал бүхэл аппликейшн эсвэл нэг компонент доторх бүх key-нүүд өөр байх ёстой гэсэн юм байхгүй.

Math.random() гэх мэтийг keys рүү дамжуулж болохгүй. Key-нүүд нь дахин рендэр хийх бүрт “тогтмол танигдаж” байх учиртай. Тэгэж байж React юу нэмэгдсэн, устсан, дахин order хийсэн болохыг таньж чадна. post.id гэх мэт таны өгөгдлөөс ирэх онцгой, тогтвортой нэг таних мэдээллээс хамааран хариу үйлдэл хийдэг байх учиртай.

Refs

Ямар ч компонентод оруулж болох онцгой атрибутыг React дэмждэг. ref атрибут нь React.createRef() function-ын үүсгэсэн нэг объект байж болно. Эсвэл callback функц, стринг байх боломжтой (legacy API).Ref атрибут нь callback функц байгаа үед тухайн функц нь аргумент болгон суурь DOM элемент эсвэл класс instance-ыг хүлээн авдаг (элементийн төрлөөс хамааран). Ингэснээр та DOM элемент эсвэл компонентын instance руу шууд хандах боломжтой болно.

Refs-ыг аль болох цөөн ашиглах хэрэгтэй. Хэрэв та аппдаа “заавал” refs ашиглахыг хүсээд байгаа бол top-down data flow гэсэнтэй танилцаарай.

Эвент

React элемент ашиглан эвент үйлдлийг зохицуулахад бичлэгийн хувьд бага зэрэг ялгаа бий:

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

Тохируулга

Компонентын пропс эсвэл төлөв өөрчлөгдөх үед React нь шинэ элементийг өмнөх рендэр хийсэнтэй харьцуулан DOM-ыг шинэчлэх хэрэгтэй эсэхийг шийддэг. Өөр байх юм бол React нь DOM-ыг шинэчилдэг. Уг процессыг “reconciliation” буюу тохируулга гэж нэрлэдэг.