Өөрчлөлтийн амьдралын цикл

Төслийн 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

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

Материалыг бүртгэлтэй хэрэглэгч үзнэ.

how_to_regБүртгүүлэх

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

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

Ердийн өгөгдлүүдээс стримийг үүсгэх, төрөл бүрийн стримийг амархан үүсгэх боломжуудыг олгодог зарим туслах функцуудын талаар энэ хичээлд авч үзье.

of арга.

Функцийн боломжийг судлахын тулд index.js файлд доорх кодыг оруулан өгье.

Rx.Observable.of(5)
    .subscribe(
        (x) => console.log('Next :', x),
        (err) => console.log('Error :', err),
        () => console.log('Completed')
    );

Дээрх код бидний өмнөх хичээлд үзсэнтэй төстэй боловч энэ удаа Observable классын of аргаар 5 гэсэн тооноос стрим үүсгэж байгаа. Кодын ажиллагааг шалгахын тулд index.html файлыг хөтөч дээр нээгээд консолын цонхыг харвал

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

Сүүлийн жилүүдэд нэг хуудас буюу SPA програмын боловсруулалтад өргөнөөр ашиглах болсон Angular, React, Vue гэх мэт дэвшилтэд фреймвокүүдийн суулгах ажиллагаанд ямар нэгэн скриптүүд ашиглахгүй бүх ажлыг пакетын менежерээр /npm/ суулгадаг болсон.

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

ES6 -д өгөгдлүүдийг олонлог байдлаар хадгалан тэдгээртэй ажиллах Set , WeakSet обьектууд бий болсон. Хичээлээр энэхүү шинэчлэлүүдийн тухай үзье.

Set обьект

Set өөртөө төрөл бүрийн утгуудыг агуулан тэдгээртэй ажиллагааг хөнгөн болгох массив төрлийн тусгай бүтэц буюу обьект юм. Гэхдээ Set -д зөвхөн давтагдахгүй утгуудыг хадгалж болдог. Ингээд Set гэж юу болох түүнтэй хэрхэн ажиллахыг дараах

let set = new Set();
set.add(10);
set.add('Hello');
set.add({});

console.log(set);
console.log(set.size);

энгийн жишээгээр харцгаая.

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

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

функцийн уламжлалыг тооц.

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

 

утгыг ол.

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

 

prob04_103_01 ба prob04_103_02 векторууд перпендикуляр бол y -ийн утгыг ол.

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