React Top-Level API

React бол React сангийн эхлэлийн цэг юм. Хэрэв та <script тагаас React-г ачаалвал дээд түвшний API-ууд глобал байдлаар бэлэн болно. Хэрэв та ES6-г npm-ээр ашиглаж байгаа бол дараах байдлаар import React from 'react' бичнэ. Хэрэв та ES5-г npm-ээр ашиглаж байгаал бол дараах байдалтай var React = require('react') бичнэ.

Тойм

Компонентууд

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

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

React компонентууд нь мөн хүрээлэгдэж болох функц байдлаар тодорхойлогдож болно:

React элементүүд үүсгэх нь

Бид таны дэлгэцийн загвар ямар харагдахийг тодорхойлохдооJSX хэрэглэхийг хэрэглэхийг зөвлөдөг. JSX элемент бүр React.createElement() дуудаг бичиглэл юм. Та энгийнээр дараах функцуудыг JSX ашиглаж байгаа үед шууд дууддаггүй.

Илүү дэлгэрэнгүй мэдээллийг JSX-гүйгээр React хэрэглэх хуудсыг харна уу.

Элементийг хувиргах нь

React нь элементийг хувиргах хэдэн API-ууд байдаг:

Fragments

React мөн олон элементийг хүрээлэхгүйгээр компонетод дүрслэх боломж олгодог.

Refs

Suspense

Suspense нь компонентийг “хүлээнгээ” ямар нэг зүйлийг дүрслэх боломжийг олгодог. Одоогоор Suspense нь ганцхан тохиолдол дэмждэг: React.lazy-р компонентийг динамикаар ачаалах. Ирээдүйд энэ нь өгөгдөл татах гэх мэт бусад хэрэглээг дэмжих болно.

Hooks

Hooks React 16.8-д нэмэгдсэн шинэ нэмэлт юм. Тэд төлөв болон React-н бусад боломжуудыг класс бичихгүйгээр ашиглах боломжийг олгож байна. Hooks нь өөрийн гэсэн баримтжуулалтын хэсэгтэй бөгөөд тусдаа API-н заалттай:


Reference

React.Component

React.Component бол React компонентуудын ES6 классууд ашиглаж тодорхойлж байгаа үеийн үндсэн класс юм:

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

React.Component классын шинж чанар болон функцуудыг жагсаалтыг React.Component API Reference-с харна уу.


React.PureComponent

React.PureComponent нь React.Component-тэй төстэй. Тэдгээрийн ялгаа нь React.Component shouldComponentUpdate() аргийг хэрэгжүүлдэггүй бөгөөд харин React.PureComponent нь үүнийг өнгөц шинж чанар болон төлвийн харьцуулалтаар хэрэгжүүлдэг.

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

Анхаар

React.PureComponentshouldComponentUpdate() арга нь объектуудыг өнгөцхөн харьцуулдаг. Хэрэв тэдгээр нь цогц өгөгдлийн бүтэц ашигладаг бол илүү гүн түвшний ялгаа дээр дээр худлаа үр дүн үзүүлж болзошгүй. PureComponent-г зөвхөн энгийн шинж чанартай эсвэл forceUpdate()-г таны өгөгдлийн бүтэц гүн түвшинд өөрчлөгдснийг мэдвэл дуудан ашиглана. Эсвэл immutable objects ашиглан хурдан харьцуулалтыг гүн түвшинд хийж болно.

Тодруулбал React.PureComponentshouldComponentUpdate() нь шинж чанарын шинэчлэлүүдийг компонентийн дэд мод дээр алгасдаг. Мөн бүх дэд компонентууд нь “pure” байгааг нягтлах хэрэгтэй.


React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

React.memo бол дээд түвшний компонент(higher order component). Энэ нь React.PureComponent-тэй төстэй ч класс компонентод биш функц компонентод зориулсан.

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

Анхны байдлаар энэ нь шинж чанарын цогц объектууд дээр өнгөцхөн харьцуулалт хийдэг. Хэрэв та харьцуулалтыг удирдахийг хүсвэл хоёрдах аргументаар харьцуулагч функц дамжуулан ашиглаж болно.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

Энэ арга нь зөвхөн хурдны сайжруулалтад зориулсан. Дүрслэгдэхээс “сэргийлэхэд” ганцхан найдаж болохгүй энэ нь гажуудал үүсгэж болно.

