Skip to content

Commit 85d97d8

Browse files
zubialevichzubialevich
authored
Update index.md
1 parent d78cd66 commit 85d97d8

1 file changed

Lines changed: 18 additions & 159 deletions

File tree

‎src/content/reference/react/index.md‎

Lines changed: 18 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,29 @@
1-
---
2-
<<<<<<< HEAD
3-
title: "Убудаваныя ў React хукі"
4-
---
5-
6-
<Intro>
7-
8-
*Хукі* дазваляюць выкарыстоўваць вам некаторыя магчымасці React у вашых кампанентах. Вы можаце як выкарыстоўваць убудаваныя хукі, так і камбінаваць іх у свае ўласныя. Дадзеная старонка пералічвае ўбудаваныя ў React хукі.
9-
10-
=======
11-
title: React Reference Overview
1+
title: Агляд даведкі па React
122
---
133

144
<Intro>
15-
This section provides detailed reference documentation for working with React.
16-
For an introduction to React, please visit the [Learn](/learn) section.
17-
>>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04
5+
У гэтым раздзеле змяшчаецца падрабязная даведачная дакументацыя па працы з React.
6+
Каб пазнаёміцца з React, наведайце раздзел [Навучанне](/learn).
187
</Intro>
198

20-
Our The React reference documentation is broken down into functional subsections:
21-
22-
<<<<<<< HEAD
23-
## Хукі стану {/*state-hooks*/}
24-
25-
*Стан* дазваляе кампаненту [«запамінаць» даныя, напрыклад, уведзеныя карыстальнікам](/learn/state-a-components-memory). Напрыклад, кампанент з формай можа выкарыстоўваць стан для захавання ўведзеных значэнняў, у той час як кампанент з галерэяй відарысаў можа выкарыстоўваць стан для захавання бягучага выбранага відарыса.
26-
27-
Каб дадаць стан у кампанент, выкарыстоўвайце адзін з дадзеных хукаў:
28-
29-
* [`useState`](/reference/react/useState) задае пераменную стану, якую вы можаце абнаўляць напрамую.
30-
* [`useReducer`](/reference/react/useReducer) задае пераменную стану, логіка абнаўленне якой апісваецца праз [функцыю рэд’юсара](/learn/extracting-state-logic-into-a-reducer).
31-
32-
```js
33-
function ImageGallery() {
34-
const [index, setIndex] = useState(0);
35-
// ...
36-
```
37-
38-
---
39-
40-
## Хукі кантэксту {/*context-hooks*/}
41-
42-
*Кантэкст* дазваляе кампаненту [атрымліваць інфармацыю ад далёкіх бацькоўскіх кампанентаў, не перадаючы яе ў якасці пропсаў](/learn/passing-props-to-a-component). Напрыклад, ваш кампанент верхняга ўзроўню можа перадаваць бягучую тэма інтэрфейсу ўсім даччыным элементам на любым узроўні ўкладзенасці.
43-
44-
* [`useContext`](/reference/react/useContext) чытае і падпісваецца на абнаўленні кантэксту.
45-
46-
```js
47-
function Button() {
48-
const theme = useContext(ThemeContext);
49-
// ...
50-
```
51-
52-
---
53-
54-
## Хукі рэфаў {/*ref-hooks*/}
55-
56-
*Рэфы* дазваляюць кампаненту [ўтрымліваць інфармацыю, якая не выкарыстоўваецца падчас рэндэрынгу](/learn/referencing-values-with-refs), напрыклад: вузлы DOM або ідэнтыфікатары тайм-аўтаў. У адрозненні ад стану, абнаўленне ref не прыводзіць на перарэндэрынгу кампанента. Рэфы — своеасаблівы «пралаз», каб выбрацца з парадыгмы React. Яны карысныя, калі даводзіцца працаваць з не React сістэмамі, напрыклад з API браўзера.
57-
58-
* [`useRef`](/reference/react/useRef) аб’яўляе рэф. Вы можаце захоўваць у ім любыя даныя, але ў большасці выпадкаў у рэфах захоўваюць вузлы DOM.
59-
* [`useImperativeHandle`](/reference/react/useImperativeHandle) дазваляе наладзіць рэф вашага кампанента. Выкарыстоўваецца рэдка.
60-
61-
```js
62-
function Form() {
63-
const inputRef = useRef(null);
64-
// ...
65-
```
66-
67-
---
68-
69-
## Хукі эфектаў {/*effect-hooks*/}
70-
71-
*Эфекты* дазваляюць кампаненту [падключацца і сінхранізавацца са знешнімі сістэмамі](/learn/synchronizing-with-effects). Гэта ўключае ў сябе працу з сеткай, DOM браўзера, анімацыямі, віджэтамі, напісанымі з дапамогай іншых бібліятэк для пабудовы інтэрфейсаў, ці любым іншым не React кодам.
72-
73-
* [`useEffect`](/reference/react/useEffect) падключае кампанент да знешняй сістэмы.
74-
75-
```js
76-
function ChatRoom({ roomId }) {
77-
useEffect(() => {
78-
const connection = createConnection(roomId);
79-
connection.connect();
80-
return () => connection.disconnect();
81-
}, [roomId]);
82-
// ...
83-
```
84-
85-
Эфекты — «пралазы», што дазваляюць выбрацца з парадыгмы React. Не выкарыстоўвайце Эфекты для арганізацыі патокаў даных унутры праграмы. Калі вы не ўзаемадзейнічаеце са знешняй сістэмай, [імаверна, вам не патрэбны эфект.](/learn/you-might-not-need-an-effect)
86-
87-
Існуюць таксама два іншыя варыянты `useEffect`, якія спрацоўваюць у іншы час, яны выкарыстоўваюцца не так часта:
88-
89-
* [`useLayoutEffect`](/reference/react/useLayoutEffect) спрацоўвае перад тым, як браўзер абновіць экран. Можна выкарыстоўваць для вымярэнняў элементаў старонкі.
90-
* [`useInsertionEffect`](/reference/react/useInsertionEffect) спрацоўвае перад тым, як React абновіць DOM. Бібліятэкі могуць выкарыстоўваць яго, каб дынамічна падстаўляць CSS.
91-
92-
---
93-
94-
## Хукі прадукцыйнасці {/*performance-hooks*/}
95-
96-
Для аптымізацыі прадукцыйнасці пры перарэндэрынгу часта прапускаюць выкананне непатрэбнай працы. Напрыклад, вы можаце сказаць React выкарыстоўваць кэшаваныя вынікі вылічэнняў або прапусціць перарэндэрынг, калі даныя не змяніліся з моманту папярэдняга рэндэрынгу.
97-
98-
Каб прапусціць вылічэнні і непатрэбны перарэндэрынг, выкарыстоўвайце наступныя хукі:
99-
100-
- [`useMemo`](/reference/react/useMemo) дазваляе кэшаваць вынік складаных вылічэнняў.
101-
- [`useCallback`](/reference/react/useCallback) дазваляе кэшаваць аб’яўленую функцыю перад тым, як перадаць яе далей у аптымізаваны кампанент.
102-
103-
```js
104-
function TodoList({ todos, tab, theme }) {
105-
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
106-
// ...
107-
}
108-
```
109-
110-
Часам бывае, што нельга прапусціць перарэндэрынг, бо экран мае быць абноўленым. У такім выпадку, вы можаце палепшыць прадукцыйнасць, раздзяліўшы сінхронныя абнаўленні, што блакіруюць карыстальніцкі інтэрфейс, (напрыклад, набор тэксту) і абнаўленні, якія не павінны яго блакіраваць (напрыклад, абнаўленне графіка).
111-
112-
Для прыярытэтызацыі рэндэрынгу, выкарыстоўвайце адзін з наступных хукаў:
113-
114-
- [`useTransition`](/reference/react/useTransition) дазваляе пазначыць, што пераход стану не блакіруе паток і дазваляе іншым абнаўленням перарываць яго.
115-
- [`useDeferredValue`](/reference/react/useDeferredValue) дазваляе адкласці абнаўленне некрытычных часткак інтэрфейсу на карысць іншых.
116-
117-
---
118-
119-
## Хукі рэсурсаў {/*resource-hooks*/}
120-
121-
*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise або інфармацыю пра тэму з кантэксту.
122-
123-
Для атрымання даных з рэсурсу, выкарыстоўвайце наступны хук:
124-
125-
- [`use`](/reference/react/use) дазваляе атрымліваць значэнні з такіх рэсурсаў, як [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) або [кантэкст](/learn/passing-data-deeply-with-context).
126-
127-
```js
128-
function MessageComponent({ messagePromise }) {
129-
const message = use(messagePromise);
130-
const theme = use(ThemeContext);
131-
// ...
132-
}
133-
```
134-
135-
---
136-
137-
## Іншыя хукі {/*other-hooks*/}
138-
139-
Гэтыя хукі болей карысныя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм.
140-
141-
- [`useDebugValue`](/reference/react/useDebugValue) дазваляе наладзіць пазнаку, якую React DevTools будзе паказваць для вашага хука.
142-
- [`useId`](/reference/react/useId) дазваляе кампаненту атрымаць унікальны ідэнтыфікатар. Звычайна выкарыстоўваецца з API спецыяльных магчымасцяў.
143-
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) дазваляе кампаненту падпісацца на знешняе сховішча.
144-
145-
---
146-
147-
## Уласныя хукі {/*your-own-hooks*/}
9+
Наша даведачная дакументацыя па React разбіта на функцыянальныя падраздзелы:
14810

149-
Вы таксама можаце [аб’яўляць свае самастойна створаныя хукі](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) як JavaScript функцыі.
150-
=======
15111
## React {/*react*/}
152-
Programmatic React features:
153-
* [Hooks](/reference/react/hooks) - Use different React features from your components.
154-
* [Components](/reference/react/components) - Documents built-in components that you can use in your JSX.
155-
* [APIs](/reference/react/apis) - APIs that are useful for defining components.
156-
* [Directives](/reference/react/directives) - Provide instructions to bundlers compatible with React Server Components.
12+
Праграмныя функцыі React:
13+
* [Хукі](/reference/react/hooks) - Выкарыстоўвайце розныя функцыі React прама з вашых кампанентаў.
14+
* [Кампаненты](/reference/react/components) - Апісвае ўбудаваныя кампаненты, якія можна выкарыстоўваць у вашым JSX.
15+
* [API](/reference/react/apis) - карысныя API для аб'яўлення кампанентаў.
16+
* [Дырэктывы](/reference/react/directives) - Пазначце інструкцыі для зборшчыкаў сумяшчальных з сервернымі кампанентамі React.
15717

15818
## React DOM {/*react-dom*/}
159-
React-dom contains features that are only supported for web applications
160-
(which run in the browser DOM environment). This section is broken into the following:
19+
React-dom змяшчае функцыі, якія падтрымліваюцца толькі для вэб-праграм
20+
(якія працуюць у DOM асяроддзі браўзера). Гэты раздзел разбіты на наступныя часткі:
16121

