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

class Car extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    console.log('Car shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentDidUpdate() {
    console.log('Car componentDidUpdate')
  }

  render() {
    console.log('Car render')
    const inputClasses = [styles.input]

    ...

    return (
      <div className={styles.Car} style={style}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>Он: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
      </div>
    )
  }
}

export default Car

гэж өөрчилье.

ES6 -д бий болсон модулийн системийн дүрмийн талаар үзэхийн өмнө зарим бэлтгэл ажлыг хийх хэрэгтэй. Төслийн үндсэн хавтаст extra.js файлыг үүсгээд дараах кодыг

let name = 'e-surgalt.com';
let age = 6;

оруулан өгье. extra.js файлд зарлагдсан хоёр хувьсагчийг index.js файлд оруулан ирэх хэрэг гарлаа гэе. Энд хоёр нөхцлийг хангана. Нэгд бусад модулууд extra.js файлд зарлагдсан хувьсагчдыг өөртөө ашиглах боломжийг нээх зорилгоор түүнийг гадагш экспортлох ёстой. Хоёрт бусад модулаас эскпорт хийгдсэн зүйлийг ашиглах модул нь импортлох хэрэгтэй.

JavaScript-ийн өгөгдлийн төрлүүд

Хувьсагч гэдэг нь компьютерын санах ойд хадгалагдаж байгаа тодорхой утгыг заах нэр юм. JavaScript –д зарлаж байгаа хувьсагчийн төрлийг урьдчилан заах хэрэггүй хэл хувьсагчийн төрлийг өөрөө тодорхойлдог. Бүхэл болон бутархай тоонуудад илт ялгагдах ялгаа бараг байхгүй. JavaScript доорх төрлүүдийг таньдаг.

Хичээлээр компонентод ирж буй параметрүүд зөв эсэх, ийм шалгалтыг хийх ямар ач холбогдолтой талаар үзье. Компонентод параметр дамжуулах хичээлд App компонентоос carName, carYear талбаруудыг Car компонентод параметрээр дамжуулан авч үзүүлсэн. Тэгвэл Car компонент ирсэн параметрүүд дээр ямар нэгэн нэмэлт үйлдлийг жишээ нь машины нэрийг тонгоруулан

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
  </div>
</template>

<script>
  export default {
    props: ['carName', 'carYear'],
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

харуулдаг гэж үзье.