diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index e91fa9eef..b87abc81a 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -1,43 +1,43 @@ --- id: glossary -title: Glossary of React Terms +title: Словарь терминов React layout: docs category: Reference permalink: docs/glossary.html --- -## Single-page Application {#single-page-application} +## Одностраничное приложение {#single-page-application} -A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded. +Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки. -Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook. -## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc} +Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React и используется в Facebook. -These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions). +## ES6, ES2015, ES2016 и т.д. {#es6-es2015-es2016-etc} -## Compilers {#compilers} +Все эти акронимы относятся к самым последним версиям спецификации стандарта ECMAScript, реализацией которого является язык программирования JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочные функции, классы, шаблонные строки, ключевые слова `let` и `const`. Более подробно о конкретных версиях вы можно узнать [тут](https://ru.wikipedia.org/wiki/ECMAScript). -A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React. +## Компиляторы {#compilers} -## Bundlers {#bundlers} +Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется [Babel](https://babeljs.io/) -Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/). +## Бандлеры {#bundlers} -## Package Managers {#package-managers} +Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимзированы под браузеры. В работе с React чаще всего используются [Webpack](https://webpack.js.org/) и [Browserify](http://browserify.org/). -Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry. +## Менеджер пакетов {#package-managers} -## CDN {#cdn} +Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. [npm](https://www.npmjs.com/) и [Yarn](https://yarnpkg.com/) — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm. -CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe. +## CDN {#cdn} +Сеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кешированный, статический контент через сеть серверов по всему миру. ## JSX {#jsx} -JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html). +JSX — расширение синтаксиса JavaScript. Этот синтаксис выглядит как язык шаблонов, но наделён всеми языковыми возможностями JavaScript. В результате компиляции JSX и вызова `React.createElement()` возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, [обратитесь к соответствующему разделу документации](/docs/introducing-jsx.html), а более подробную информацию про JSX вы можете найти [здесь](/docs/jsx-in-depth.html). -React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript: +React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов. Например, в JSX атрибут `tabindex` станет `tabIndex`. В то время как атрибут `class` записывается как `className`, поскольку слово `class` уже зарезервировано в JavaScript: ```js const name = 'Clementine'; @@ -47,19 +47,19 @@ ReactDOM.render( ); ``` -## [Elements](/docs/rendering-elements.html) {#elements} - -React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable. +## [Элементы](/docs/rendering-elements.html) {#elements} +React-элементы — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличие от компонента, элемент описывает то, что вы хотите увидеть на экране. React-элементы иммутабельны. ```js const element =

Hello, world

