Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bielarusajed
bielarusajed committed Oct 14, 2023
1 parent 6b78f78 commit 333352c
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions src/content/reference/react/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ title: "Убудаваныя ў React хукі"

<Intro>

*Хукі* дазваляюць выкарыстоўваць вам некаторыя магчымасці React у вашых кампанентах. Вы можаце як выкарыстоўваць убудаваня хукі, так і камбінаваць іх у свае ўласныя. Дадзеная старонка пералічвае ўбудаваныя ў React хукі.
*Хукі* дазваляюць выкарыстоўваць вам некаторыя магчымасці React у вашых кампанентах. Вы можаце як выкарыстоўваць убудаваныя хукі, так і камбінаваць іх у свае ўласныя. Дадзеная старонка пералічвае ўбудаваныя ў React хукі.

</Intro>

---

## Хукі стану {/*state-hooks*/}

*Стан* дазваляе кампаненту [«запамінаць» даныя, напрыклад уведзеныя карыстальнікам](/learn/state-a-components-memory). Напрыклад, кампанент з формай можа выкарыстоўваць стан для захавання уведзеных значэнняў, у свой жа час кампанент з галерэяй відарысаў можа выкарыстоўваць стан для захавання бягучага выбранага відарыс.
*Стан* дазваляе кампаненту [«запамінаць» даныя, напрыклад уведзеныя карыстальнікам](/learn/state-a-components-memory). Напрыклад, кампанент з формай можа выкарыстоўваць стан для захавання ўведзеных значэнняў, у свой жа час кампанент з галерэяй відарысаў можа выкарыстоўваць стан для захавання бягучага выбранага відарыс.

Каб дадаць стан у кампанент, выкарыстоўвайце адзін з дадзеных хукаў:

* [`useState`](/reference/react/useState) задае парменную стану, яку вы можаце абнаўляць напрамую.
* [`useState`](/reference/react/useState) задае пераменную стану, якую вы можаце абнаўляць напрамую.
* [`useReducer`](/reference/react/useReducer) задае пераменную стану, логіка абнаўленне якой апісваецца праз [функцыю рэд’юсара](/learn/extracting-state-logic-into-a-reducer).

