We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

React Top-Level API

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 бол 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-р компонентийг динамикаар ачаалах. Ирээдүйд энэ нь өгөгдөл татах гэх мэт бусад хэрэглээг дэмжих болно.

Transitions

Transitions are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.

Hooks

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


Reference

React.Component

This content is out of date.

Read the new React documentation for 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

This content is out of date.

Read the new React documentation for 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

This content is out of date.

Read the new React documentation for memo.

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

React.memo бол дээд түвшний компонент.

Хэрвээ таны компонент өгөгдсөн пропсийг рендер хийдэг бол, үр ашигтай ажиллуулахын тулд тухайн компонентийг React.memo дотор оруулж болно. Ингэснээр React энэ компонентийг дахин рендер хийж цаг алдалгүй өмнөх рендер хийж байсан үр дүнг шууд харуулна.

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

Нэмэлтээр илүү шалгалт хийх шаардлагатай бол хоёр дахь аргумент оруулан шалгаж болно. Уг хоёр дахь аргумент байхгүй нөхцөлд пропсийг өнгөцхөн харьцуулалт хийдэг.

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()

This content is out of date.

Read the new React documentation for createElement.

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

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

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


cloneElement()

This content is out of date.

Read the new React documentation for cloneElement.

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

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

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

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

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

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


createFactory()

This content is out of date.

Read the new React documentation for 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()

This content is out of date.

Read the new React documentation for isValidElement.

React.isValidElement(object)

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


React.Children

This content is out of date.

Read the new React documentation for 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

This content is out of date.

Read the new React documentation for Fragment.

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

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

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

React.createRef

This content is out of date.

Read the new React documentation for 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

This content is out of date.

Read the new React documentation for 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

This content is out of date.

Read the new React documentation for lazy.

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

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

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

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

React.Suspense

This content is out of date.

Read the new React documentation for 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()-г код салгахдаа хүссэн газраа ашигла.

Note

For content that is already shown to the user, switching back to a loading indicator can be disorienting. It is sometimes better to show the “old” UI while the new UI is being prepared. To do this, you can use the new transition APIs startTransition and useTransition to mark updates as transitions and avoid unexpected fallbacks.

React.Suspense in Server Side Rendering

During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending. When a component suspends we schedule a low priority task to render the closest Suspense boundary’s fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.

React.Suspense during hydration

Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before it is hydrated will cause the boundary to hydrate at a higher priority than neighboring boundaries. Read more

React.startTransition

This content is out of date.

Read the new React documentation for startTransition.

React.startTransition(callback)

React.startTransition lets you mark updates inside the provided callback as transitions. This method is designed to be used when React.useTransition is not available.

Анхаар:

Updates in a transition yield to more urgent updates such as clicks.

Updates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.

React.startTransition does not provide an isPending flag. To track the pending status of a transition see React.useTransition.

Is this page useful?Edit this page