; ``` -Typically, elements are not used directly, but get returned from components. +Обычно, элементы не используются напрямую, а возвращаются компонентами. -## [Components](/docs/components-and-props.html) {#components} +## [Компоненты](/docs/components-and-props.html) {#components} -React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element: +React-компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице. +Самый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React: ```js function Welcome(props) { @@ -67,7 +67,7 @@ function Welcome(props) { } ``` -Components can also be ES6 classes: +Компоненты могуть быть классами ES6: ```js class Welcome extends React.Component { @@ -77,30 +77,29 @@ class Welcome extends React.Component { } ``` -Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`` **not** ``). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components. +Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинатся с заглавной буквы (``, а **не** ``). За более детальной информацией о рендеринге компонентов [обратитесь к соответствующему разделу документации](/docs/components-and-props.html#rendering-a-component). ### [`props`](/docs/components-and-props.html) {#props} -`props` are inputs to a React component. They are data passed down from a parent component to a child component. +`props` (пропсы) — это входные данные React-компонентов, передаваемые от родительского компонента дочернему компоненту. -Remember that `props` are readonly. They should not be modified in any way: +Помните, `props` предназначены только для чтения. Ни в каком случае их не следует изменять: ```js -// Wrong! +// Неправильно! props.number = 42; ``` - -If you need to modify some value in response to user input or a network response, use `state` instead. +Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера, используйте `state` (состояние). ### `props.children` {#propschildren} -`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example: +В любом компоненте доступны `props.children`. Это контент между открывающим и закрывающим тегом компонента. Например: ```js Hello world! ``` -The string `Hello world!` is available in `props.children` in the `Welcome` component: +Строка `Hello world!` доступна в `props.children` в компоненте `Welcome`: ```js function Welcome(props) { @@ -108,7 +107,7 @@ function Welcome(props) { } ``` -For components defined as classes, use `this.props.children`: +Для классовых компонентов используйте `this.props.children`: ```js class Welcome extends React.Component { @@ -120,47 +119,53 @@ class Welcome extends React.Component { ### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} -A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. +Компонент нуждается в `state`, когда данные в нём со временем изменяются. Например, компоненту `Checkbox` может понадобится состояние `isChecked`, а компоненту `NewsFeed` необходимо отслеживать посты при помощи состояния `fetchedPosts`. + +Самая большая разница между `state` и `props` состоит в том, что `props` передаются от родителя потомку, а `state` управляется самим компонентом. Компонент не может воздействовать на `props`, но может изменять `state`. Для этого он должен вызвать `this.setState()`. Только классовые компоненты могут иметь состояние. + + +Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «управляет» изменением состояния. Не пытайтесь синхронизировать состояния двух разных компонентов. Вместо этого [поднимите оба этих состояния](/docs/lifting-state-up.html) до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам. + +## [Методы жизненного цикла](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} + +Методы жизненного цикла — это настраиваемые функции, которые выполняются на различных этапах жизни компонента. Существуют специальные методы для первоначального рендеринга компонента в DOM ([монтирование](/docs/react-component.html#mounting)), его обновления, размонтирования и удаления. + -The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state. + ## [Контролируемые](/docs/forms.html#controlled-components) и [неконтролируемые компоненты](/docs/uncontrolled-components.html) -For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. +В React существует два различных подхода для управления формами. -## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} +Элемент формы input, управляемый React — это *контролируемый компонент*. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновленныем значением). Если повторный рендеринг не происходит, элемент формы остаётся без изменений. -Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM. +*Неконтролируемый компонент* работает как обычный элемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т.д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены. - ## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html) +В большинстве случаев вам следует использовать управляемые компоненты. -React has two different approaches to dealing with form inputs. -An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged. +## [Ключи](/docs/lists-and-keys.html) {#keys} -An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value. +«Ключ» – это специальный строковый атрибут, который нужно указывать при создании списка элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени. -In most cases you should use controlled components. +Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всём приложении или даже в общем компоненте. -## [Keys](/docs/lists-and-keys.html) {#keys} -A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity. +Не используйте что-либо наподобие `Math.random()` как ключи. Необходимо создавать для ключей «стабильные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или переупорядочены. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, например `post.id`. -Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component. +## [Рефы](/docs/refs-and-the-dom.html) {#refs} -Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`. +React поддерживает особый атрибут, который можно прикрепить к любому компоненту. Атрибут `ref` может быть объектом, созданным при помощи [функции `React.createRef()`](/docs/react-api.html#reactcreateref) или колбэком, либо же строкой (устаревшее API). Когда в роли атрибута `ref` выступает колбэк, функция получает DOM-элемент, лежащий в основе компонента, или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента. -## [Refs](/docs/refs-and-the-dom.html) {#refs} +Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь с [нисходящим потоком данных](/docs/lifting-state-up.html). -React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance. -Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html). -## [Events](/docs/handling-events.html) {#events} +## [События](/docs/handling-events.html) {#events} -Handling events with React elements has some syntactic differences: +Обработка событий в React-элементах имеет некоторые синтактические особенности: -* React event handlers are named using camelCase, rather than lowercase. -* With JSX you pass a function as the event handler, rather than a string. +* Обработчики событий в React именуются в стиле camelCase вместо нижнего регистра. +* С JSX вы передаёте функцию как обработчик события вместо строки. -## [Reconciliation](/docs/reconciliation.html) {#reconciliation} +## [Согласование](/docs/reconciliation.html) {#reconciliation} -When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation". +Когда пропсы или состояние компонента изменяются, React сравнивает нововозвращённый и предыдущий отрендеренные элементы, и решает нужно ли обновлять DOM. Этот процесс называется «согласование» (reconciliation).