162-
* [Hooks](/reference/react-dom/hooks) - Hooks for web applications which run in the browser DOM environment.
163-
* [Components](/reference/react-dom/components) - React supports all of the browser built-in HTML and SVG components.
164-
* [APIs](/reference/react-dom) - The `react-dom` package contains methods supported only in web applications.
165-
* [Client APIs](/reference/react-dom/client) - The `react-dom/client` APIs let you render React components on the client (in the browser).
166-
* [Server APIs](/reference/react-dom/server) - The `react-dom/server` APIs let you render React components to HTML on the server.
22+
* [Хукі](/reference/react-dom/hooks) - Хукі для вэб-праграм, якія працуюць у DOM асяроддзі браўзера.
23+
* [Кампаненты](/reference/react-dom/components) - React падтрымлівае ўсе кампаненты HTML і SVG, убудаваныя ў браўзер.
24+
* [API](/reference/react-dom) - Пакет `react-dom` змяшчае метады, якія падтрымліваюцца толькі ў вэб-праграмах.
25+
* [Кліенцкія API](/reference/react-dom/client) - API з пакета `react-dom/client` дазваляюць рэндэрыць кампаненты React на кліенце (у браўзеры).
26+
* [Серверныя API](/reference/react-dom/server) - API з пакета `react-dom/server` дазваляюць рэндэрыць кампаненты React у HTML на серверы.
16727

168-
## Legacy APIs {/*legacy-apis*/}
169-
* [Legacy APIs](/reference/react/legacy) - Exported from the react package, but not recommended for use in newly written code.
170-
>>>>>>> a8790ca810c1cebd114db35a433b90eb223dbb04
28+
## Устарэлыя API {/*legacy-apis*/}
29+
* [Устарэлыя API](/reference/react/legacy) - API экспартаваныя з пакета React, але не рэкамендуюцца для выкарыстання ў нядаўна напісаным кодзе.

0 commit comments

Comments
 (0)