React.Component

Энэ хуудсанд React компонент классын тодорхойлолтод зориулсан нарийвчилсан API reference-ын тухай мэдээлэл багтсан. Мэдээлэл ньКомпонент ба Пропс, Төлөв ба Амьдралын мөчлөг гэх мэт React-ын үндсэн ойлголттой хүмүүст зориулсан. Эдгээрийг мэдэхгүй бол эхлээд уншиж судлахыг зөвлөе.

Тойм

React-д та компонентыг класс эсвэл функц гэж тодорхойлж болно. Класс гэж тодорхойлогдсон компонентууд нь илүү онцлог шинжтэй ба тэдгээрийн тухай энд дэлгэрэнгүй өгүүлсэн. React компонентын классыг тодорхойлохын тулд та React.Component-ыг өргөтгөх хэрэгтэй:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React.Component дэд класс дотор заавал тодорхойлох ёстой метод нь render() юм. Бусад методын хувьд бол тодорхойлох эсэх нь таны сонголт.

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

Тэмдэглэл:

ES6 класс синтакс ашиглахыг React заавал шаардахгүй. Үүнээс зайлсхийхийг хүсвэл create-react-class модуль ашиглах эсвэл үүнтэй төстэй хийсвэрлэл ашиглаж болно. Лавшруулж судлахыг хүсвэл ES6-гүйгээр React-ыг ашиглах гэдгийг уншина уу.

Компонентын амьдралын мөчлөг

Компонент тус бүр нь явцын дунд тухайн нэг цаг үед кодыг дарж тодорхойлон ажиллуулах боломжтой хэд хэдэн “lifecycle methods”-той байна. Илүү хялбар аргаар гэвэл амьдралын мөчлөгийн энэ диаграмм-ыг ашиглаж болно. Доорх жагсаалтад түгээмэл ашиглагддаг амьдралын мөчлөгийн методуудыг тод-оор тэмдэглэсэн байгаа. Бусад нь ховор ашиглагддаг.

Mount хийх

Аливаа нэг компонентын instance үүсэх үед эдгээр метод нь дарааллаараа дуудагдаж, DOM руу ордог:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Тэмдэглэл:

Методууд нь эцэг гэж тодорхойлогдох бөгөөд шинэ кодондоо эдгээрээс зайлсхийх хэрэгтэй:

• UNSAFE_componentWillMount()

Шинэчлэх

Пропст эсвэл төлөвт өөрчлөлт орох үед шинэчлэл хийгдэх болдог. Аливаа нэг компонентыг дахин рендэр хийх үед эдгээр методууд нь дарааллаараа дуудагдана:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Тэмдэглэл:

Методууд нь эцэг гэж тодорхойлогдох бөгөөд шинэ код дээрээ эдгээрээс зайлсхийх хэрэгтэй:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

Unmount хийх

DOM-оос компонентыг хасах үед энэ методыг дуудна:

• componentWillUnmount()