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