Компонентийн төлвийн өөрчлөлтийг хийх setState арга ансинхрон ажиллагаатай тул төлвийн өөрчлөлтийг зөв хийж сурах хэрэгтэй. Үүнийг Фрагмент хичээлд үүсгэсэн

import React, { Component } from 'react'

export default class Counter extends Component {
  state = {
    counter: 0
  }
  addCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  render() {
    return (
      <div>
        <h2>Тоолуур {this.state.counter}</h2>
        <button onClick={this.addCounter}>+</button>
        <button onClick={() => this.setState({ counter: this.state.counter - 1 })}>-</button>
      </div>
    )
  }
}

Counter компонентийн жишээн дээр авч үзье.

Өмнөх хичээлүүдэд бид react -ийг нилээд сайн судлан энгийн төслийг үүсгэн ажлуулж сурсан. Одоо react компонентуудийн талаар цааш гүнзгийрүүлэн судлах цаг болсон. Хичээлээр Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод параметр дамжуулахыг авч үзье. Үүнийг төслийн App компонент дээр харцгаая. App компонентийг index.js файлд

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM сангийн render аргаар DOM -д оруулан өгч байгаа.

Компонентууд хоорондоо холбогдон ажиллах шаардлага гарах нь мэдээж. Иймд хичээлээр компонентууд хоорондоо хэрхэн холбогдохыг авч үзье. Компонентыг Vue-д бүртгэх хичээлийн жишээнд App, Car хоёр компонентийг үүсгээд App компонентод Car компонентийг бүртгээд түүний темплейтийн суурь div дотор Car компонентийг оруулан ирсэн. Програмыг ажлуулбал

үр дүнг үзүүлж байгаа.

Та сайт боловсруулж байсан бол хэрэглэгч талын хуудаст javascript -ийг ашиглахгүйгээр олигтой үр дүнд хүрэхгүй гэдгийг ойлгосон байх. Сүүлийн жилүүдэд интернетэд сууриласан програмууд хэрэглэгч талын хуудасны бие даан ажиллах боломжид ихээхэн анхаарах болсон. Учир нь програмуудын хийж гүйцэтгэх ажлууд их болох тусам бүгдийг сервер тал хариуцах нь нилээд төвөгтэй болон ирдэг. Үүний зэрэгцээ хэрэглэгч талын компьютерийн хүчин чадал ихээхэн дээшилсэн нь зарим нэгэн ажиллагаануудыг хэрэглэгч талд хийх нь илүү үр ашигтай болсон. Иймээс л javascript хэлийг програм зохиогчдын заавал эзэмшсэн байх хэлүүдэд оруулаад байгаа хэрэг. ES6 -д бий болсон Set төстэй бас нэгэн бүтэц бол Map обьект юм. Set бүтэц массивтай төстэй бол харин Map бүтэц обьект хэлбэрийн. Map бүтцийг

let map = new Map();

map.set('name', 'e-surgalt');
map.set('age', 20);

console.log(map);

жишээн дээр судлая. map -ийг Map обьектын хувь байдлаар үүсгээд түүний set аргаар name, age талбаруудыг үүсгэн утга олгоод map -ийг консолд үзүүлбэл