From 6b78f7813fbe56fa1c8651a42def2c2a928a597e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Fri, 13 Oct 2023 22:51:22 +0300 Subject: [PATCH 1/6] reference/hooks/index translation --- src/content/reference/react/index.md | 82 ++++++++++++++-------------- src/sidebarReference.json | 2 +- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index cec71ce8..8a8a3e89 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -1,23 +1,23 @@ --- -title: "Built-in React Hooks" +title: "Убудаваныя ў React хукі" --- -*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React. +*Хукі* дазваляюць выкарыстоўваць вам некаторыя магчымасці React у вашых кампанентах. Вы можаце як выкарыстоўваць убудаваня хукі, так і камбінаваць іх у свае ўласныя. Дадзеная старонка пералічвае ўбудаваныя ў React хукі. --- -## State Hooks {/*state-hooks*/} +## Хукі стану {/*state-hooks*/} -*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index. +*Стан* дазваляе кампаненту [«запамінаць» даныя, напрыклад уведзеныя карыстальнікам](/learn/state-a-components-memory). Напрыклад, кампанент з формай можа выкарыстоўваць стан для захавання уведзеных значэнняў, у свой жа час кампанент з галерэяй відарысаў можа выкарыстоўваць стан для захавання бягучага выбранага відарыс. -To add state to a component, use one of these Hooks: +Каб дадаць стан у кампанент, выкарыстоўвайце адзін з дадзеных хукаў: -* [`useState`](/reference/react/useState) declares a state variable that you can update directly. -* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer) +* [`useState`](/reference/react/useState) задае парменную стану, яку вы можаце абнаўляць напрамую. +* [`useReducer`](/reference/react/useReducer) задае пераменную стану, логіка абнаўленне якой апісваецца праз [функцыю рэд’юсара](/learn/extracting-state-logic-into-a-reducer). ```js function ImageGallery() { @@ -27,11 +27,11 @@ function ImageGallery() { --- -## Context Hooks {/*context-hooks*/} +## Хукі кантэксту {/*context-hooks*/} -*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep. +*Кантэкст* дазваляе кампаненту [атрымліваць інфармацыю ад далёкіх бацькоўскіх кампанентаў, не перадаючы яе ў якасці пропсаў](/learn/passing-props-to-a-component). Напрыклад, ваш кампанент верхняга ўзроўню можа перадаваць бягучую тэма інтэрфейса ўсім даччыным элементам на любым узроўні ўкладзенасці. -* [`useContext`](/reference/react/useContext) reads and subscribes to a context. +* [`useContext`](/reference/react/useContext) чытае і падпісваецца на абнаўленні кантэкста. ```js function Button() { @@ -41,12 +41,12 @@ function Button() { --- -## Ref Hooks {/*ref-hooks*/} +## Хукі рэфаў {/*ref-hooks*/} -*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs. +*Рэфы* дазваляюць кампаненту [ўтрымліваць інфармацыію, якая не выкарыстоўваецца падчас рэндэрынгу](/learn/referencing-values-with-refs), напрыклад: вузлы DOM ці ідэнтыфікатары тайм-аўтаў. У адрозненні ад стану, абнаўленне ref не прыводзіць на перарэндэрынгу кампанента. Рэфы — сваеасаблівая «лазейка», каб выбрацца з парадыгмы React. Яны карыстыя, калі даводзіцца працаваць з не React сістэмамі, напрыклад з API браўзера. -* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node. -* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used. +* [`useRef`](/reference/react/useRef) аб’яўляе рэф. Вы можаце захоўваць у іх любыя даныя, але ў большасці выпадкаў у іх захоўваюць вузлы DOM. +* [`useImperativeHandle`](/reference/react/useImperativeHandle) дазваляе наладзіць рэф вашага кампанента. Выкарыстоўваецца рэдка. ```js function Form() { @@ -56,11 +56,11 @@ function Form() { --- -## Effect Hooks {/*effect-hooks*/} +## Хукі эфектаў {/*effect-hooks*/} -*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code. +*Эфекты* дазваляюць кампаненту [падлучацца і сінхранізавацца са знешнімі сістэмамі](/learn/synchronizing-with-effects). Гэта ўключае ў сябе працу з сеткай, DOM браўзера, анімацыямі, віджэтамі, напісанымі з дапамогай іншых бібліятэк для пабудовы інтэрфейсаў, ці любым іншым не React кодам. -* [`useEffect`](/reference/react/useEffect) connects a component to an external system. +* [`useEffect`](/reference/react/useEffect) падлучае кампанент да хнейшняй сістэмы. ```js function ChatRoom({ roomId }) { @@ -72,23 +72,23 @@ function ChatRoom({ roomId }) { // ... ``` -Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +Эфекты — «лазейкі», што дазваляюць выбрацца з парадыгмы React. Не выкарыстоўвайце Эфекты для арганізацыі патокаў даных унутры праграмы. Калі вы не ўзаемадзейнічаеце са знешняй сістэма, [імаверна, вам не патрэбны эфект.](/learn/you-might-not-need-an-effect) -There are two rarely used variations of `useEffect` with differences in timing: +Існуюць таксама два іншыя варыянты `useEffect`, якія спрацоўваюць у іншы час, яны выкарыстоўваюцца не так часта: -* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) спрацоўвае перад тым, як браўзер абновіць экран. Можна выкарыстоўваць для вымярэнняў элементаў старонкі. +* [`useInsertionEffect`](/reference/react/useInsertionEffect) спрацоўвае перад тым, як React абновіць DOM. Бібліятэкі могуць выкарыстоўваць, каб дынамічна падстаўляць CSS. --- -## Performance Hooks {/*performance-hooks*/} +## Хукі прадукцыйнасці {/*performance-hooks*/} -A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render. +Для аптымізацыі прадукцыйнасці пры перарэндэрынгу часта прапускаюць выкананне непатрэбнай працы. напрыклад, вы можаце сказаць React каб выкарыстоўваў кэшаваныя вынікі вылічэнняў ці прапусціць перарэндэрынг, калі даныя не змяніліся ад папярэдняга рэндэрынгу. -To skip calculations and unnecessary re-rendering, use one of these Hooks: +Кадб прапусціць вылічэнні і непатрэбны перарэндэрынг, выкарыстоўвайце наступныя хукі: -- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation. -- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component. +- [`useMemo`](/reference/react/useMemo) дазваляе кэшаваць вынік складаных вылічэнняў. +- [`useCallback`](/reference/react/useCallback) дазваляе кэшаваць аб’яўленую функцыю перад тым, як перадаць яе далей у аптымізаваны кампанент. ```js function TodoList({ todos, tab, theme }) { @@ -97,22 +97,22 @@ function TodoList({ todos, tab, theme }) { } ``` -Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart). +Часам бывае, што нельга прапусціць рэрэндэрынг, бо экран мае быць абноўленым. У такім выпадку, вы можаце палепшыць прадукцыйнасць, раздзяліўшы блакуючыя сінхроныя абнаўленні (напрыклад, набор тэксту) і неблакуючыя абнаўленні, якія не маюць блакаваць карыстальніцкі інтэрфейс (напрыклад, абнаўленне графіка). -To prioritize rendering, use one of these Hooks: +Для прыярытэтызацыі рэндэрынгу, выкарыстоўвайце адзін з наступных хукаў: -- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it. -- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first. +- [`useTransition`](/reference/react/useTransition) дазваляе памеціць пераход стану як неблакуючы і дазваляе іншым абнаўленням перарываць яго. +- [`useDeferredValue`](/reference/react/useDeferredValue) дазваляе адкласці абнаўленне некрытычных часткак інтэрфейса на карысць іншых. --- -## Resource Hooks {/*resource-hooks*/} +## Хукі рэсурсаў {/*resource-hooks*/} -*Resources* can be accessed by a component without having them as part of their state. For example, a component can read a message from a Promise or read styling information from a context. +*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise ці інфармацыю пра тэму з кантэкста. -To read a value from a resource, use this Hook: +Для атрымання даных з рэсурса, выкарыстоўвайце наступных хук: -- [`use`](/reference/react/use) lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/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 }) { @@ -124,16 +124,16 @@ function MessageComponent({ messagePromise }) { --- -## Other Hooks {/*other-hooks*/} +## Іншыя хукі {/*other-hooks*/} -These Hooks are mostly useful to library authors and aren't commonly used in the application code. +Гэтыя хукі болей карыстыя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм. -- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. -- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. +- [`useDebugValue`](/reference/react/useDebugValue) дазваляе наладзіць цэтлік, які React DevTools будзе паказваць для вашага хука. +- [`useId`](/reference/react/useId) дазваляе кампаненту атрымаць унікальны ідэнтыфікатар. Звычайна выкарыстоўваецца з API спецыяльных магчымасцяў. +- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) дазваляе кампаненту падпісацца на знешняе сховішча. --- -## Your own Hooks {/*your-own-hooks*/} +## Уласныя хукі {/*your-own-hooks*/} -You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions. +Вы таксама можаце [аб’яўляць свае самастойна створаныя хукі](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) як JavaScript функцыі. diff --git a/src/sidebarReference.json b/src/sidebarReference.json index d1de3062..fcaa0948 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -7,7 +7,7 @@ "sectionHeader": "react@18.2.0" }, { - "title": "Hooks", + "title": "Хукі", "path": "/reference/react", "routes": [ { From 333352caf2978ecc658e8524f949c961862b9e00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sat, 14 Oct 2023 21:05:23 +0300 Subject: [PATCH 2/6] fixes --- src/content/reference/react/index.md | 40 ++++++++++++++-------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 8a8a3e89..17ee2bae 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -4,7 +4,7 @@ title: "Убудаваныя ў React хукі" -*Хукі* дазваляюць выкарыстоўваць вам некаторыя магчымасці React у вашых кампанентах. Вы можаце як выкарыстоўваць убудаваня хукі, так і камбінаваць іх у свае ўласныя. Дадзеная старонка пералічвае ўбудаваныя ў React хукі. +*Хукі* дазваляюць выкарыстоўваць вам некаторыя магчымасці React у вашых кампанентах. Вы можаце як выкарыстоўваць убудаваныя хукі, так і камбінаваць іх у свае ўласныя. Дадзеная старонка пералічвае ўбудаваныя ў React хукі. @@ -12,11 +12,11 @@ title: "Убудаваныя ў React хукі" ## Хукі стану {/*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 @@ -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() { @@ -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 @@ -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 }) { @@ -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) дазваляе кэшаваць аб’яўленую функцыю перад тым, як перадаць яе далей у аптымізаваны кампанент. @@ -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 }) { @@ -126,7 +126,7 @@ function MessageComponent({ messagePromise }) { ## Іншыя хукі {/*other-hooks*/} -Гэтыя хукі болей карыстыя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм. +Гэтыя хукі болей карысныя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм. - [`useDebugValue`](/reference/react/useDebugValue) дазваляе наладзіць цэтлік, які React DevTools будзе паказваць для вашага хука. - [`useId`](/reference/react/useId) дазваляе кампаненту атрымаць унікальны ідэнтыфікатар. Звычайна выкарыстоўваецца з API спецыяльных магчымасцяў. From 62c6a79512ae23054f882f0fd30c84ef00c7f629 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sat, 14 Oct 2023 21:20:04 +0300 Subject: [PATCH 3/6] label --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 17ee2bae..afee3f3b 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -128,7 +128,7 @@ function MessageComponent({ messagePromise }) { Гэтыя хукі болей карысныя аўтарам бібліятэк і не часта выкарыстоўваюцца ў кодзе праграм. -- [`useDebugValue`](/reference/react/useDebugValue) дазваляе наладзіць цэтлік, які React DevTools будзе паказваць для вашага хука. +- [`useDebugValue`](/reference/react/useDebugValue) дазваляе наладзіць пазнаку, якую React DevTools будзе паказваць для вашага хука. - [`useId`](/reference/react/useId) дазваляе кампаненту атрымаць унікальны ідэнтыфікатар. Звычайна выкарыстоўваецца з API спецыяльных магчымасцяў. - [`useSyncExternalStore`](/reference/react/useSyncExternalStore) дазваляе кампаненту падпісацца на знешняе сховішча. From f7f01cda08afa05e1aff7149d3ea5b3f333156b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sun, 15 Oct 2023 00:27:08 +0300 Subject: [PATCH 4/6] A little fix --- src/content/reference/react/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index afee3f3b..a9ed31a9 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -12,7 +12,7 @@ title: "Убудаваныя ў React хукі" ## Хукі стану {/*state-hooks*/} -*Стан* дазваляе кампаненту [«запамінаць» даныя, напрыклад уведзеныя карыстальнікам](/learn/state-a-components-memory). Напрыклад, кампанент з формай можа выкарыстоўваць стан для захавання ўведзеных значэнняў, у свой жа час кампанент з галерэяй відарысаў можа выкарыстоўваць стан для захавання бягучага выбранага відарыс. +*Стан* дазваляе кампаненту [«запамінаць» даныя, напрыклад, уведзеныя карыстальнікам](/learn/state-a-components-memory). Напрыклад, кампанент з формай можа выкарыстоўваць стан для захавання ўведзеных значэнняў, у той час як кампанент з галерэяй відарысаў можа выкарыстоўваць стан для захавання бягучага выбранага відарыса. Каб дадаць стан у кампанент, выкарыстоўвайце адзін з дадзеных хукаў: From 013c6b248bb84f57721707463d8594e0662a42d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Mon, 16 Oct 2023 05:20:22 +0300 Subject: [PATCH 5/6] Some other fixes --- src/content/reference/react/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index a9ed31a9..83848548 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -43,7 +43,7 @@ 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. * [`useImperativeHandle`](/reference/react/useImperativeHandle) дазваляе наладзіць рэф вашага кампанента. Выкарыстоўваецца рэдка. @@ -108,7 +108,7 @@ function TodoList({ todos, tab, theme }) { ## Хукі рэсурсаў {/*resource-hooks*/} -*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise або інфармацыю пра тэму з кантэксту. +*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise або інфармацыю пра тэму з кантэкста. Для атрымання даных з рэсурсу, выкарыстоўвайце наступны хук: From da844b376bbf7e1cd8b85a717a4fcae5ae079937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Mon, 16 Oct 2023 12:20:43 +0300 Subject: [PATCH 6/6] other fixes --- src/content/reference/react/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 83848548..ed2361cc 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -60,7 +60,7 @@ function Form() { *Эфекты* дазваляюць кампаненту [падключацца і сінхранізавацца са знешнімі сістэмамі](/learn/synchronizing-with-effects). Гэта ўключае ў сябе працу з сеткай, DOM браўзера, анімацыямі, віджэтамі, напісанымі з дапамогай іншых бібліятэк для пабудовы інтэрфейсаў, ці любым іншым не React кодам. -* [`useEffect`](/reference/react/useEffect) падключае кампанент да знейшняй сістэмы. +* [`useEffect`](/reference/react/useEffect) падключае кампанент да знешняй сістэмы. ```js function ChatRoom({ roomId }) { @@ -97,18 +97,18 @@ function TodoList({ todos, tab, theme }) { } ``` -Часам бывае, што нельга прапусціць перарэндэрынг, бо экран мае быць абноўленым. У такім выпадку, вы можаце палепшыць прадукцыйнасць, раздзяліўшы сінхронныя абнаўленні, што блакуюць карыстальніцкі інтэрфейс, (напрыклад, набор тэксту) і абнаўленні, якія не павінны яго блакаваць (напрыклад, абнаўленне графіка). +Часам бывае, што нельга прапусціць перарэндэрынг, бо экран мае быць абноўленым. У такім выпадку, вы можаце палепшыць прадукцыйнасць, раздзяліўшы сінхронныя абнаўленні, што блакіруюць карыстальніцкі інтэрфейс, (напрыклад, набор тэксту) і абнаўленні, якія не павінны яго блакіраваць (напрыклад, абнаўленне графіка). Для прыярытэтызацыі рэндэрынгу, выкарыстоўвайце адзін з наступных хукаў: -- [`useTransition`](/reference/react/useTransition) дазваляе пазначыць, што пераход стану не блакуе паток і дазваляе іншым абнаўленням перарываць яго. +- [`useTransition`](/reference/react/useTransition) дазваляе пазначыць, што пераход стану не блакіруе паток і дазваляе іншым абнаўленням перарываць яго. - [`useDeferredValue`](/reference/react/useDeferredValue) дазваляе адкласці абнаўленне некрытычных часткак інтэрфейсу на карысць іншых. --- ## Хукі рэсурсаў {/*resource-hooks*/} -*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise або інфармацыю пра тэму з кантэкста. +*Рэсурсы* — штосьці, да чаго кампаненты могуць атрымаць доступ, не маючы іх як частку ўласнага стану. Напрыклад, кампанент можа прачытаць паведамленне з Promise або інфармацыю пра тэму з кантэксту. Для атрымання даных з рэсурсу, выкарыстоўвайце наступны хук: