We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev
React
v18.2.0 ХэлнүүдGitHub

React.Component

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

Энэ хуудсанд 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 руу ордог:

Тэмдэглэл:

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

Шинэчлэх

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

Тэмдэглэл:

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

Unmount хийх

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

Алдаа зохицуулах

Рендэр хийж байх үед, амьдралын мөчлөг методын үед эсвэл хүү компонентын байгуулагчид ямар нэг алдаа гарсан үед энэ методыг дуудна.

Бусад API-ууд

Компонент тус бүрт өөр API-ууд байна:

Class Properties

Instance Properties

Reference

Түгээмэл ашиглагддаг Амьдралын мөчлөг методууд {#commonly-used-lifecycle-methods}.

Амьдралын мөчлөгийн тухай энэхүү диаграммаас харна уу.

render() 

render()

Аливаа класс компонентод зайлшгүй шаардлагатай байдаг нэг метод нь render() юм.

Дуудагдахдаа this.props, this.state -ыг шалгаад доорх хоёр төрлийн аль нэгэн рүү нь буцна:

  • React элементүүд. Ихэвчлэн JSX ашиглан үүсдэг. Жишээ нь <div /> болон <MyComponent /> нь React элементүүд бөгөөд DOM node-ыг эсвэл өөр хэрэглэгчийн тодорхойлсон компонентыг рендэр хийх зааврыг React-д өгөх гэх мэт.
  • Массив ба фрагментууд. рендэрээс олон элемент рүү буцаадаг. Дэлгэрэнгүйг фрагментууд гэснээс харна уу.
  • Порталууд. Хүү компонентуудыг өөр DOM салбарт рендэр хийхэд тусална. Дэлгэрэнгүйг порталууд гэснээс харна уу.
  • Стринг ба тоонууд. DOM-д эдгээр нь текст нод шиг рендэр хийдэг.
  • Booleans эсвэл null. Юуг ч рендэр хийхгүй. (test нь boolean байх үед return test && <Child /> төлөвийг дэмжих зорилгоор ер нь бол байдаг.)

render() функц нь цэвэр байх хэрэгтэй. Цэвэр гэдэг нь компонентын төлөвийг өөрчилдөггүй, дуудагдах бүртээ ижил үр дүн үзүүлдэг, бусад хөтөчтэй шууд интекраци хийдэггүй байхыг хэлж байгаа юм.

Хэрэв та өөр хөтөчтэй интекраци хийдэг байлгахыг хүсвэл componentDidMount() дээр ажлаа хийх эсвэл амьдралын мөчлөгийн өөр метод ашиглах хэрэгтэй. render() функцыг цэвэр байлгавал компонентуудад амар байдаг.

Тэмдэглэл

Хэрэв shouldComponentUpdate() нь false гэж буцвал render() дуудагдахгүй.

constructor() 

constructor(props)

Төлөв эхлүүлэн, методоо холбохгүй бол та React компонентдоо байгуулагч ажиллуулах шаардлагагүй.

React компонентын байгуулагч нь mount хийхээс өмнө дуудагддаг. React.Component дэд класст зориулж байгуулагч ажиллуулахдаа та super(props)-ыг бусдаас түрүүлж дуудах нь зүйтэй. Тэгэхгүй бол this.props нь байгуулагч дотор тодорхойлогдохгүй үлдэх бөгөөд алдаа гарч болзошгүй.

Ер нь бол React байгуулагчийг зөвхөн хоёр зорилгоор ашиглагддаг:

Та constructor() дотор setState()-ыг дуудаж болохгүй. Оронд нь таны компонент локал төлөв ашиглах хэрэгтэй бол шууд байгуулагч дотор эхний төлөвийг this.state руу оруулна:

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

this.state-ыг шууд өгөх ганц байгуулагчид л өгч болно. Өөр бусад бүх метод дээр бол this.setState()-ыг ашиглах хэрэгтэй. Байгуулагч дотор төлөв өөрчлөх эсвэл захиалга гаргахаас зайлсхийх хэрэгтэй. Оронд нь componentDidMount() ашигла.

Тэмдэглэл

Төлөв рүү пропс хуулахаас сэрэмжил! Түгээмэл гардаг алдаа нь энэ:

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

Ингэх шаардлагагүй бөгөөд (та this.props.color-ыг оронд нь шууд ашиглаж болно), алдаа үүсгэдэг (color пропт орсон шинэчлэл нь төлөвт нөлөөлөхгүй).

Та хэрэв пропт орсон шинэчлэлийг зориуд үл хайхрахыг хүсвэл ингэж болно. Тийм тохиолдолд пропыг initialColor эсвэл defaultColor гэж нэрийг нь өөрчилж болно. Та тэгээд шаардлагатай бол компонентын key-г өөрчлөн дотоод төлөвийг нь хүчээр “reset” хийж болно.

Хэрэв та зарим төлөв нь пропоос хамаарч байна гэж үзвэл хэрхэх тухай Төлөв удамшихаас сэргийлэх тухай блог нийтлэлээс уншаарай.

componentDidMount() 

componentDidMount()

Компонент mount хийгдсэний дараа тэр даруй componentDidMount() дуудагддаг. DOM nodes шаардах эхлэх процесс энд явагдах учиртай. Хэрэв та remote endpoint-оос өгөгдөл ачаалах бол энд сүлжээний хүсэлтийг instance болгох хэрэгтэй6

Аливаа subscription тохиргоо хийхэд уг метод тохиромжтой. Энэ тохиолдолд componentWillUnmount()-тоо unsubscribe хийхээ мартуузай.

Та componentDidMount() дотор setState()-ыг шууд дуудаж болно. Илүү рендэр хийгдэх боловч хөтөч дэлгэц дээрхийг шинэчлэхээс өмнө болоод өнгөрнө. Энэ тохиолдолд render() хоёр удаа дуудагдах боловч хэрэглэгч дундын төлөвийг нь харахгүй гэсэн үг юм. Үүнийг тэгэхдээ ашиглахдаа сэрэмжтэй байх хэрэгтэй. Яагаад гэвэл заримдаа ажиллагаанд саатал гарах нь бий. Ихэнх тохиолдолд бол та оронд ньconstructor() дотор эхний төлвийг оруулж болно. Хэмжээ, байрлалаас хамааралтай зүйлсийг рендэр хийхийн өмнө DOM node-ыг хэмжих үед модалууд, tooltips гэх мэтэд энэ нь шаардлагатай байдаг.

componentDidUpdate() 

componentDidUpdate(prevProps, prevState, snapshot)

Шинэчлэгдсэний дараа тэр даруйд componentDidUpdate() дуудагдана. Эхний рендэр хийх үед уг метод дуудагддаггүй.

Компонент шинэчлэгдсэн үед DOM дээр ажиллах боломж гэж ашиглах хэрэгтэй. Мөн одоогийн пропсыг өмнөх пропстой харьцуулж байгаа тохиолдолд сүлжээний хүсэлт илгээхэд тохиромжтой (пропс өөрчлөгдөөгүй бол сүлжээний хүсэлт явуулаад байх шаардлагагүй ).

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Та componentDidUpdate()-д setState()-ыг тэр дор нь дуудаж болох ч дээрх жишээ шиг нөхцөлтэй байх ёстой гэдгийг анхаарна уу. Тэгэхгүй бол эцэс төгсгөлгүй loop үүснэ. Мөн дахин рендэр хийх илүү үйлдэл гарах бол хэрэглэгчид харагдахгүй ч гэсэн компонентын ажиллагаанд нөлөөлөх болно. Хэрэв та дээрээс ирэх пропт зарим төлвийг “яг хуулах” гэж байгаа бол пропыг оронд нь шууд ашиглах хэрэгтэй.Пропсийг төлөв рүү хуулах үед яагаад bugs үүсдэг вэ? гэдгээс дэлгэрэнгүй уншина уу.

Хэрэв таны компонент getSnapshotBeforeUpdate() амьдралын мөчлөгийг (тун ховор тохиолдол) ажиллуулбал буцаах утга нь componentDidUpdate()-т гуравдагч “snapshot” параметр бол дамжуулагдана. Тэгэхгүй бол уг параметр нь тодорхойлогдохгүй.

Тэмдэглэл

shouldComponentUpdate() нь false гэвэл componentDidUpdate() нь дуудагдахгүй.

componentWillUnmount() 

componentWillUnmount()

Компонент unmount хийгдэж, устгагдахын өмнө componentWillUnmount() дуудагддаг. Хугацаа хэмжигчийг ажиллахгүй болгох, сүлжээний хүсэлтийг цуцлах, componentDidMount()-т үүсгэсэн subscription-уудыг цэвэрлэх гэх мэт хэрэгтэй цэвэрлэгээний ажлаа хийгээрэй.

Тухайн компонент хэзээ ч дахин рендэр хийгдэхгүй тул componentWillUnmount() дахь setState()-ыг дуудах хэрэггүй Компонентын instance нь unmount болсон бол дахин mount хийж болохгүй.

Ховор ашиглагддаг Амьдралын мөчлөгийн Методууд

Энэ хэсэгт ховор ашиглагддаг методуудын тухай өгүүлнэ. Зарим метод хааяа нэг хэрэг болдог ч ихэнхдээ нь хэрэг болохгүй байх нь бий. Та эдгээр методуудын ихэнхийг энэхүү амьдралын мөчлөг диаграм-аас харж болно. Дээд хэсэгт байх “Show less common lifecycles” гэсэн дээр дараад харна

shouldComponentUpdate() 

shouldComponentUpdate(nextProps, nextState)

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

Шинэ пропс эсвэл төлөв хүлээн авах үед рендэр хийхийн өмнө shouldComponentUpdate() дуудагддаг. true гэвэл буцаж шилждэг. Анхны удаа рендэр хийхэд эсвэл forceUpdate() ашиглагдаж байгаа үед уг метод дуудагддаггүй.

Уг метод нь performance optimization. хэлбэрээр байна. Рендэр хийхээс “сэргийлнэ” гэж найдаад хэрэггүй. Учир нь bugs үүсгэх магадлалтай. shouldComponentUpdate() гэж гараар бичихийн оронд built-in PureComponent ашиглаарай. PureComponent нь пропс, төлөвийн өнгөц харьцуулалт (shallow comparison) мэт ажилладаг ба хэрэгтэй update-ыг алгасахгүй байхад тусална.

Хэрэв та гараар бичнэ гэдэгтээ өөртөө итгэлтэй байгаа бол this.props-ыг nextProps-той, this.state-ыг nextState-тай харьцуулж, React-д тухайн update-ыг алгасаж болно гэдгийг мэдэгдэхдээ false-руу буцна. false руу буцах нь хүү компонентыг тэдний төлөв өөрчлөгдөх үед дахин рендэр хийхийг хориглохгүй гэдгийг анхаарна уу.

Эн тэнцүү байгаа эсэхийг шалгах эсвэл shouldComponentUpdate()-д JSON.stringify() ашиглахгүй байхыг зөвлөе. Үр дүнгүй бөгөөд ажиллагаанд сөргөөр нөлөөлдөг.

Одоо бол shouldComponentUpdate() нь false байвал UNSAFE_componentWillUpdate(), render(), componentDidUpdate() нар дуудагдахгүй. Цаашид React нь shouldComponentUpdate()-ыг хатуу директив биш сануулга гэж хардаг болох байх. Гэхдээ компонентыг дахин рендэр хийх үед false гарч ирнэ.

static getDerivedStateFromProps() 

static getDerivedStateFromProps(props, state)

Эхний mount хийх гэж байхад дараа нь update хийх үед аль алинд нь рендэр методыг дуудахын өмнө getDerivedStateFromProps дуудагддаг. Төлөвийг шинэчлэхээр объектыг буцаана эсвэл юу ч шинэчлэлт хийхгүй, хүчингүй байна.

Төлөв нь пропст орох өөрчлөлтөөс хамаарах ховор тохиолдолд ашиглагдах зориулалттай. Жишээ нь, өмнө болон дараагийн хүүг харьцуулж, алийг нь хөдөлгөөнд оруулж, алийг нь хасах вэ гэдгийг шийдэхэд туслах <Transition> компонентыг ажиллуулахад хэрэг болж болно.

Төлөвийг удамшуулбал код нуршуу болох ба компонент ажиллахад бэрх болгодог. Илүү энгийн өөр боломжуудыг хараад үзээрэй:

Энэ метод нь компонентын instance-д хандаж чадахгүй. Хэрэв хүсвэл та классын тодорхойлолтын гадна компонентын пропс болон төлөвийн функцыг салгаж, getDerivedStateFromProps() болон бусад классын методын хооронд кодоо дахин ашиглаж болно.

Ямар шалтгаанаар хамаагүй рендэр хийх бүрт уг метод нь ажиллана гэдгийг анхаарна уу. Эсрэгээрээ UNSAFE_componentWillReceiveProps нь локал setState-ын үр дүнд биш, эцэг нь дахин рендэр хийхийг шаардсан болохоор ажилладаг.

v

getSnapshotBeforeUpdate() 

getSnapshotBeforeUpdate(prevProps, prevState)

Хамгийн сүүлийн рендэр хийсэн үр дүн нь DOM г.м руу орохын яг өмнө getSnapshotBeforeUpdate() дуудагддаг. Энэ нь таны компонентыг өөрчлөлт орохоос өмнө DOM-оос зарим мэдээлэл (байрлалыг гүйлгэх г.м) авахад тусалдаг. Уг амьдралын мөчлөгийн буцаасан ямар ч утга componentDidUpdate() параметр руу дамжих болно.

Хэдий ховор тохиолдох ч position scroll хийхэд тусгай арга шаарддаг чат thread гэхчлэн хэрэглэгчийн интерфэйст хэрэг болдог.

Яг тухайн үеийн утга (эсвэл null) буцах учиртай.

Жишээ нь:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

Дээрх жишээнүүд дээр “render” хийх үеийн амьдралын мөчлөг (render гэхчлэн) хооронд саатал үүсэж магадгүй тул getSnapshotBeforeUpdate доторх scrollHeight проперти болон “commit” үеийн амьдралын мөчлөгийг (getSnapshotBeforeUpdate, componentDidUpdate г.м) унших нь чухал. .

Error boundaries

Error boundaries гэдэг нь хүү компонентын модны хаа ч Javascript-ын алдааг барьж олж, алдаа гарсан компонентод биш fallback хэрэглэгчийн интерфэйс харуулдаг React компонентууд юм. Error boundaries нь рендэр хийх үед, амьдралын мөчлөгийн үед болон өөрөөс доошх бүтцийн бүх байгуулагч дахь алдааг олдог.

Хэрэв амьдралын мөчлөгийн методуудын аль нэг нь (эсвэл хоёулаа) static getDerivedStateFromError() эсвэл componentDidCatch() байх юм бол error boundary нь класс компонент болдог. Эдгээр амьдралын мөчлөгөөс төлөвийг шинэчлэх юм бол доошх бүтэц дэх Javascript-ын засаагүй алдаануудыг олж, fallback UI-аар харуулдаг.

Урьдчилан тооцоолоогүй нөхцөлд л дахин сэргээх зорилгоор error boundaries-ыг ашиглаарай; компонент ажиллуулах зорилгоор ашиглаж болохгүй.

Дэлгэрэнгүйг React 16-д алдаа засах нь гэснээс харна уу.

Тэмдэглэл

Error boundaries нь зөвхөн бүтцийн модонд өөрөөс доош байгаа компонентуудад байгаа алдааг олдог. Өөрт байгаа алдааг error boundary олж чадахгүй.

static getDerivedStateFromError() 

static getDerivedStateFromError(error)

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.    return { hasError: true };  }
  render() {
    if (this.state.hasError) {      // You can render any custom fallback UI      return <h1>Something went wrong.</h1>;    }
    return this.props.children;
  }
}

