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 дэд класс болон тодорхойлогддог.

• React.Component
• React.PureComponent

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

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

• React.memo

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

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

• createElement()
• createFactory()

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

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

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

• cloneElement()
• isValidElement()
• React.Children

Fragments

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

• React.Fragment

Refs

• React.createRef
• React.forwardRef

Suspense

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

• React.lazy
• React.Suspense

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.

• React.startTransition
• React.useTransition

Hooks

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

• Basic Hooks

  • useState
  • useEffect
  • useContext

• Additional Hooks

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
  • useDeferredValue
  • useTransition
  • useId

• Library Hooks

  • useSyncExternalStore
  • useInsertionEffect

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

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

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

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,
  [config],
  [...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 компонентод аттрибут болгон хүлээн авч өөр нэг модны доор байгаа компонент руу дамжуулдаг. Энэ аргачлал нь тийм ч нийтлэг биш бөгөөд ихэвчлэн дараах хоёр хэрэглээнд ашиглагддаг:

• Forwarding refs to DOM components
• Forwarding refs in higher-order-components

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.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

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.