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

Төслийн 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Бүртгүүлэх

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

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

Хичээлүүдийг үзэхэд таньд текст засварлагч Notepad ++ тэгээд интернет хөтөч байхад л хангалттай.  Хичээлийн бүх жишээг өөрөө бичин туршин үзээрэй.

JavaScript-ийн бичлэгийн дүрэм

JavaScript –ийг үзэж эхлэхийн өмнө түүнийг бичлэгийн үндсэн дүрмүүдийг мэдэх хэрэгтэй. JavaScript ба Java -гийн бичлэгийн дүрэм C болон C++ ийнхтай адилхан. Хэрвээ та C-гийн төрлийн ямар нэгэн хэлийг мэддэг бол Javascript -ийг сурахад их амархан.    
Үндсэн дүрмүүдээс дурдвал

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

Сорилгын үр дүнгийн QuizResult компонентод сорилгыг дахин эхлүүлэх товч байгаа. react -ийг зохиогчид  програмийг компонент дээр суурилан хийх аргачлалыг уриалдаг учраас сорилгыг дахин эхлүүлэх товчийг тусд нь компонент байдлаар боловсруулъя. Үүний тулд төслийн components хавтаст UI нэртэй хавтасыг үүсгээд түүнд Button хавтасыг үүсгэе. UI гэдэг нь /user interface/ буюу хэрэглэгч талын дэлгэцийн төрөл бүрийн элементүүдийг үзүүлэх компонентуудыг агуулах юм. Button хавтас бол дэлгэц дээр үзүүлэх товчны компонентийн хавтас бөгөөд түүнд Button.js, Button.module.css үүсгэн өгөөрэй.

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

JavaScript -д он сар өдөр болон цагтай ажиллахад зориулагдсан Date гэдэг тусгай обьект байдаг. Обьектыг JavaScript -ийн бараг бүх хувилбарууд дэмждэг болохоор түүний зохицох эсэхт санаа зоволтгүй ашиглах боломжтой. Ихэнх программчлалын хэлүүдийн адилаар JavaScript цаг хугацааг шууд утгаар нь биш Unix цаг тоолол буюу 1970 оны 1-р сарын 1 ний 0 цаг 0 минутаас хойш өнгөрсөн секундын тоо хэлбэрээр тооцдог. Утгын бүх хэсгүүд тэгээс эхэлсэн индекстэй байдгаараа Date обьект онцлогтой.

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

Хичээлээр хэрэглэгч сорилгын асуултын хариугаар сонгосон хувилбарын шалгалтын логикийн боловсруулалтыг хийе. Шалгалтыг Quiz компонентийн onAnswerClickHandler аргад

  const onAnswerClickHandler = (answerId) => {
    console.log("Хариултын Id:", answerId);
    if (quiz[activeQuestion].rightAnswerId === answerId) {
      const timeout = window.setTimeout(() => {
        if (isQuizFinished()) {
          console.log("Finished");
        } else {
          setActiveQuestion(activeQuestion + 1)      
        }
        window.clearTimeout(timeout);
      }, 1000);
    } else {
      
    }        
  };

  const isQuizFinished = () => {
    return activeQuestion === quiz.length - 1
  }

гэж хэрэгжүүлье. Дэлгэц дээрх асуулт бол quiz массивийн activeQuestion индекстэй элемент бөгөөд rightAnswerId талбарт зөв хариултын дугаар байгаа. Энэ утгыг onAnswerClickHandler функцэд параметрээр ирсэн answerId /хэрэглэгч сонгосон хариултын id/ -тэй тэнцэж буйг шалгана.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

утгыг ол.

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

 

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

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