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

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

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

Холбоотой материалууд
Динамик классууд

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

Хуудасны элементүүдийг динамикаар  хэвжүүлэх шаардлага ихээр гардаг. Үүнийг хэрхэн хэрэгжүүлэхийг Car компонентийн input элемент дээр

import React from 'react'
import './Car.css'

const car = props => (
  <div className="Car">
    <h3>Машиний нэр: {props.name}</h3>
    <p>Он: <strong>{props.year}</strong></p>
    <input type="text" onChange={props.onChangeName} value={props.name} />
    <button onClick={props.onDelete}>Устгах</button>
  </div>
)
export default car

авч үзье.

Холбоосын параметрүүд

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

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох цэс бусдаасаа ялгагдахгүй байгаа нь сайнгүй. 
Үнэхээр / чиглүүлэгч нүүр хуудас буюу http://localhost:3000/ хаягаар нүүр хуудасыг үзүүлж байхад

r_07_02_01

кодийн a тегээр тодорхойлогдсон Нүүр холбоост ямар нэгэн атрибут байхгүй байгаа нь харагдана. 

Параметр дамжуулах

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

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

useCallback

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

Хичээлээр react -ийн хамгийн чухал бөгөөд хэрэгтэй хукуудийн нэг болох useCallback -ийн талаар авч үзье. Хукийн судалгааг дараах

import React, {useState} from 'react'

function App() {
  const [colored, setColored] = useState(false)
  const [count, setCount] = useState(1)
    
  const styles = {
      color: colored ? 'darkred' : 'black'
  }
    
  return (
      <div className="container">
        <h1 style={styles}>Элементийн тоо: {count}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setCount(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-warning mx-3'} onClick={() => setColored(prev => !prev)}>Өөрчлөх</button>
      </div>
  );
}

export default App;

кодоор авч үзье. Компонентийн код логикийн хувьд өмнөх хичээлүүдийнхтэй бараг ижил тул тайлбарлах нь илүүц гэж үзлээ.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

тэнцэл бишийг бод.

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

 
Бодлого 4.034

B(5;3) цэгт төгсгөлтэй AB вектор (3;1) гэсэн кординаттай бол A цэгийн абцисс, ординатын нийлбэрийг ол.

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

 
Бодлого 14.084

prob14_84_01 функцийн хязгаарыг ол.

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195