```js
Expand All @@ -29,9 +29,9 @@ function ImageGallery() {
## Хукі кантэксту {/*context-hooks*/}
*Кантэкст* дазваляе кампаненту [атрымліваць інфармацыю ад далёкіх бацькоўскіх кампанентаў, не перадаючы яе ў якасці пропсаў](/learn/passing-props-to-a-component). Напрыклад, ваш кампанент верхняга ўзроўню можа перадаваць бягучую тэма інтэрфейса ўсім даччыным элементам на любым узроўні ўкладзенасці.
*Кантэкст* дазваляе кампаненту [атрымліваць інфармацыю ад далёкіх бацькоўскіх кампанентаў, не перадаючы яе ў якасці пропсаў](/learn/passing-props-to-a-component). Напрыклад, ваш кампанент верхняга ўзроўню можа перадаваць бягучую тэма інтэрфейсу ўсім даччыным элементам на любым узроўні ўкладзенасці.
* [`useContext`](/reference/react/useContext) чытае і падпісваецца на абнаўленні кантэкста.
* [`useContext`](/reference/react/useContext) чытае і падпісваецца на абнаўленні кантэксту.
```js
function Button() {
Expand All @@ -43,9 +43,9 @@ function Button() {
## Хукі рэфаў {/*ref-hooks*/}
*Рэфы* дазваляюць кампаненту [ўтрымліваць інфармацыію, якая не выкарыстоўваецца падчас рэндэрынгу](/learn/referencing-values-with-refs), напрыклад: вузлы DOM ці ідэнтыфікатары тайм-аўтаў. У адрозненні ад стану, абнаўленне ref не прыводзіць на перарэндэрынгу кампанента. Рэфы — сваеасаблівая «лазейка», каб выбрацца з парадыгмы React. Яны карыстыя, калі даводзіцца працаваць з не React сістэмамі, напрыклад з API браўзера.
*Рэфы* дазваляюць кампаненту [ўтрымліваць інфармацыію, якая не выкарыстоўваецца падчас рэндэрынгу](/learn/referencing-values-with-refs), напрыклад: вузлы DOM або ідэнтыфікатары тайм-аўтаў. У адрозненні ад стану, абнаўленне ref не прыводзіць на перарэндэрынгу кампанента. Рэфы — своеасаблівы «пралаз», каб выбрацца з парадыгмы React. Яны карысныя, калі даводзіцца працаваць з не React сістэмамі, напрыклад з API браўзера.
* [`useRef`](/reference/react/useRef) аб’яўляе рэф. Вы можаце захоўваць у іх любыя даныя, але ў большасці выпадкаў у іх захоўваюць вузлы DOM.
* [`useRef`](/reference/react/useRef) аб’яўляе рэф. Вы можаце захоўваць у ім любыя даныя, але ў большасці выпадкаў у рэфах захоўваюць вузлы DOM.
* [`useImperativeHandle`](/reference/react/useImperativeHandle) дазваляе наладзіць рэф вашага кампанента. Выкарыстоўваецца рэдка.
```js
Expand All @@ -58,9 +58,9 @@ function Form() {
## Хукі эфектаў {/*effect-hooks*/}
*Эфекты* дазваляюць кампаненту [падлучацца і сінхранізавацца са знешнімі сістэмамі](/learn/synchronizing-with-effects). Гэта ўключае ў сябе працу з сеткай, DOM браўзера, анімацыямі, віджэтамі, напісанымі з дапамогай іншых бібліятэк для пабудовы інтэрфейсаў, ці любым іншым не React кодам.
*Эфекты* дазваляюць кампаненту [падключацца і сінхранізавацца са знешнімі сістэмамі](/learn/synchronizing-with-effects). Гэта ўключае ў сябе працу з сеткай, DOM браўзера, анімацыямі, віджэтамі, напісанымі з дапамогай іншых бібліятэк для пабудовы інтэрфейсаў, ці любым іншым не React кодам.
* [`useEffect`](/reference/react/useEffect) падлучае кампанент да хнейшняй сістэмы.
* [`useEffect`](/reference/react/useEffect) падключае кампанент да знейшняй сістэмы.
```js
function ChatRoom({ roomId }) {
Expand All @@ -72,20 +72,20 @@ function ChatRoom({ roomId }) {
// ...
```
Эфекты — «лазейкі», што дазваляюць выбрацца з парадыгмы React. Не выкарыстоўвайце Эфекты для арганізацыі патокаў даных унутры праграмы. Калі вы не ўзаемадзейнічаеце са знешняй сістэма, [імаверна, вам не патрэбны эфект.](/learn/you-might-not-need-an-effect)
Эфекты — «пралазы», што дазваляюць выбрацца з парадыгмы React. Не выкарыстоўвайце Эфекты для арганізацыі патокаў даных унутры праграмы. Калі вы не ўзаемадзейнічаеце са знешняй сістэмай, [імаверна, вам не патрэбны эфект.](/learn/you-might-not-need-an-effect)
Існуюць таксама два іншыя варыянты `useEffect`, якія спрацоўваюць у іншы час, яны выкарыстоўваюцца не так часта:
* [`useLayoutEffect`](/reference/react/useLayoutEffect) спрацоўвае перад тым, як браўзер абновіць экран. Можна выкарыстоўваць для вымярэнняў элементаў старонкі.
* [`useInsertionEffect`](/reference/react/useInsertionEffect) спрацоўвае перад тым, як React абновіць DOM. Бібліятэкі могуць выкарыстоўваць, каб дынамічна падстаўляць CSS.
* [`useInsertionEffect`](/reference/react/useInsertionEffect) спрацоўвае перад тым, як React абновіць DOM. Бібліятэкі могуць выкарыстоўваць яго, каб дынамічна падстаўляць CSS.
---
## Хукі прадукцыйнасці {/*performance-hooks*/}
Для аптымізацыі прадукцыйнасці пры перарэндэрынгу часта прапускаюць выкананне непатрэбнай працы. напрыклад, вы можаце сказаць React каб выкарыстоўваў кэшаваныя вынікі вылічэнняў ці прапусціць перарэндэрынг, калі даныя не змяніліся ад папярэдняга рэндэрынгу.
Для аптымізацыі прадукцыйнасці пры перарэндэрынгу часта прапускаюць выкананне непатрэбнай працы. Напрыклад, вы можаце сказаць React выкарыстоўваць кэшаваныя вынікі вылічэнняў або прапусціць перарэндэрынг, калі даныя не змяніліся з моманту папярэдняга рэндэрынгу.
Кадб прапусціць вылічэнні і непатрэбны перарэндэрынг, выкарыстоўвайце наступныя хукі:
Каб прапусціць вылічэнні і непатрэбны перарэндэрынг, выкарыстоўвайце наступныя хукі:
- [`useMemo`](/reference/react/useMemo) дазваляе кэшаваць вынік складаных вылічэнняў.
- [`useCallback`](/reference/react/useCallback) дазваляе кэшаваць аб’яўленую функцыю перад тым, як перадаць яе далей у аптымізаваны кампанент.
Expand All @@ -97,22 +97,22 @@ function TodoList({ todos, tab, theme }) {
}
```
Часам бывае, што нельга прапусціць рэрэндэрынг, бо экран мае быць абноўленым. У такім выпадку, вы можаце палепшыць прадукцыйнасць, раздзяліўшы блакуючыя сінхроныя абнаўленні (напрыклад, набор тэксту) і неблакуючыя абнаўленні, якія не маюць блакаваць карыстальніцкі інтэрфейс (напрыклад, абнаўленне графіка).
Часам бывае, што нельга прапусціць перарэндэрынг, бо экран мае быць абноўленым. У такім выпадку, вы можаце палепшыць прадукцыйнасць, раздзяліўшы сінхронныя абнаўленні, што блакуюць карыстальніцкі інтэрфейс, (напрыклад, набор тэксту) і абнаўленні, якія не павінны яго блакаваць (напрыклад, абнаўленне графіка).
Для прыярытэтызацыі рэндэрынгу, выкарыстоўвайце адзін з наступных хукаў:
- [`useTransition`](/reference/react/useTransition) дазваляе памеціць пераход стану як неблакуючы і дазваляе іншым абнаўленням перарываць яго.
- [`useDeferredValue`](/reference/react/useDeferredValue) дазваляе адкласці абнаўленне некрытычных часткак інтэрфейса на карысць іншых.
- [`useTransition`](/reference/react/useTransition) дазваляе пазначыць, што пераход стану не блакуе паток і дазваляе іншым абнаўленням перарываць яго.
- [`useDeferredValue`](/reference/react/useDeferredValue) дазваляе адкласці абнаўленне некрытычных часткак інтэрфейсу на карысць іншых.
---
## Хукі рэсурсаў {/*resource-hooks*/}
*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise ці інфармацыю пра тэму з кантэкста.
*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise або інфармацыю пра тэму з кантэксту.
Для атрымання даных з рэсурса, выкарыстоўвайце наступных хук:
Для атрымання даных з рэсурсу, выкарыстоўвайце наступны хук:
- [`use`](/reference/react/use) дазваляе атрымліваць значэнні з такіх рэсурсаў, як [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ці [кантэкст](/learn/passing-data-deeply-with-context).
- [`use`](/reference/react/use) дазваляе атрымліваць значэнні з такіх рэсурсаў, як [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) або [кантэкст](/learn/passing-data-deeply-with-context).
```js
function MessageComponent({ messagePromise }) {
Expand All @@ -126,7 +126,7 @@ function MessageComponent({ messagePromise }) {
## Іншыя хукі {/*other-hooks*/}
Гэтыя хукі болей карыстыя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм.
Гэтыя хукі болей карысныя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм.
- [`useDebugValue`](/reference/react/useDebugValue) дазваляе наладзіць цэтлік, які React DevTools будзе паказваць для вашага хука.
- [`useId`](/reference/react/useId) дазваляе кампаненту атрымаць унікальны ідэнтыфікатар. Звычайна выкарыстоўваецца з API спецыяльных магчымасцяў.
Expand Down

0 comments on commit 333352c

Please sign in to comment.