Анхаар

Класс компонентийн shouldComponentUpdate() аргаас өөр нь areEqual функц нь хэрэв шинж чанарууд адилхан бол true өөр бол false утга буцаана. Энэ нь shouldComponentUpdate-н урвуу юм.


createElement()

React.createElement(
  type,
  [props],
  [...children]
)

Өгөгдсөн төрлөөр шинэ React element үүсгэн буцаана. Төрлийн аргумент нь тагийн нэр('div' эсвэл 'span'), React component төрөл(класс эсвэл функц), эсвэл React fragment төрөл байдаг.

JSX ашиглан бичигдсэн код нь React.createElement() ашиглан хөрвүүлэгддэг. Та React.createElement()-г JSX ашиглаж байгаа үед дуудах хэрэггүй. Илүү JSX-гүй React-с харна уу.


cloneElement()

React.cloneElement(
  element,
  [props],
  [...children]
)

React элементийг element-г эхлэлийн цэг болгон ашиглаж хувилаад шинээр үүсгэн буцаана. Үр дүнд үүсэх элемент нь эх элементийнхаа шинж чанарыг өнгөцхөн хуулбарлана. Шинэ хүү нь байгаа хүүг сольдог. key болон ref эх элементээсээ нөөцлөгддөг.

React.cloneElement() дараахтай бараг ижил:

<element.type {...element.props} {...props}>{children}</element.type>

Энэ нь мөн ref-г нөөцөлдөг. Өөрөөр хэлбэл хүү элемент ref дээр байвал, та түүнийг эцгээс нь булаана. Таны шинэ элементэд ижил ref байна.

Энэ API нь хуучирсан React.addons.cloneWithProps()-н солигдох хувилбар болон танилцуулагдсан.


createFactory()

React.createFactory(type)

Өгөгдсөн төрлөөр React элемент бүтээх функц буцаадаг. React.createElement() шиг төрөл аргумент нь тагийн нэр('div' эсвэл 'span'), React component төрөл(класс эсвэл функц), эсвэл React fragment төрөл байж болно.

Энэ туслагч нь ирээдүйн хэрэглээ гэж үзэж байгаа учир JSX эсвэл React.createElement() шууд ашиглаж байгаа аль тохиолдолд хэрэглэхийг уриалж байна.

You will not typically invoke React.createFactory() directly if you are using JSX. See React Without JSX to learn more. Та React.createFactory()-г JSX ашиглаж байгаа үед дуудах хэрэггүй. Илүү JSX-гүй React-с харна уу.


isValidElement()

React.isValidElement(object)

Объект нь React элемент эсэхийг баталгаажуулдаг.true эсвэл false буцаана.


React.Children

React.Children нь this.props.children өгөгдлийн бүтэцтэй ажиллах боломжийг олгодог.

React.Children.map

React.Children.map(children, function[(thisArg)])

children-д байгаа хүү болгон дээр thisArg-г заасан функцийг ажиллуулдаг. Хэрэв children жагсаалт бол түүгээр аялан жагсаалтад байгаа хүү болгон дээр функц дуудагдана. Хэрэв хүү null эсвэл undefined бол энэ арга нь null эсвэл undefined-г жагсаалтын оронд буцаадаг.

Анхаар

Хэрэв children нь Fragment бол нэг хүүтэй гэж үзэн аяладаггүй.

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

React.Children.map() шиг боловч жагсаалт буцаадаггүй.

React.Children.count

React.Children.count(children)

Компонентийн нийт children-үүдийн тоог буцаадаг ба map эсвэл forEach дуудагдах тоотой адил юм.

React.Children.only

React.Children.only(children)

Ганцхан хүүтэйг баталгаажуулан түүнийг буцаана. Олон хүүтэй бол алдаа шиддэг.

Анхаар:

React.Children.only() React.Children.map()-н буцаах утгийг хүлээж авдаггүй бөгөөд энэ нь жагсаалт болохоос React элемент биш юм.

React.Children.toArray

React.Children.toArray(children)

children өгөгдлийн бүтцийг хүү болгон түлхүүр оноосон жагсаалт болгон буцаана. Хүүхдүүдийн цуглуулгийг дүрслэхдээ өөрчлөхөд хэрэг болдог ба тусгайлан дахин эрэмблэх болон тодорхой хэсгийг салган хэрэглэхэд маш үр дүнтэй байдаг.

