From e0d32ae14db31a584a63ef8d1083d060d92d3e15 Mon Sep 17 00:00:00 2001 From: Azat Ayupov Date: Mon, 18 Feb 2019 10:48:45 +0500 Subject: [PATCH 01/66] add translate for render-props --- content/docs/render-props.md | 96 ++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index c9b6f9c04..7b1ac4be7 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -1,12 +1,12 @@ --- id: render-props -title: Render Props +title: Рендер Пропсы permalink: docs/render-props.html --- -The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a technique for sharing code between React components using a prop whose value is a function. +Термин ["рендер пропс"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) означает возможность делиться кодом между компонентами реакта где функция может выступить в качестве значения пропа -A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. +Компонент с рендер-пропсом берёт функцию, которую возвращает реакт элемент, и вызывает её вместо собственного рендера. ```jsx ( @@ -14,15 +14,15 @@ A component with a render prop takes a function that returns a React element and )}/> ``` -Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift). +Библиотеками, использующий такой подход, являются [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) и [Downshift](https://github.com/paypal/downshift). -In this document, we’ll discuss why render props are useful, and how to write your own. +В этой статье мы покажем почему рендер-пропс полезен и как написать свой. -## Use Render Props for Cross-Cutting Concerns {#use-render-props-for-cross-cutting-concerns} +## Использование рендер-пропса для сквозных задач {#use-render-props-for-cross-cutting-concerns} -Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state. +Компоненты это основа реиспользования кода в реакте, но не всегда очевидно как использовать совместно состояние или поведение. Которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. -For example, the following component tracks the mouse position in a web app: +Например, следующий компонент отслеживает положение мыши в веб-приложении: ```js class MouseTracker extends React.Component { @@ -50,14 +50,14 @@ class MouseTracker extends React.Component { } ``` -As the cursor moves around the screen, the component displays its (x, y) coordinates in a `

`. +Когда курсор перемещается по экрану, компонент отображает (x, y) координаты внутри `

`. -Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component? +Теперь вопрос: Как мы можем повторно использовать поведение в другом компоненте? Другими словами, если другому компоненту необходимо знать о позиции курсора, сможем ли мы инкапсулировать это поведение, чтобы мы могли легко поделиться им с этим компонентом? -Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `` component that encapsulates the behavior we need to reuse elsewhere. +Поскольку компоненты являются основой реиспользования кода в реакте, давай попробуем немного отрефакторить код используя внутри `` который инкапсулирует поведение, которое мы сможем реиспользовать где угодно. ```js -// The component encapsulates the behavior we need... +// компонент инкапсулирует поведение, которое нам необходимо... class Mouse extends React.Component { constructor(props) { super(props); @@ -76,7 +76,7 @@ class Mouse extends React.Component { return (

- {/* ...but how do we render something other than a

? */} + {/* ...но как мы можем отрендерить нечто большее чем

? */}

The current mouse position is ({this.state.x}, {this.state.y})

); @@ -95,11 +95,11 @@ class MouseTracker extends React.Component { } ``` -Now the `` component encapsulates all behavior associated with listening for `mousemove` events and storing the (x, y) position of the cursor, but it's not yet truly reusable. +Теперь `` компонент инкапсулирует все поведения, связанные с прослушиванием событий `mousemove` и сохранением позиций (x, y) курсора, правда пока без реиспользования. -For example, let's say we have a `` component that renders the image of a cat chasing the mouse around the screen. We might use a `` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen. +Например, допустим у нас есть `` компонент, который отображает изображение кошки, преследующей мышь по экрану. Мы можем использовать `` проп, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. -As a first pass, you might try rendering the `` *inside ``'s `render` method*, like this: +Для начала, вы можете отрендерить `` внутри `` `render`а, похожее на это: ```js class Cat extends React.Component { @@ -130,10 +130,10 @@ class MouseWithCat extends React.Component {
{/* - We could just swap out the

for a here ... but then - we would need to create a separate - component every time we need to use it, so - isn't really reusable yet. + Мы могли бы просто поменять

на здесь ... но тогда + нам нужно создать отдельный компонент + каждый раз когда он нужен нам, поэтому + пока что нельзя реиспользовать. */}

@@ -153,9 +153,9 @@ class MouseTracker extends React.Component { } ``` -This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another ``) that renders something specifically for that use case. +Этот подход будет работать для конкретного кейса, но мы не достигли основной цели — инкапсулировать поведение с возможностью реиспользования. Теперь, каждый раз когда мы хотим получить позицию мыши для разных кейсов, мы создаем новый компонент (т.е. другой экземпляр ``), который рендерит специально для этого кейса. -Here's where the render prop comes in: Instead of hard-coding a `` inside a `` component, and effectively changing its rendered output, we can provide `` with a function prop that it uses to dynamically determine what to render–a render prop. +Вот здесь рендер-пропс нам и понадобится: Вместо хардкода `` внутри `` компонента, и трудозатратных изменений на выводе рендера, мы предоставляем `` функцию в качестве пропа, с которой мы используем динамическое определение того, что нужно передавать в рендер-пропс. ```js class Cat extends React.Component { @@ -186,8 +186,8 @@ class Mouse extends React.Component {
{/* - Instead of providing a static representation of what renders, - use the `render` prop to dynamically determine what to render. + Вместо статического представления того, что отображает , + используем `render` пропс для динамического определения визуализации. */} {this.props.render(this.state)}
@@ -209,17 +209,17 @@ class MouseTracker extends React.Component { } ``` -Now, instead of effectively cloning the `` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `` can use to dynamically determine what it renders. +Теперь, вместо того, чтобы трудозатратно клонировать `` компонент и хардкодить что-нибудь еще в `render` методе, для решения индивидуального кейса, мы предоставляем `render` пропс этой ``, который может динамически определить что рендерить. -More concretely, **a render prop is a function prop that a component uses to know what to render.** +Более конкретно, **рендер-пропс это функция, которая даёт понять компоненту что необходимо рендерить.** -This technique makes the behavior that we need to share extremely portable. To get that behavior, render a `` with a `render` prop that tells it what to render with the current (x, y) of the cursor. +Эта техника позволяет делать максимально реиспользуемые поведения. Чтобы получить такое поведение, отрисуйте `` вместе с `render` пропсом, который сообщит ему где отрендерить курсор с текущим положением (x, y). -One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `` component, you could easily create one using a regular `` with a render prop: +Один интересный момент касательно рендер-пропсов то, что вы можете реализовать большинство [higher-order components](/docs/higher-order-components.html) (HOC), используя обычный компонент вместе с рендер-пропсом. Например, если для вас предпочтительней `withMouse` HOC вместо `` компонента, вы можете просто создать один используемый обычный `` компонент вместе с рендер-пропсом: ```js -// If you really want a HOC for some reason, you can easily -// create one using a regular component with a render prop! +// Если вам действительно необходим HOC по некоторым причинам, вы можете просто +// создать один обычный компонент с рендер-пропсом! function withMouse(Component) { return class extends React.Component { render() { @@ -233,13 +233,13 @@ function withMouse(Component) { } ``` -So using a render prop makes it possible to use either pattern. +Таким образом, использование рендер-пропса позволяет использовать любой паттерн. -## Using Props Other Than `render` {#using-props-other-than-render} +## Использование пропов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} -It's important to remember that just because the pattern is called "render props" you don't *have to use a prop named `render` to use this pattern*. In fact, [*any* prop that is a function that a component uses to know what to render is technically a "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). +Важно запомнить, что только потому, что этот паттерн называется "рендер-пропс", не означает, что при использования этого паттерна *у вас не должен быть обязательно, проп с названием `render`*. По факту, [*любой* пропс, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является "рендер пропсом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). -Although the examples above use `render`, we could just as easily use the `children` prop! +Несмотря на то, что в вышеприведенных примерах мы используем `рендер`, мы можем также легко использовать `чилдрен` пропс! ```js ( @@ -247,7 +247,7 @@ Although the examples above use `render`, we could just as easily use the `child )}/> ``` -And remember, the `children` prop doesn't actually need to be named in the list of "attributes" in your JSX element. Instead, you can put it directly *inside* the element! +И запомните, `чилдрен` проп не обязательно именовать в списке "атрибутов" вашего JSX элемента. Вместо этого, вы можете положить прямо *внутри* этого элемента! ```js @@ -257,9 +257,9 @@ And remember, the `children` prop doesn't actually need to be named in the list ``` -You'll see this technique used in the [react-motion](https://github.com/chenglou/react-motion) API. +Вы увидите, что эта техника используется в [react-motion](https://github.com/chenglou/react-motion) API. -Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this. +Поскольку этот метод не совсем обычен, вы, вероятно, захотите явно указать, что `чилдрен` должен быть функцией в вашем `проптайпс` при разработке такого API. ```js Mouse.propTypes = { @@ -269,15 +269,15 @@ Mouse.propTypes = { ## Caveats {#caveats} -### Be careful when using Render Props with React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} +### Будьте осторожны при использовании рендер-пропс вместе с React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} -Using a render prop can negate the advantage that comes from using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) if you create the function inside a `render` method. This is because the shallow prop comparison will always return `false` for new props, and each `render` in this case will generate a new value for the render prop. +Использование рендер проса может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых свойств пропсов, и каждый `render` будет генерировать новое значение для рендер-пропса. -For example, continuing with our `` component from above, if `Mouse` were to extend `React.PureComponent` instead of `React.Component`, our example would look like this: +Например, в продолжении нашего `` компонента упомянутого выше, если `Mouse` наследуется от `React.PureComponent` вместо `React.Component`, наш пример будет выглядеть следующим образом: ```js class Mouse extends React.PureComponent { - // Same implementation as above... + // Та же реализация что и упомянутая выше... } class MouseTracker extends React.Component { @@ -287,8 +287,8 @@ class MouseTracker extends React.Component {

Move the mouse around!

{/* - This is bad! The value of the `render` prop will - be different on each render. + Это плохо! Значение `render` пропса будет + разной на каждом рендере. */} ( @@ -299,14 +299,14 @@ class MouseTracker extends React.Component { } ``` -In this example, each time `` renders, it generates a new function as the value of the `` prop, thus negating the effect of `` extending `React.PureComponent` in the first place! +В этом примере, каждый раз при рендере ``, это сгенерирует новую функцию в качестве значения `` пропса, тем самым сводя на нет эффект `` наследующий `React.PureComponent` в первую очередь! -To get around this problem, you can sometimes define the prop as an instance method, like so: +Чтобы обойти эту проблему, вы можете иногда определить проп как метод экземляра, вроде этого: ```js class MouseTracker extends React.Component { - // Defined as an instance method, `this.renderTheCat` always - // refers to *same* function when we use it in render + // Определяем как метод экземпляра, `this.renderTheCat` всегда + // ссылается на *такую* же функцию когда мы используем её в рендере renderTheCat(mouse) { return ; } @@ -322,4 +322,4 @@ class MouseTracker extends React.Component { } ``` -In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) `` should extend `React.Component` instead. +В случаях, когда вы не можете определить проп статически (например потому что вам необходимо закрыть остальные пропсы и/или стейты) `` должен наследоваться от `React.Component`. From c8a6d0560acdd63b17cf888c3045ddcb07041966 Mon Sep 17 00:00:00 2001 From: Azat Ayupov Date: Mon, 18 Feb 2019 10:57:51 +0500 Subject: [PATCH 02/66] add word fix for render-props --- content/docs/render-props.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 7b1ac4be7..09e07c8f2 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -4,7 +4,7 @@ title: Рендер Пропсы permalink: docs/render-props.html --- -Термин ["рендер пропс"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) означает возможность делиться кодом между компонентами реакта где функция может выступить в качестве значения пропа +Термин ["рендер пропс"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) это возможность делиться кодом между компонентами реакта где функция может выступить в качестве значения пропа Компонент с рендер-пропсом берёт функцию, которую возвращает реакт элемент, и вызывает её вместо собственного рендера. @@ -20,7 +20,7 @@ permalink: docs/render-props.html ## Использование рендер-пропса для сквозных задач {#use-render-props-for-cross-cutting-concerns} -Компоненты это основа реиспользования кода в реакте, но не всегда очевидно как использовать совместно состояние или поведение. Которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. +Компоненты это основа реиспользования кода в реакте, но не всегда очевидно как использовать совместно состояние или поведение, которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. Например, следующий компонент отслеживает положение мыши в веб-приложении: @@ -95,7 +95,7 @@ class MouseTracker extends React.Component { } ``` -Теперь `` компонент инкапсулирует все поведения, связанные с прослушиванием событий `mousemove` и сохранением позиций (x, y) курсора, правда пока без реиспользования. +Теперь `` компонент инкапсулирует все поведения, связанные с прослушиванием событий `mousemove` и хранением позиций (x, y) курсора, правда пока без реиспользования. Например, допустим у нас есть `` компонент, который отображает изображение кошки, преследующей мышь по экрану. Мы можем использовать `` проп, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. @@ -237,7 +237,7 @@ function withMouse(Component) { ## Использование пропов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} -Важно запомнить, что только потому, что этот паттерн называется "рендер-пропс", не означает, что при использования этого паттерна *у вас не должен быть обязательно, проп с названием `render`*. По факту, [*любой* пропс, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является "рендер пропсом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). +Важно запомнить, что только потому, что этот паттерн называется "рендер-пропс", не означает, что при использования этого паттерна *у вас должен быть обязательно, проп с названием `render`*. По факту, [*любой* пропс, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является "рендер пропсом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). Несмотря на то, что в вышеприведенных примерах мы используем `рендер`, мы можем также легко использовать `чилдрен` пропс! @@ -271,7 +271,7 @@ Mouse.propTypes = { ### Будьте осторожны при использовании рендер-пропс вместе с React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} -Использование рендер проса может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых свойств пропсов, и каждый `render` будет генерировать новое значение для рендер-пропса. +Использование рендер-пропса может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых свойств пропсов, и каждый `render` будет генерировать новое значение для рендер-пропса. Например, в продолжении нашего `` компонента упомянутого выше, если `Mouse` наследуется от `React.PureComponent` вместо `React.Component`, наш пример будет выглядеть следующим образом: From 23adbaf977da6405af82c3662ce51674358d6834 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 20:46:06 +0500 Subject: [PATCH 03/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 09e07c8f2..e299f1e45 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -95,7 +95,7 @@ class MouseTracker extends React.Component { } ``` -Теперь `` компонент инкапсулирует все поведения, связанные с прослушиванием событий `mousemove` и хранением позиций (x, y) курсора, правда пока без реиспользования. +Теперь компонент `` инкапсулирует все поведения, связанные с обработкой событий `mousemove` и хранением позиций курсора (x, y), правда пока без переиспользования. Например, допустим у нас есть `` компонент, который отображает изображение кошки, преследующей мышь по экрану. Мы можем использовать `` проп, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. From d7fa5288e023e67d0a3da0c829897c723b55b593 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 20:47:12 +0500 Subject: [PATCH 04/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index e299f1e45..982821411 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -6,7 +6,7 @@ permalink: docs/render-props.html Термин ["рендер пропс"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) это возможность делиться кодом между компонентами реакта где функция может выступить в качестве значения пропа -Компонент с рендер-пропсом берёт функцию, которую возвращает реакт элемент, и вызывает её вместо собственного рендера. +Компонент с рендер-пропсом берёт функцию, которую возвращает React-элемент, и вызывает её вместо собственного рендера. ```jsx ( From 48d6ffc19934841dcdaf235c84db53fec2842c6a Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 20:48:54 +0500 Subject: [PATCH 05/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 982821411..12db6b5f4 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -267,7 +267,7 @@ Mouse.propTypes = { }; ``` -## Caveats {#caveats} +## Предостережения {#caveats} ### Будьте осторожны при использовании рендер-пропс вместе с React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} From 27273c1f5c5c7d2f3926316dd42e05401d84416f Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 20:51:14 +0500 Subject: [PATCH 06/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 12db6b5f4..c202af5d0 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -257,7 +257,8 @@ function withMouse(Component) { ``` -Вы увидите, что эта техника используется в [react-motion](https://github.com/chenglou/react-motion) API. +Вы увидите, что эта техника используется в API библиотеки [react-motion](https://github.com/chenglou/react-motion). + Поскольку этот метод не совсем обычен, вы, вероятно, захотите явно указать, что `чилдрен` должен быть функцией в вашем `проптайпс` при разработке такого API. From d09f834da4d1028e8724a248071e8c64206217ef Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 20:54:42 +0500 Subject: [PATCH 07/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index c202af5d0..7b1858192 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -133,7 +133,7 @@ class MouseWithCat extends React.Component { Мы могли бы просто поменять

на здесь ... но тогда нам нужно создать отдельный компонент каждый раз когда он нужен нам, поэтому - пока что нельзя реиспользовать. + пока что нельзя переиспользовать. */} From 96c47f3f1d69dda7836cdace38759ee590d85c29 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 20:54:57 +0500 Subject: [PATCH 08/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 7b1858192..414026632 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -288,7 +288,7 @@ class MouseTracker extends React.Component {

Move the mouse around!

{/* - Это плохо! Значение `render` пропса будет + Это плохо! Значение `render` пропа будет разной на каждом рендере. */} ( From df0b6c346bd2aba2b80a53467b0688abe8a5d943 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 20:56:20 +0500 Subject: [PATCH 09/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 414026632..7f2da1823 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -300,7 +300,7 @@ class MouseTracker extends React.Component { } ``` -В этом примере, каждый раз при рендере ``, это сгенерирует новую функцию в качестве значения `` пропса, тем самым сводя на нет эффект `` наследующий `React.PureComponent` в первую очередь! +В этом примере, каждый раз при рендере ``, это сгенерирует новую функцию в качестве значения `` пропа, тем самым сводя на нет эффект `` наследующий `React.PureComponent` в первую очередь! Чтобы обойти эту проблему, вы можете иногда определить проп как метод экземляра, вроде этого: From 8d08402012e5b06e923fe7c31dc8aa0be7efdc8a Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 20:56:59 +0500 Subject: [PATCH 10/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 7f2da1823..8b704a21f 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -302,7 +302,7 @@ class MouseTracker extends React.Component { В этом примере, каждый раз при рендере ``, это сгенерирует новую функцию в качестве значения `` пропа, тем самым сводя на нет эффект `` наследующий `React.PureComponent` в первую очередь! -Чтобы обойти эту проблему, вы можете иногда определить проп как метод экземляра, вроде этого: +Чтобы решить эту проблему, вы можете определить проп как метод экземляра, например так: ```js class MouseTracker extends React.Component { From 1ef926ce82a6e921264c89c7bf662aace429e460 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 20:57:45 +0500 Subject: [PATCH 11/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 8b704a21f..e35103be1 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -10,7 +10,7 @@ permalink: docs/render-props.html ```jsx ( -

Hello {data.target}

+

Привет, {data.target}

)}/> ``` From bcd7c7e325cc07f968ddb09970ff0609f67e7f2b Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 20:58:10 +0500 Subject: [PATCH 12/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index e35103be1..a522538c4 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -22,7 +22,7 @@ permalink: docs/render-props.html Компоненты это основа реиспользования кода в реакте, но не всегда очевидно как использовать совместно состояние или поведение, которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. -Например, следующий компонент отслеживает положение мыши в веб-приложении: +Например, следующий компонент отслеживает положение мыши в приложении: ```js class MouseTracker extends React.Component { From a5b1a601decb0855b7692010b9a9cf3f60529533 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 21:04:20 +0500 Subject: [PATCH 13/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index a522538c4..768ea0fdd 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -307,7 +307,7 @@ class MouseTracker extends React.Component { ```js class MouseTracker extends React.Component { // Определяем как метод экземпляра, `this.renderTheCat` всегда - // ссылается на *такую* же функцию когда мы используем её в рендере + // ссылается на *ту же самую* функцию, когда мы используем её в рендере renderTheCat(mouse) { return ; } From 01fc123b0aaca0412278ca34b3c311f5ec79163c Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 21:04:51 +0500 Subject: [PATCH 14/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 768ea0fdd..108e9eeba 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -289,7 +289,7 @@ class MouseTracker extends React.Component { {/* Это плохо! Значение `render` пропа будет - разной на каждом рендере. + разным при каждом рендере. */} ( From ac5b98412e023162e531188289688a5941805347 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 21:05:09 +0500 Subject: [PATCH 15/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 108e9eeba..da88c569b 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -50,7 +50,7 @@ class MouseTracker extends React.Component { } ``` -Когда курсор перемещается по экрану, компонент отображает (x, y) координаты внутри `

`. +Когда курсор перемещается по экрану, компонент отображает координаты (x, y) внутри `

`. Теперь вопрос: Как мы можем повторно использовать поведение в другом компоненте? Другими словами, если другому компоненту необходимо знать о позиции курсора, сможем ли мы инкапсулировать это поведение, чтобы мы могли легко поделиться им с этим компонентом? From 57ef6121a4c73a9e3517691f6f1c13fe330a193e Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 20 Feb 2019 16:03:22 +0500 Subject: [PATCH 16/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index da88c569b..eeaed100c 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -76,7 +76,7 @@ class Mouse extends React.Component { return (

- {/* ...но как мы можем отрендерить нечто большее чем

? */} + {/* ...но как можно отрендерить что-то, кроме

? */}

The current mouse position is ({this.state.x}, {this.state.y})

); From 704259342da4ae79aec373ccc1ee77cd813c50d0 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 20 Feb 2019 16:03:47 +0500 Subject: [PATCH 17/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index eeaed100c..f38127573 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -57,7 +57,7 @@ class MouseTracker extends React.Component { Поскольку компоненты являются основой реиспользования кода в реакте, давай попробуем немного отрефакторить код используя внутри `` который инкапсулирует поведение, которое мы сможем реиспользовать где угодно. ```js -// компонент инкапсулирует поведение, которое нам необходимо... +// Компонент инкапсулирует поведение, которое нам необходимо... class Mouse extends React.Component { constructor(props) { super(props); From 437c0a959e651ebbe0c38f85c4de667c0893b9e6 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 20 Feb 2019 16:04:09 +0500 Subject: [PATCH 18/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index f38127573..f8729a96f 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -97,7 +97,7 @@ class MouseTracker extends React.Component { Теперь компонент `` инкапсулирует все поведения, связанные с обработкой событий `mousemove` и хранением позиций курсора (x, y), правда пока без переиспользования. -Например, допустим у нас есть `` компонент, который отображает изображение кошки, преследующей мышь по экрану. Мы можем использовать `` проп, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. +Например, допустим у нас есть компонент ``, который рендерит изображение кошки, преследующей мышь по экрану. Мы можем использовать проп ``, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. Для начала, вы можете отрендерить `` внутри `` `render`а, похожее на это: From b3a917ec6b7629684385c01f6ae4ac8fdc5f3824 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 20 Feb 2019 16:04:54 +0500 Subject: [PATCH 19/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index f8729a96f..1e9819831 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -130,7 +130,7 @@ class MouseWithCat extends React.Component {
{/* - Мы могли бы просто поменять

на здесь ... но тогда + Мы могли бы просто поменять

на ... но тогда нам нужно создать отдельный компонент каждый раз когда он нужен нам, поэтому пока что нельзя переиспользовать. From c3244e7359bf595c9e24c430c40ffb375c885e61 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:18:01 +0500 Subject: [PATCH 20/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 1e9819831..cd5f11b5d 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -153,7 +153,7 @@ class MouseTracker extends React.Component { } ``` -Этот подход будет работать для конкретного кейса, но мы не достигли основной цели — инкапсулировать поведение с возможностью реиспользования. Теперь, каждый раз когда мы хотим получить позицию мыши для разных кейсов, мы создаем новый компонент (т.е. другой экземпляр ``), который рендерит специально для этого кейса. +Этот подход будет работать для конкретного случая, но мы не достигли основной цели — инкапсулировать поведение с возможностью переиспользования. Теперь, каждый раз когда мы хотим получить позицию мыши для разных случаев, мы создаём новый компонент (т.е. другой экземпляр ``), который рендерит специально для этого случая. Вот здесь рендер-пропс нам и понадобится: Вместо хардкода `` внутри `` компонента, и трудозатратных изменений на выводе рендера, мы предоставляем `` функцию в качестве пропа, с которой мы используем динамическое определение того, что нужно передавать в рендер-пропс. From fbf4fa651cd44e2dd30ac7a814c37512d0603582 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:19:09 +0500 Subject: [PATCH 21/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index cd5f11b5d..2bafe8e0a 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -155,7 +155,7 @@ class MouseTracker extends React.Component { Этот подход будет работать для конкретного случая, но мы не достигли основной цели — инкапсулировать поведение с возможностью переиспользования. Теперь, каждый раз когда мы хотим получить позицию мыши для разных случаев, мы создаём новый компонент (т.е. другой экземпляр ``), который рендерит специально для этого случая. -Вот здесь рендер-пропс нам и понадобится: Вместо хардкода `` внутри `` компонента, и трудозатратных изменений на выводе рендера, мы предоставляем `` функцию в качестве пропа, с которой мы используем динамическое определение того, что нужно передавать в рендер-пропс. +Вот здесь рендер-проп нам и понадобится: вместо явного указания `` внутри `` компонента, и трудозатратных изменений на выводе рендера, мы предоставляем `` функцию в качестве пропа, с которой мы используем динамическое определение того, что нужно передавать в рендер-проп. ```js class Cat extends React.Component { From 32ef6acd1cdf4ffb9606527ff516611929e1713f Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:19:26 +0500 Subject: [PATCH 22/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 2bafe8e0a..6a846919f 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -213,7 +213,7 @@ class MouseTracker extends React.Component { Более конкретно, **рендер-пропс это функция, которая даёт понять компоненту что необходимо рендерить.** -Эта техника позволяет делать максимально реиспользуемые поведения. Чтобы получить такое поведение, отрисуйте `` вместе с `render` пропсом, который сообщит ему где отрендерить курсор с текущим положением (x, y). +Эта техника позволяет максимально переиспользовать поведение. Для этого следует отрендерить компонент `` вместе с `render` пропом, который сообщит где отрендерить курсор с текущим положением (x, y). Один интересный момент касательно рендер-пропсов то, что вы можете реализовать большинство [higher-order components](/docs/higher-order-components.html) (HOC), используя обычный компонент вместе с рендер-пропсом. Например, если для вас предпочтительней `withMouse` HOC вместо `` компонента, вы можете просто создать один используемый обычный `` компонент вместе с рендер-пропсом: From 57193852e58e5dfcdfe3a1db3035bdf37bbcae53 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:19:53 +0500 Subject: [PATCH 23/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 6a846919f..ad98c0259 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -323,4 +323,4 @@ class MouseTracker extends React.Component { } ``` -В случаях, когда вы не можете определить проп статически (например потому что вам необходимо закрыть остальные пропсы и/или стейты) `` должен наследоваться от `React.Component`. +В случаях, когда вы не можете определить проп статически (например, вам необходимо замкнуть пропсы и/или состояние компонента) `` нужно наследовать от `React.Component`. From fc68bcf3cf2c7c70621e7b8449afaa2baa8f8a74 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:20:42 +0500 Subject: [PATCH 24/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index ad98c0259..3727e4377 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -4,7 +4,7 @@ title: Рендер Пропсы permalink: docs/render-props.html --- -Термин ["рендер пропс"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) это возможность делиться кодом между компонентами реакта где функция может выступить в качестве значения пропа +Термин [«рендер проп»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) это возможность делиться кодом между компонентами React, где функция передается как значение пропа. Компонент с рендер-пропсом берёт функцию, которую возвращает React-элемент, и вызывает её вместо собственного рендера. From 3883d850063770dcb31fb98aa92760f957db0ad8 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:21:11 +0500 Subject: [PATCH 25/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 3727e4377..a6f486e75 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -54,7 +54,7 @@ class MouseTracker extends React.Component { Теперь вопрос: Как мы можем повторно использовать поведение в другом компоненте? Другими словами, если другому компоненту необходимо знать о позиции курсора, сможем ли мы инкапсулировать это поведение, чтобы мы могли легко поделиться им с этим компонентом? -Поскольку компоненты являются основой реиспользования кода в реакте, давай попробуем немного отрефакторить код используя внутри `` который инкапсулирует поведение, которое мы сможем реиспользовать где угодно. +Поскольку компоненты являются основой переиспользования кода в React, давай попробуем немного отрефакторить код используя внутри ``. Этот компонент инкапсулирует поведение, которое мы сможем переиспользовать где угодно. ```js // Компонент инкапсулирует поведение, которое нам необходимо... From 6f46c773f6b0305aaac53d1a31f140feb352f3e0 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:21:24 +0500 Subject: [PATCH 26/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index a6f486e75..cbdc4bf6d 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -16,7 +16,7 @@ permalink: docs/render-props.html Библиотеками, использующий такой подход, являются [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) и [Downshift](https://github.com/paypal/downshift). -В этой статье мы покажем почему рендер-пропс полезен и как написать свой. +В этой статье мы покажем почему рендер-проп полезен и как писать свои. ## Использование рендер-пропса для сквозных задач {#use-render-props-for-cross-cutting-concerns} From 5b96daa2a138d6be840d75e853a9e834026109c5 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:21:39 +0500 Subject: [PATCH 27/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index cbdc4bf6d..3b422e884 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -18,7 +18,7 @@ permalink: docs/render-props.html В этой статье мы покажем почему рендер-проп полезен и как писать свои. -## Использование рендер-пропса для сквозных задач {#use-render-props-for-cross-cutting-concerns} +## Использование рендер-пропа для сквозных задач {#use-render-props-for-cross-cutting-concerns} Компоненты это основа реиспользования кода в реакте, но не всегда очевидно как использовать совместно состояние или поведение, которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. From 721e38cc45f348a4b0c1ec178590a7a75b4c5427 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:22:11 +0500 Subject: [PATCH 28/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 3b422e884..bbed5d41f 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -20,7 +20,7 @@ permalink: docs/render-props.html ## Использование рендер-пропа для сквозных задач {#use-render-props-for-cross-cutting-concerns} -Компоненты это основа реиспользования кода в реакте, но не всегда очевидно как использовать совместно состояние или поведение, которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. +Компоненты это основа повторного использования кода в React, но не всегда очевидно как использовать совместно состояние или поведение, которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. Например, следующий компонент отслеживает положение мыши в приложении: From f7cf25ec13c33be20f5a39f8b76e6374f5fcf154 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:22:48 +0500 Subject: [PATCH 29/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index bbed5d41f..ddf743bc9 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -99,7 +99,7 @@ class MouseTracker extends React.Component { Например, допустим у нас есть компонент ``, который рендерит изображение кошки, преследующей мышь по экрану. Мы можем использовать проп ``, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. -Для начала, вы можете отрендерить `` внутри `` `render`а, похожее на это: +Для начала вы можете отрендерить `` внутри метода `render` компонента `` следующим образом: ```js class Cat extends React.Component { From c7d2d5a04c1f4c6bfa6e2754af6df8a80ff9b839 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:23:53 +0500 Subject: [PATCH 30/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index ddf743bc9..ed7790a72 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -187,7 +187,7 @@ class Mouse extends React.Component { {/* Вместо статического представления того, что отображает , - используем `render` пропс для динамического определения визуализации. + используем `render` проп для динамического определения визуализации. */} {this.props.render(this.state)}

From b50834b05d1a55bf3b1136c963deec1d498668f2 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:32:51 +0500 Subject: [PATCH 31/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index ed7790a72..f1399e0a5 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -215,7 +215,7 @@ class MouseTracker extends React.Component { Эта техника позволяет максимально переиспользовать поведение. Для этого следует отрендерить компонент `` вместе с `render` пропом, который сообщит где отрендерить курсор с текущим положением (x, y). -Один интересный момент касательно рендер-пропсов то, что вы можете реализовать большинство [higher-order components](/docs/higher-order-components.html) (HOC), используя обычный компонент вместе с рендер-пропсом. Например, если для вас предпочтительней `withMouse` HOC вместо `` компонента, вы можете просто создать один используемый обычный `` компонент вместе с рендер-пропсом: +Один интересный момент касательно рендер-пропсов то, что вы можете реализовать большинство [компонентов высшего порядка](/docs/higher-order-components.html) (HOC), используя обычный компонент вместе с рендер-пропом. Например, если для вас предпочтительней `withMouse` HOC вместо `` компонента, вы можете создать обычный компонент `` вместе с рендер-пропом: ```js // Если вам действительно необходим HOC по некоторым причинам, вы можете просто From 40de248a41aa494f1dd5dfa0cb704e989df96dde Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:33:10 +0500 Subject: [PATCH 32/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index f1399e0a5..577b9c253 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -219,7 +219,7 @@ class MouseTracker extends React.Component { ```js // Если вам действительно необходим HOC по некоторым причинам, вы можете просто -// создать один обычный компонент с рендер-пропсом! +// создать обычный компонент с рендер-пропом! function withMouse(Component) { return class extends React.Component { render() { From 6e316405b49fc8154d12a5c577501fd7e34abe91 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:33:30 +0500 Subject: [PATCH 33/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 577b9c253..ab7e3527b 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -233,7 +233,7 @@ function withMouse(Component) { } ``` -Таким образом, использование рендер-пропса позволяет использовать любой паттерн. +Таким образом, использование рендер-пропа позволяет использовать любой паттерн. ## Использование пропов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} From 07f597ec93886b5df4987629eca35a8fdb5f6c32 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:33:46 +0500 Subject: [PATCH 34/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index ab7e3527b..7498c5440 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -235,7 +235,7 @@ function withMouse(Component) { Таким образом, использование рендер-пропа позволяет использовать любой паттерн. -## Использование пропов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} +## Использование пропсов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} Важно запомнить, что только потому, что этот паттерн называется "рендер-пропс", не означает, что при использования этого паттерна *у вас должен быть обязательно, проп с названием `render`*. По факту, [*любой* пропс, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является "рендер пропсом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). From aaa6d7cfb9d2ce4287e8a082095cc69d8cec3514 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:34:12 +0500 Subject: [PATCH 35/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 7498c5440..4da38abb2 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -237,7 +237,7 @@ function withMouse(Component) { ## Использование пропсов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} -Важно запомнить, что только потому, что этот паттерн называется "рендер-пропс", не означает, что при использования этого паттерна *у вас должен быть обязательно, проп с названием `render`*. По факту, [*любой* пропс, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является "рендер пропсом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). +Важно запомнить, что только потому, что этот паттерн называется «рендер-проп», не означает, что при использования этого паттерна *у вас должен быть обязательно, проп с названием `render`*. По факту, [*любой* проп, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является «рендер пропом»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). Несмотря на то, что в вышеприведенных примерах мы используем `рендер`, мы можем также легко использовать `чилдрен` пропс! From 0880da004d51ccdaa6310b6db815d52af7aacbc5 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:35:23 +0500 Subject: [PATCH 36/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 4da38abb2..a89a4ae06 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -260,7 +260,7 @@ function withMouse(Component) { Вы увидите, что эта техника используется в API библиотеки [react-motion](https://github.com/chenglou/react-motion). -Поскольку этот метод не совсем обычен, вы, вероятно, захотите явно указать, что `чилдрен` должен быть функцией в вашем `проптайпс` при разработке такого API. +Поскольку этот метод не совсем обычен, вы, вероятно, захотите явно указать, что `children` должен быть функцией в вашем `propTypes` при разработке такого API. ```js Mouse.propTypes = { From 2b306c9074e1629294e8ba4daea13a090607f393 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:35:39 +0500 Subject: [PATCH 37/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index a89a4ae06..8f6ea8f8a 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -270,7 +270,7 @@ Mouse.propTypes = { ## Предостережения {#caveats} -### Будьте осторожны при использовании рендер-пропс вместе с React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} +### Будьте осторожны при использовании рендер-проп вместе с React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} Использование рендер-пропса может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых свойств пропсов, и каждый `render` будет генерировать новое значение для рендер-пропса. From 4a25e34865c26aaaf2892afde9823199f8654ec6 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Sun, 24 Feb 2019 20:35:55 +0500 Subject: [PATCH 38/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 8f6ea8f8a..c5a845918 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -272,7 +272,7 @@ Mouse.propTypes = { ### Будьте осторожны при использовании рендер-проп вместе с React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} -Использование рендер-пропса может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых свойств пропсов, и каждый `render` будет генерировать новое значение для рендер-пропса. +Использование рендер-пропа может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых пропсов, и каждый `render` будет генерировать новое значение для рендер-пропа. Например, в продолжении нашего `` компонента упомянутого выше, если `Mouse` наследуется от `React.PureComponent` вместо `React.Component`, наш пример будет выглядеть следующим образом: From 1dea4229614fb3802804349b1a4e22780df6cddc Mon Sep 17 00:00:00 2001 From: Azat Ayupov Date: Sun, 24 Feb 2019 20:36:45 +0500 Subject: [PATCH 39/66] add fixes --- content/docs/render-props.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index ed7790a72..e9b834d45 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -1,6 +1,6 @@ --- id: render-props -title: Рендер Пропсы +title: Рендер-пропсы permalink: docs/render-props.html --- @@ -209,9 +209,9 @@ class MouseTracker extends React.Component { } ``` -Теперь, вместо того, чтобы трудозатратно клонировать `` компонент и хардкодить что-нибудь еще в `render` методе, для решения индивидуального кейса, мы предоставляем `render` пропс этой ``, который может динамически определить что рендерить. +Теперь, вместо того, чтобы фактически клонировать компонент `` и жёстко указывать что-нибудь ещё в методе `render`, для решения специфичного случая, мы предоставляем `render` проп компоненту``, который может динамически определить что рендерить. -Более конкретно, **рендер-пропс это функция, которая даёт понять компоненту что необходимо рендерить.** +Иными словами, **рендер-проп – функция, которая сообщает компоненту что необходимо рендерить.** Эта техника позволяет максимально переиспользовать поведение. Для этого следует отрендерить компонент `` вместе с `render` пропом, который сообщит где отрендерить курсор с текущим положением (x, y). @@ -239,7 +239,7 @@ function withMouse(Component) { Важно запомнить, что только потому, что этот паттерн называется "рендер-пропс", не означает, что при использования этого паттерна *у вас должен быть обязательно, проп с названием `render`*. По факту, [*любой* пропс, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является "рендер пропсом"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). -Несмотря на то, что в вышеприведенных примерах мы используем `рендер`, мы можем также легко использовать `чилдрен` пропс! +Несмотря на то, что в вышеприведенных примерах мы используем `render`, мы можем также легко использовать проп `children`! ```js ( From eec07b98620ae823ea7559e9e9db5b9b130ee244 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:49:57 +0500 Subject: [PATCH 40/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 5bff430ec..478e7fe41 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -20,7 +20,7 @@ permalink: docs/render-props.html ## Использование рендер-пропа для сквозных задач {#use-render-props-for-cross-cutting-concerns} -Компоненты это основа повторного использования кода в React, но не всегда очевидно как использовать совместно состояние или поведение, которые один компонент инкапсулирует в другие компоненты, которые нуждаются в этом же стейте. +Компоненты это основа повторного использования кода в React. Однако бывает неочевидно, как сделать, чтобы одни компоненты разделяли своё инкапсулированное состояние или поведение с другими компонентами, заинтересованными в таком же состоянии или поведении. Например, следующий компонент отслеживает положение мыши в приложении: From 3271d8e77c3de23d4e7bf805ed71283e4bbf8616 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:50:13 +0500 Subject: [PATCH 41/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 478e7fe41..0a7870dc6 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -52,7 +52,7 @@ class MouseTracker extends React.Component { Когда курсор перемещается по экрану, компонент отображает координаты (x, y) внутри `

`. -Теперь вопрос: Как мы можем повторно использовать поведение в другом компоненте? Другими словами, если другому компоненту необходимо знать о позиции курсора, сможем ли мы инкапсулировать это поведение, чтобы мы могли легко поделиться им с этим компонентом? +Возникает вопрос: как мы можем повторно использовать это поведение в другом компоненте? То есть если другому компоненту необходимо знать о позиции курсора, можем ли мы как-то инкапсулировать это поведение, чтобы затем легко использовать его в этом компоненте? Поскольку компоненты являются основой переиспользования кода в React, давай попробуем немного отрефакторить код используя внутри ``. Этот компонент инкапсулирует поведение, которое мы сможем переиспользовать где угодно. From e13663d302a85be015b32058cec910611fc5400c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:50:34 +0500 Subject: [PATCH 42/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 0a7870dc6..d9c810e95 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -54,7 +54,7 @@ class MouseTracker extends React.Component { Возникает вопрос: как мы можем повторно использовать это поведение в другом компоненте? То есть если другому компоненту необходимо знать о позиции курсора, можем ли мы как-то инкапсулировать это поведение, чтобы затем легко использовать его в этом компоненте? -Поскольку компоненты являются основой переиспользования кода в React, давай попробуем немного отрефакторить код используя внутри ``. Этот компонент инкапсулирует поведение, которое мы сможем переиспользовать где угодно. +Поскольку компоненты являются основой повторного использования кода в React, давайте применим небольшой рефакторинг. Пусть наш код полагается на компонент ``, инкапсулирующий поведение, которое мы хотим применять в разных местах. ```js // Компонент инкапсулирует поведение, которое нам необходимо... From 1e846d855d014ab9beaa9b7df9912d25ed8055c2 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:50:49 +0500 Subject: [PATCH 43/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index d9c810e95..8e04be500 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -274,7 +274,7 @@ Mouse.propTypes = { Использование рендер-пропа может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых пропсов, и каждый `render` будет генерировать новое значение для рендер-пропа. -Например, в продолжении нашего `` компонента упомянутого выше, если `Mouse` наследуется от `React.PureComponent` вместо `React.Component`, наш пример будет выглядеть следующим образом: +Например, в продолжение нашего `` компонента упомянутого выше, если `Mouse` наследуется от `React.PureComponent` вместо `React.Component`, наш пример будет выглядеть следующим образом: ```js class Mouse extends React.PureComponent { From 58ddf0d6f40e003fe1adf8afa5686fcf3b9a0ac6 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:50:59 +0500 Subject: [PATCH 44/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 8e04be500..2444f65e9 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -278,7 +278,7 @@ Mouse.propTypes = { ```js class Mouse extends React.PureComponent { - // Та же реализация что и упомянутая выше... + // Та же реализация, что и упомянутая выше... } class MouseTracker extends React.Component { From 8a381fc0f28ae39e8c38d35796e8e9db9d852673 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:51:42 +0500 Subject: [PATCH 45/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 2444f65e9..379d0590d 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -4,7 +4,7 @@ title: Рендер-пропсы permalink: docs/render-props.html --- -Термин [«рендер проп»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) это возможность делиться кодом между компонентами React, где функция передается как значение пропа. +Термин [«рендер-проп»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) относится к возможности компонентов React разделять код между собой с помощью пропа, значение которого является функцией. Компонент с рендер-пропсом берёт функцию, которую возвращает React-элемент, и вызывает её вместо собственного рендера. From d3a51576d492c86651ab6ea9896cc7b7ca2e1994 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:51:53 +0500 Subject: [PATCH 46/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 379d0590d..0771c0252 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -237,7 +237,7 @@ function withMouse(Component) { ## Использование пропсов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} -Важно запомнить, что только потому, что этот паттерн называется «рендер-проп», не означает, что при использования этого паттерна *у вас должен быть обязательно, проп с названием `render`*. По факту, [*любой* проп, который использует компонент и он является функцией и в результате этого компонент знает что рендерить технически является «рендер пропом»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). +Важно запомнить, что из названия паттерна «рендер-проп» вовсе не следует, что для его использования *вы должны обязательно называть проп `render`*. На самом деле, [*любой* проп, который используется компонентом и является функцией рендеринга, технически является и «рендер-пропом»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce). Несмотря на то, что в вышеприведенных примерах мы используем `render`, мы можем также легко использовать проп `children`! From f4edbc22cad256f07e24115928cc6fc89492365b Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:52:04 +0500 Subject: [PATCH 47/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 0771c0252..3edc609b4 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -6,7 +6,7 @@ permalink: docs/render-props.html Термин [«рендер-проп»](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) относится к возможности компонентов React разделять код между собой с помощью пропа, значение которого является функцией. -Компонент с рендер-пропсом берёт функцию, которую возвращает React-элемент, и вызывает её вместо собственного рендера. +Компонент с рендер-пропом берёт функцию, которая возвращает React-элемент, и вызывает её вместо реализации собственного рендера. ```jsx ( From 410f7ff1ccadbf4b25762b45122c03738913be24 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:52:13 +0500 Subject: [PATCH 48/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 3edc609b4..a64a5e19a 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -14,7 +14,7 @@ permalink: docs/render-props.html )}/> ``` -Библиотеками, использующий такой подход, являются [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) и [Downshift](https://github.com/paypal/downshift). +Такой подход, в частности, применяется в библиотеках [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) и [Downshift](https://github.com/paypal/downshift). В этой статье мы покажем почему рендер-проп полезен и как писать свои. From fcf07f68ce4fa06a445d69a166f7cb30cc3b51d9 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:52:28 +0500 Subject: [PATCH 49/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index a64a5e19a..46c09d130 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -16,7 +16,7 @@ permalink: docs/render-props.html Такой подход, в частности, применяется в библиотеках [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) и [Downshift](https://github.com/paypal/downshift). -В этой статье мы покажем почему рендер-проп полезен и как писать свои. +В этой статье мы покажем, чем полезны и как писать рендер-пропсы. ## Использование рендер-пропа для сквозных задач {#use-render-props-for-cross-cutting-concerns} From f421098256f4ad669b84031591e907a1703ff006 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:52:37 +0500 Subject: [PATCH 50/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 46c09d130..8f5e36812 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -288,7 +288,7 @@ class MouseTracker extends React.Component {

Move the mouse around!

{/* - Это плохо! Значение `render` пропа будет + Это плохо! Значение рендер-пропа будет разным при каждом рендере. */} ( From 461e60b566237370c5bd49b8ae4f74dff24fe0ac Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:52:47 +0500 Subject: [PATCH 51/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 8f5e36812..cba95bcc0 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -300,7 +300,7 @@ class MouseTracker extends React.Component { } ``` -В этом примере, каждый раз при рендере ``, это сгенерирует новую функцию в качестве значения `` пропа, тем самым сводя на нет эффект `` наследующий `React.PureComponent` в первую очередь! +В этом примере, при каждом рендере `` генерируется новая функция в качестве значения пропа ``. Это сводит на нет эффекты `React.PureComponent`, от которого наследует ``! Чтобы решить эту проблему, вы можете определить проп как метод экземляра, например так: From 41786fa20163c90638f9cfb92a592a526644e3c6 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:52:55 +0500 Subject: [PATCH 52/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index cba95bcc0..02c3d0f14 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -323,4 +323,4 @@ class MouseTracker extends React.Component { } ``` -В случаях, когда вы не можете определить проп статически (например, вам необходимо замкнуть пропсы и/или состояние компонента) `` нужно наследовать от `React.Component`. +В случаях, когда вы не можете определить проп статически (например, вам необходимо замкнуть пропсы и/или состояние компонента), `` нужно наследовать от `React.Component`. From b6bf5aae61ebe618c2decd6ddaa25e788ad046e4 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:53:17 +0500 Subject: [PATCH 53/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 02c3d0f14..34213b18c 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -95,7 +95,7 @@ class MouseTracker extends React.Component { } ``` -Теперь компонент `` инкапсулирует все поведения, связанные с обработкой событий `mousemove` и хранением позиций курсора (x, y), правда пока без переиспользования. +Теперь компонент `` инкапсулирует всё поведение, связанное с обработкой событий `mousemove` и хранением позиций курсора (x, y), но пока не обеспечивает повторного использования. Например, допустим у нас есть компонент ``, который рендерит изображение кошки, преследующей мышь по экрану. Мы можем использовать проп ``, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. From 5c1823af829422dd7b93fff55abf2fc9d22382e4 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:53:40 +0500 Subject: [PATCH 54/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 34213b18c..4011fa45c 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -97,7 +97,7 @@ class MouseTracker extends React.Component { Теперь компонент `` инкапсулирует всё поведение, связанное с обработкой событий `mousemove` и хранением позиций курсора (x, y), но пока не обеспечивает повторного использования. -Например, допустим у нас есть компонент ``, который рендерит изображение кошки, преследующей мышь по экрану. Мы можем использовать проп ``, чтобы сообщить компоненту координаты мыши, о том где расположить изображение на экране. +Например, допустим у нас есть компонент ``, который рендерит изображение кошки, преследующей мышь по экрану. Мы можем использовать проп ``, чтобы сообщить компоненту координаты мыши, и он знал, где расположить изображение на экране. Для начала вы можете отрендерить `` внутри метода `render` компонента `` следующим образом: From ae4c3a157f184993d9383aa20ad8abae6c6f9bd1 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:54:02 +0500 Subject: [PATCH 55/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 4011fa45c..4de48138f 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -99,7 +99,7 @@ class MouseTracker extends React.Component { Например, допустим у нас есть компонент ``, который рендерит изображение кошки, преследующей мышь по экрану. Мы можем использовать проп ``, чтобы сообщить компоненту координаты мыши, и он знал, где расположить изображение на экране. -Для начала вы можете отрендерить `` внутри метода `render` компонента `` следующим образом: +Для начала вы можете отрендерить `` *внутри метода `render` компонента ``* следующим образом: ```js class Cat extends React.Component { From 13950882d1e672e9ef6ad3151fd47dc134a5b689 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:54:22 +0500 Subject: [PATCH 56/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 4de48138f..0ce557fff 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -132,7 +132,7 @@ class MouseWithCat extends React.Component { {/* Мы могли бы просто поменять

на ... но тогда нам нужно создать отдельный компонент - каждый раз когда он нужен нам, поэтому + каждый раз, когда он нужен нам, поэтому пока что нельзя переиспользовать. */} From d2e68b9c5a0d0866105a31cc64865e76aa4f9b3c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:54:37 +0500 Subject: [PATCH 57/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 0ce557fff..c27987f82 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -153,7 +153,7 @@ class MouseTracker extends React.Component { } ``` -Этот подход будет работать для конкретного случая, но мы не достигли основной цели — инкапсулировать поведение с возможностью переиспользования. Теперь, каждый раз когда мы хотим получить позицию мыши для разных случаев, мы создаём новый компонент (т.е. другой экземпляр ``), который рендерит специально для этого случая. +Этот подход будет работать для конкретного случая, но мы не достигли основной цели — инкапсулировать поведение с возможностью повторного использования. Теперь, каждый раз когда мы хотим получить позицию мыши для разных случаев, нам требуется создавать новый компонент (т. е. другой экземпляр ``), который рендерит что-то специально для этого случая. Вот здесь рендер-проп нам и понадобится: вместо явного указания `` внутри `` компонента, и трудозатратных изменений на выводе рендера, мы предоставляем `` функцию в качестве пропа, с которой мы используем динамическое определение того, что нужно передавать в рендер-проп. From 01edb3a817cb368c37738f354ff368aafa5c589c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:55:53 +0500 Subject: [PATCH 58/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index c27987f82..3a7653c2f 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -186,7 +186,7 @@ class Mouse extends React.Component {

{/* - Вместо статического представления того, что отображает , + Вместо статического представления того, что рендерит , используем `render` проп для динамического определения визуализации. */} {this.props.render(this.state)} From e723df5137a9a535851ee93dba028b4d7b7af722 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:56:26 +0500 Subject: [PATCH 59/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 3a7653c2f..09da03b39 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -187,7 +187,7 @@ class Mouse extends React.Component { {/* Вместо статического представления того, что рендерит , - используем `render` проп для динамического определения визуализации. + используем рендер-проп для динамического определения, что надо отрендерить. */} {this.props.render(this.state)}
From c57624f68b657163c1a71f8594b1504354f208c8 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:56:46 +0500 Subject: [PATCH 60/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 09da03b39..24665261a 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -209,7 +209,7 @@ class MouseTracker extends React.Component { } ``` -Теперь, вместо того, чтобы фактически клонировать компонент `` и жёстко указывать что-нибудь ещё в методе `render`, для решения специфичного случая, мы предоставляем `render` проп компоненту``, который может динамически определить что рендерить. +Теперь, вместо того, чтобы фактически клонировать компонент `` и жёстко указывать что-нибудь ещё в методе `render`, для решения специфичного случая, мы предоставляем рендер-проп компоненту ``, который может динамически определить что рендерить. Иными словами, **рендер-проп – функция, которая сообщает компоненту что необходимо рендерить.** From 78dbfd5227d8e3d619852750d26882470bfa9cd9 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:57:20 +0500 Subject: [PATCH 61/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 24665261a..5a8939f0e 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -213,7 +213,7 @@ class MouseTracker extends React.Component { Иными словами, **рендер-проп – функция, которая сообщает компоненту что необходимо рендерить.** -Эта техника позволяет максимально переиспользовать поведение. Для этого следует отрендерить компонент `` вместе с `render` пропом, который сообщит где отрендерить курсор с текущим положением (x, y). +Эта техника позволяет сделать легко портируемым поведение, которое мы хотим повторно использовать. Для этого следует отрендерить компонент `` с помощью рендер-пропа, который сообщит, где отрендерить курсор с текущим положением (x, y). Один интересный момент касательно рендер-пропсов то, что вы можете реализовать большинство [компонентов высшего порядка](/docs/higher-order-components.html) (HOC), используя обычный компонент вместе с рендер-пропом. Например, если для вас предпочтительней `withMouse` HOC вместо `` компонента, вы можете создать обычный компонент `` вместе с рендер-пропом: From c319b6fee4ee7cb3c1dee28219f365cf92f9a2d9 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:57:41 +0500 Subject: [PATCH 62/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 5a8939f0e..f518da627 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -215,7 +215,7 @@ class MouseTracker extends React.Component { Эта техника позволяет сделать легко портируемым поведение, которое мы хотим повторно использовать. Для этого следует отрендерить компонент `` с помощью рендер-пропа, который сообщит, где отрендерить курсор с текущим положением (x, y). -Один интересный момент касательно рендер-пропсов то, что вы можете реализовать большинство [компонентов высшего порядка](/docs/higher-order-components.html) (HOC), используя обычный компонент вместе с рендер-пропом. Например, если для вас предпочтительней `withMouse` HOC вместо `` компонента, вы можете создать обычный компонент `` вместе с рендер-пропом: +Один интересный момент касательно рендер-пропсов заключается в том, что вы можете реализовать большинство [компонентов высшего порядка](/docs/higher-order-components.html) (HOC), используя обычный компонент вместе с рендер-пропом. Например, если для вас предпочтительней HOC `withMouse` вместо компонента ``, вы можете создать обычный компонент `` вместе с рендер-пропом: ```js // Если вам действительно необходим HOC по некоторым причинам, вы можете просто From fae4be37cce025f37d429076895b5acc4baf7905 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:58:09 +0500 Subject: [PATCH 63/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index f518da627..1bea220af 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -272,7 +272,7 @@ Mouse.propTypes = { ### Будьте осторожны при использовании рендер-проп вместе с React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent} -Использование рендер-пропа может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) если вы создаете функцию внутри метода `render`. Это связано с тем, что неглубокое сравнение пропсов всегда будет возвращать `false` для новых пропсов, и каждый `render` будет генерировать новое значение для рендер-пропа. +Использование рендер-пропа может свести на нет преимущество, которое дает [`React.PureComponent`](/docs/react-api.html#reactpurecomponent), если вы создаете функцию внутри метода `render`. Это связано с тем, что поверхностное сравнение пропсов всегда будет возвращать `false` для новых пропсов и каждый `render` будет генерировать новое значение для рендер-пропа. Например, в продолжение нашего `` компонента упомянутого выше, если `Mouse` наследуется от `React.PureComponent` вместо `React.Component`, наш пример будет выглядеть следующим образом: From 0972f01f22f8c40a4bd8fcdd5aadbe2ee1b4b8b8 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:58:39 +0500 Subject: [PATCH 64/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 1bea220af..f053f6932 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -233,7 +233,7 @@ function withMouse(Component) { } ``` -Таким образом, использование рендер-пропа позволяет использовать любой паттерн. +Таким образом, рендер-пропы позволяют реализовать любой из описанных выше паттернов. ## Использование пропсов, отличных от `render` (как название передаваемого свойства) {#using-props-other-than-render} From 80e64fb600f8a2f425a28206ca8e8c0bc0a0092c Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:59:01 +0500 Subject: [PATCH 65/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index f053f6932..509d80d40 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -247,7 +247,7 @@ function withMouse(Component) { )}/> ``` -И запомните, `чилдрен` проп не обязательно именовать в списке "атрибутов" вашего JSX элемента. Вместо этого, вы можете положить прямо *внутри* этого элемента! +И запомните, проп `children` не обязательно именовать в списке "атрибутов" вашего JSX элемента. Вместо этого, вы можете поместить его прямо *внутрь* элемента! ```js From afaed67df2b1d15cbfd33cb18685ca8bc74718dc Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 15:59:28 +0500 Subject: [PATCH 66/66] Update content/docs/render-props.md Co-Authored-By: Azat74 --- content/docs/render-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/render-props.md b/content/docs/render-props.md index 509d80d40..5851f4970 100644 --- a/content/docs/render-props.md +++ b/content/docs/render-props.md @@ -257,7 +257,7 @@ function withMouse(Component) { ``` -Вы увидите, что эта техника используется в API библиотеки [react-motion](https://github.com/chenglou/react-motion). +Эту технику можно увидеть в действии в API библиотеки [react-motion](https://github.com/chenglou/react-motion). Поскольку этот метод не совсем обычен, вы, вероятно, захотите явно указать, что `children` должен быть функцией в вашем `propTypes` при разработке такого API.