Тэмдэглэл

Рендэр хийх үед getDerivedStateFromError() дуудагддаг. Тиймээс төлөвийг өөрчилж болохгүй.

Энэ тохиолдолд оронд нь componentDidCatch() ашиглаарай.

componentDidCatch() 

componentDidCatch(error, info)

Удамшсан компонентоос алдаа гарсан тохиолдолд энэхүү амьдралын мөчлөг дуудагддаг. Хоёр параметр хүлээн авдаг:

  1. error - Гарсан алдаа нь.
  2. info -алдаа гаргасан компонентын тухай мэдээлэл агуулсан componentStack түлхүүртэй объект

“commit” хийх үед componentDidCatch() дуудагддаг. Тиймээс төлөв өөрчлөхийг зөвшөөрдөг.

Алдаа бүртгэх зэрэгт ашиглаж болно:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {    // Example "componentStack":    //   in ComponentThatThrows (created by App)    //   in ErrorBoundary (created by App)    //   in div (created by App)    //   in App    logComponentStackToMyService(info.componentStack);  }
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

Production and development builds of React slightly differ in the way componentDidCatch() handles errors.

On development, the errors will bubble up to window, this means that any window.onerror or window.addEventListener('error', callback) will intercept the errors that have been caught by componentDidCatch().

On production, instead, the errors will not bubble up, which means any ancestor error handler will only receive errors not explicitly caught by componentDidCatch().

Note

In the event of an error, you can render a fallback UI with componentDidCatch() by calling setState, but this will be deprecated in a future release. Use static getDerivedStateFromError() to handle fallback rendering instead.

Legacy Lifecycle Methods

Доорх амьдралын мөчлөгийн методууд нь “legacy” гэсэн тэмдэглэгээтэй байгаа. Хэдийгээр ажилладаг ч гэсэн шинэ кодонд тэднийг ашиглахгүй байхыг зөвлөж байна. Та энэхүү блог нийтлэлээс legacy lifecycle methods-оос хэрхэн зайлсхийж болох тухай уншаарай.

UNSAFE_componentWillMount() 

UNSAFE_componentWillMount()

Тэмдэглэл

Энэхүү амьдралын мөчлөг нь өмнө componentWillMount гэсэн нэртэй байсан. Хувилбар 17 хүртэл энэ нэрээр ажиллах боломжтой. Компонентуудаа автоматаар шинэчлэхийн тулд rename-unsafe-lifecycles codemod ашиглаарай.

Mount хийхээс өмнө UNSAFE_componentWillMount() дуудагдана. render() хийхээс өмнө дуудагдах тул энэ метод дээр setState()-ыг зэрэг дуудахад дахин нэмэлт рендэр хийгдэхгүй гэсэн үг. Ерөнхийдөө төлөв ажиллуулж эхлэхийн оронд constructor() буюу байгуулагч ашиглахыг бид зөвлөдөг.

Уг метод дээр төлөв өөрчлөх эсвэл subscription хийхээс зайлсхий. Хэрэгтэй бол оронд нь componentDidMount() ашиглаарай.

Сервер рендэр дээр дуудагддаг цор ганц амьдралын мөчлөг нь энэ юм.

UNSAFE_componentWillReceiveProps() 

UNSAFE_componentWillReceiveProps(nextProps)

Тэмдэглэл

Энэхүү амьдралын мөчлөг нь өмнө componentWillReceiveProps гэсэн нэртэй байсан. Хувилбар 17 хүртэл энэ нэрээр ажиллах боломжтой. Компонентуудаа автоматаар шинэчлэхийн тулд rename-unsafe-lifecycles codemodашиглаарай.

Тэмдэглэл:

Амьдралын мөчлөгийн уг методыг ашиглах нь алдаа гарч, тогтворгүй ажиллагаанд хүргэж болзошгүй

  • Хэрэв та пропст гарсан өөрчлөлтөөс болж төлөв өөрчлөх (жишээ нь өгөгдөл авах, анимейшн хийх) хэрэгтэй бол componentDidUpdate амьдралын мөчлөгийг ашиглаарай.
  • Хэрэв та аливаа нэг проп өөрчлөгдөх үед зарим өгөгдлийг дахин тооцоолох зорилгоор componentWillReceiveProps-ыг ашигласан бол memoization helper-ыг оронд нь ашиглаарай

Бусад тохиолдолд удамшсан төлвийн тухай энэхүү блог нийтлэл дэх зааврыг дагана уу.

Mount хийсэн компонент шинэ пропс хүлээн авахын өмнө UNSAFE_componentWillReceiveProps() дуудагддаг. Хэрэв пропт өөрчлөлт орсны улмаас төлөвийг шинэчлэх хэрэгтэй бол (жишээ нь reset хийх) та this.props-ыг nextProps-тай харьцуулан, уг методдоо this.setState() ашиглан төлөвийг шилжүүлээрэй.

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

Reactmount хийж байх үед эхний проптой UNSAFE_componentWillReceiveProps()-ыг дууддаггүй. Зарим компонентуудын пропс нь шинэчлэгдэх шаардлагатай бол методыг дууддаг. this.setState()-ыг дуудах нь ер нь бол UNSAFE_componentWillReceiveProps()-ыг өдөөхгүй.

UNSAFE_componentWillUpdate() 

UNSAFE_componentWillUpdate(nextProps, nextState)

Тэмдэглэл

Уг амьдралын мөчлөг нь өмнө componentWillUpdate гэсэн нэртэй байсан. Хувилбар 17 хүртэл энэ нэрээр ажиллах боломжтой. Компонентуудаа автоматаар шинэчлэхийн тулд rename-unsafe-lifecycles codemod ашиглаарай.

Шинээр төлөв, пропс хүлээн авах үед рендэр хийхийн өмнөхөн UNSAFE_componentWillUpdate() дуудагддаг. Шинэчлэл хийгдэхээс өмнө бэлтгэл ажил хийх боломж болгон ашиглах хэрэгтэй. Эхний удаа рендэр хийхэд уг метод дуудагддаггүй.

UNSAFE_componentWillUpdate() буцахаас өмнө React-ын компонентыг шинэчлэхийг шаарддаг ямар нэг үйлдэл (Redux үйлдэл г.м) хийх эсвэл this.setState()-ыг та дуудаж болохгүй.

Уг методыг componentDidUpdate()-оор орлуулж болно. Хэрэв та уг методыг ашиглахдаа DOM-оос уншуулж байсан бол (scroll-ын байрлалыг хадгалах г.м) та яг адилханаар getSnapshotBeforeUpdate() ашиглан хийх боломжтой.

Тэмдэглэл

Хэрэв shouldComponentUpdate() буцах утга нь худал байх юм бол UNSAFE_componentWillUpdate() дуудагдахгүй.

Бусда API-ууд

Доор дурдах методуудын хувьд та өөрийн компонентоосоо дуудаж болдгоороо өмнө дурдсан амьдралын мөчлөг методуудаас өөр юм.

setState(), forceUpdate() гэсэн хоёр янз л байна.

setState() 

setState(updater[, callback])

setState() нь компонентод орсон өөрчлөлтийг дараалуулан нэмж, төлөв шинэчлэгдсэн үед компонент болон хүүхдүүд нь дахин рендэр хийх хэрэгтэй гэдгийг React-д мэдэгддэг. Та эвент зохицуулагч, серверийн хариу үйлдлийн улмаас хэрэглэгчийн интерфэйсийг шинэчлэхийг хүсвэл нэн тэргүүнд ашиглах чухал метод юм.

setState()-ыг компонентыг шинэчлэх шуурхай команд гэхээс илүүтэй хүсэлт гэж ойлгон. Ажиллагааг илүү байлгахын тулд React магадгүй хүсэлтийг сааруулж, нэг дамжуулалтаараа хэд хэдэн компонент шинэчлэх боломжтой. Төлөвт орсон өөрчлөлтүүд нь шууд орно гэсэн баталгаа React-д байхгүй.

setState() нь дандаа компонентыг шууд шинэчлэхгүй. Update-ыг хойшлуулах, хадгалаад байлгаад байдаг. setState() дуудсаны дараа тэр даруй this.state-ыг уншуулбал алдаа гарч болзошгүй. Оронд нь componentDidUpdate эсвэл setState callback (setState(updater, callback)) ашиглаарай. Update орсны дараа баталгаатай ажиллана. Хэрэв та өмнөх төлөв дээр үндэслэн одоогийн төлөвийг тохируулах гэж байгаа бол доорх updater аргументын тухай уншаарай.

shouldComponentUpdate() нь false гэж гарахгүй л бол setState() нь дандаа дахин рендэр хийх болно. Хэрэв өөрчлөлт орох объект ашиглах бол shouldComponentUpdate()-т нөхцөлт рендэр хийж болохгүй. Шинэ төлөв нь өмнөх төлөвөөс өөр байгаа тохиолдолд setState() -ыг дуудвал шаардлагагүй дахин рендэр хийхээс сэргийлж чадна.

Эхний аргумент нь updater функц:

(state, props) => stateChange

Өөрчлөлт орох үед state нь компонентын төлөвт reference болж өгдөг. Шууд хувирдаг байж болохгүй. state, props-т оруулсан өөрчлөлт дээр үндэслэн шинэ объект бүтээн өөрчлөлт харагдах учиртай. Жишээ нь бид props.step ашиглан төлөвт утга нэмэхийг хүсвэл:

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

Update хийх функцийн хүлээн авсан state, props аль аль нь баталгаатай хамгийн сүүлийн үеийн байдаг. Update-ын үр дүн нь state-тэй өнгөц нийлдэг.

setState()-ын хоёр дахь параметр нь setState бүрэн гүйцэн, тухайн компонент дахин рендэр хийсний дараа ажиллах дурын callback функц юм. Ер нь бол бид оронд нь componentDidUpdate() ашиглахыг зөвлөдөг.

Та setState()-т объектыг функцээр биш эхний аргумент болгон дамжуулж болно: 

setState(stateChange[, callback])

Ингэснээр stateChange -ыг шинэ төлөвт нийлүүлэх юм. Сагсанд хийх барааны тоог өөрчлөх г.м:

this.setState({quantity: 2})

setState() нь асинхрон хэлбэртэй ба тухайн мөчлөгт олон дуудлага хийгдвэл хамтад нь нийлүүлдэг. Жишээ нь та нэг мөчлөгт барааны тоог нэгээс олон удаа нэмэх гэж оролдвол үр дүн нь:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

Нэг мөчлөгт дараагийн дуудлага нь өмнөх дуудлагын оруулсан утгыг дарж тодорхойлдог. Тэгэхээр тоон мэдээлэл нь нэг удаад л нэмэгдэнэ гэсэн үг. Хэрэв дараагийн төлөв нь одоогийн төлөвөөс хамааралтай бол updater function form-ыг оронд нь ашиглахыг зөвлөе:

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

Дэлгэрэнгүйг:

forceUpdate() 

component.forceUpdate(callback)

Компонентын чинь төлөв эсвэл пропс өөрчлөгдвөл цаад тохиргоогоор бол таны компонент дахин рендэр хийнэ. Хэрэв таны render() метод нь өөр өгөгдлөөс хамааралтай бол та forceUpdate() дуудаж байж тухайн компонент дахин рендэр хийнэ гэдгийг React-д хэлж өгөх хэрэгтэй.

forceUpdate()-ыг дуудвал shouldComponentUpdate()-ыг алгасан тухайн компонентод render() хийхээр дуудна. Хүү компонентуудын амьдралын мөчлөгийн энгийн компонентуудыг ажиллуулна. Хүү бүрт shouldComponentUpdate() метод ажиллана. Тэмдэглэгээ өөрчлөгдсөн ч React нь зөвхөн DOM-ыг шинэчилнэ.

Энгийн үед та forceUpdate()-ыг ашиглахаас аль болох зайлсхийх хэрэгтэй ба render()-ын this.props болон this.state-ыг уншуулбал зүгээр.

Class Properties

defaultProps

Класст зориулсан өгөгдмөл пропсыг тохируулахад defaultProps нь компонентын классдаа проп гэж тодорхойлогдож болно. Хоосон биш, тодорхойгүй пропст үүнийг ашиглана. Тухайлбал:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

Хэрэв props.color байхгүй бол цаанаасаа 'blue' байна:

  render() {
    return <CustomButton /> ; // props.color will be set to blue
  }

Хэрэв props.color нь null байвал null хэвээр үлдэнэ:

  render() {
    return <CustomButton color={null} /> ; // props.color will remain null
  }

displayName

Мессежийг дибаг хийхэд displayName ашиглана. Тухайн компонентыг тодорхойлох функц эсвэл классын нэрнээс үндэслэн гарах учир та үүнийг тодорхой зааж өгөх хэрэггүй. Хэрэв дибаг хийх зорилгоор эсвэл дээд түвшний компонент үүсгэх гэж байгаа бол та тодорхой зааж өгч болно. Дэлгэрэнгүйг Wrap the Display Name for Easy Debugging гэдгээс харна уу.

Instance Properties

props

Тухайн компонентыг дуудагчийн тодорхойлсон пропс нь this.props-т агуулагдана. Пропсын тухай анхан шатны тайлбар хүсвэл Компонентууд ба Пропс гэснийг харна уу.

this.props.children нь онцгой нэг проп бөгөөд өөрийн таг биш JSX expression-т хүү таг болж тодорхойлогддог.

state

Уг компонентод зориулсан өгөгдлийг агуулсан төлөв нь ирээдүйд өөрчлөгдөх боломжтой. Төлөвийг хэрэглэгч тодорхойлох ба дан Javascript объект байна.

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

Төлвийн талаар дэлгэрэнгүй мэдээллийг Төлөв ба Амьдралын мөчлөг гэснээс харна уу.

this.state -ыг шууд хувиргаж болохгүй. Дараа нь setState()-ыг дуудахад хийсэн өөрчлөлт чинь солигдох болно. this.state-ыг хувиргаж өөрчлөх боломжгүй гэж ойлгох нь зүйтэй.

Is this page useful?Edit this page