Note:

React.Children.toArray() хүүнүүдийн жагсаалт нь дотогшоо дахин дамжсан бол(nested arrays) энгийн жагсаалт болгохдоо түлхүүрний утга өөрчлөгдөж болно. toArray элемент бүрийн түлхүүрийн урд түүнийг агуулсан хүрээнийг түлхүүрийг угтвар болгон ашигладаг.


React.Fragment

React.Fragment компонент тань олон элементийг render() функц дотор нэмэлт DOM элемент үүсгэхгүйгээр ашиглаж боломж олгодог:

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

Та мөн богино <></> бичиглэл ашиглаж болно Илүү дэлгэрэнгүйг React v16.2.0: Fragments-н сайжруулан дэмжлэг-с харна уу.

React.createRef

React.createRef нь React элементийн ref аттрибутад хавсаргагддаг ref үүсгэдэг.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

React.forwardRef

React.forwardRef нь ref-г React компонентод аттрибут болгон хүлээн авч өөр нэг модны доор байгаа компонент руу дамжуулдаг. Энэ аргачлал нь тийм ч нийтлэг биш бөгөөд ихэвчлэн дараах хоёр хэрэглээнд ашиглагддаг:

React.forwardRef дүрслэх функцийг аргумент болгон хүлээн авдаг. React энэ функцийг нь props болон ref хоёр аргументуудаар дууддаг. Энэ функц нь React зангилаа буцаадаг.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Дээрх жишээнд React ref<FancyButton ref={ref}> элемент руу хоёрдах аргумент болгон дамжуулж дүрслэх функцийн дотор талд React.forwardRef дуудалтаар ашиглаж байна. Энэ дүрслэх функц нь ref<button ref={ref}> элемент руу дамжуулж байна.

Үр дүнд React ref-г хавсаргасны дараа, ref.current нь DOM элементийн <button> тохиолдол руу заах болно.

Илүү дэлгэрэнгүй forwarding refs хэсгээг харна уу.

React.lazy

React.lazy() компонентийг динамикаар ачаалдаг. Энэ нь эхний дүрслэл дээр хэрэглэгдэхгүй компонентуудын дараа нь ачаалан багцын хэмжээг багасгадаг.

Та үүнийг хэрхэн ашиглахийг бидний код салгах баримтжуулалт-аас харна уу. Мөн та энэ нийтлэлийг уншин хэрхэн ашиглахийг илүү дэлгэрэнгүй тайлбарласныг уншиж болно.

// This component is loaded dynamically
const SomeComponent = React.lazy(() => import('./SomeComponent'));

Дүрслэлтийн модондоо lazy компонентийг дүрслэхэд <React.Suspense> дээд талд байх ёстойг анхаарах хэрэгтэй. Энэ нь танд ачаалж буй мэдээлэл дүрсэлдэг.

Анхаар

React.lazy-г динамик импорт дээр хэрэглэгч Жаваскрипт орчинд Promise хүчин төгөлдөр байх шаардлагатай. IE11 болон түүнээс доош хувилбарт polyfill шаарддаг.

React.Suspense

React.Suspense таньд уншиж байгаа мэдээдэл модонд байгаа компонент хараахан бэлэн болоогүй үед дүрслэх боломжийг олгоно. Одоогоор <React.Suspense> зөвхөн залхуу тохиолдолд дэмжигдэнэ:

// Энэ компонент динамикаар ачаалагдсан
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Энэ бидний код салгах заавар баримтжуулагдсан. lazy компононеь нь Suspense модны гүнд байж болох ба тэдгээрийг нэг бүрчлэн хүрээлүүлэх шаардлагагүй. Хамгийн сайн <Suspense>-г байршуулах байршил бол таний ачаалаж байгаа мэдээлэл харах газар ч lazy()-г код салгахдаа хүссэн газраа ашигла.

Одоогоор дэмжигдээгүй байгаа ч ирээдүйд бид өгөгдөл дуудах гэх мэт өөр тохиолдлууд Suspense-р удирдахийг дэмжих болно. Та энэ талаар бидний төлөвлөгөөнөөс харж болно.

Анхаар:

React.lazy() болон <React.Suspense> нь ReactDOMServer-р хараахан дэмжигдээгүй байна. Энэ бидний мэдэж байгаа хязгаарлалт бөгөөд ирээдүйд шийдэгдэх болно.