From d004bf33f0318137a3e4beb6402cd8eab8ec2253 Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Mon, 11 Feb 2019 11:13:45 +0300 Subject: [PATCH 01/20] Hooks intro page translated --- content/docs/hooks-intro.md | 92 +++++++++++++++++++------------------ 1 file changed, 47 insertions(+), 45 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index b4cefcfbe..bbc93f2ca 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -1,17 +1,17 @@ --- id: hooks-intro -title: Introducing Hooks +title: Введение в хуки permalink: docs/hooks-intro.html next: hooks-overview.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Хуки* это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие возможности React без написания классов. ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Объявление переменной состояния, которую мы назовём «count» const [count, setCount] = useState(0); return ( @@ -25,88 +25,90 @@ function Example() { } ``` -This new function `useState` is the first "Hook" we'll learn about, but this example is just a teaser. Don't worry if it doesn't make sense yet! +Функция `useState` это первый «Хук», который мы изучим и это всего лишь небольшой пример. Не переживайте, если вы пока не понимаете зачем они нужны. -**You can start learning Hooks [on the next page](/docs/hooks-overview.html).** On this page, we'll continue by explaining why we're adding Hooks to React and how they can help you write great applications. +**Вы можете начать изучать Хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили Хуки в React, и как они помогут вам писать приложения лучше. ->Note +>Примечание > ->React 16.8.0 is the first release to support Hooks. When upgrading, don't forget to update all packages, including React DOM. React Native will support Hooks in the next stable release. +>React 16.8.0 это первый релиз поддерживающий Хуки. При обновлении версии, не забудьте обновить все зависимости, включая ReactDOM. React Native будет поддерживать Хуки в следующем стабильном релизе. -## Video Introduction {#video-introduction} +## Видео введение {#video-introduction} -At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here: +На конференции React Conf 2018, Софья Альперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили Хуки, а затем Райн Фроленц (Ryan Florence) показал, как с их помощью переписать ваше приложение. Видео конференции можно посмотреть здесь:
-## No Breaking Changes {#no-breaking-changes} +## Не нарушая совместимость {#no-breaking-changes} -Before we continue, note that Hooks are: +Перед тем, как мы продолжим, запомните, что Хуки: -* **Completely opt-in.** You can try Hooks in a few components without rewriting any existing code. But you don't have to learn or use Hooks right now if you don't want to. -* **100% backwards-compatible.** Hooks don't contain any breaking changes. -* **Available now.** Hooks are now available with the release of v16.8.0. +* **Полностью на ваше усмотрение.** Вы можете попробовать Хуки в нескольких компонентах, не изменяя код в уже существующих. Нет необходимости учить и использовать Хуки прямо сейчас, если не хотите. +* **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. +* **Доступны прямо сейчас.** Хуки доступны с выходом версии v16.8.0. -**There are no plans to remove classes from React.** You can read more about the gradual adoption strategy for Hooks in the [bottom section](#gradual-adoption-strategy) of this page. +**Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения новых Хуков в [разделе ниже](#gradual-adoption-strategy). -**Hooks don't replace your knowledge of React concepts.** Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them. +**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, Хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсы, состояние, контексты, рефы, и жизненный цикл. Позже мы покажем вам, что Хуки предоставляют мощный способ для объединения этих концепций. -**If you just want to start learning Hooks, feel free to [jump directly to the next page!](/docs/hooks-overview.html)** You can also keep reading this page to learn more about why we're adding Hooks, and how we're going to start using them without rewriting our applications. +**Если вы хотите начать изучать Хуки, то [переходите на следующую страницу!](/docs/hooks-overview.html)** Вы можете продолжить чтение этой страницы, чтобы узнать больше о том, почему бы добавили Хуки и как мы можем использовать их без переписывания нашего приложения. -## Motivation {#motivation} +## Мотивация {#motivation} -Hooks solve a wide variety of seemingly unconnected problems in React that we've encountered over five years of writing and maintaining tens of thousands of components. Whether you're learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems. +Хуки решают огромное количество, казалось бы несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятки тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, вы должны узнать некоторые из этих проблем. -### It's hard to reuse stateful logic between components {#its-hard-to-reuse-stateful-logic-between-components} +### Трудно переиспользовать логику состояний между компонентами {#its-hard-to-reuse-stateful-logic-between-components} -React doesn't offer a way to "attach" reusable behavior to a component (for example, connecting it to a store). If you've worked with React for a while, you may be familiar with patterns like [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html) that try to solve this. But these patterns require you to restructure your components when you use them, which can be cumbersome and make code harder to follow. If you look at a typical React application in React DevTools, you will likely find a "wrapper hell" of components surrounded by layers of providers, consumers, higher-order components, render props, and other abstractions. While we could [filter them out in DevTools](https://github.com/facebook/react-devtools/pull/503), this points to a deeper underlying problem: React needs a better primitive for sharing stateful logic. +React не позволяет переиспользовать поведение компонентов (например, передача хранилища). Если вы работали с React какое-то время, то вы должны быть знакомы с такими паттернами как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html) которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), но всё это указывает на более глубокую проблему: необходимость в React более удобного способа для обмена логикой состояния. -With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. **Hooks allow you to reuse stateful logic without changing your component hierarchy.** This makes it easy to share Hooks among many components or with the community. +С помощью хуков вы можете извлечь логику состояния из компонента, чтобы протестировать её независимо и повторно использовать. **Хуки позволяют вам переиспользовать логику состояния без изменения структуры компонента.** Это позволяет обмениваться Хуками между компонентами или делиться с сообществом. -We'll discuss this more in [Building Your Own Hooks](/docs/hooks-custom.html). +Мы обсудим это подробнее в разделе [создание собственных Хуков](/docs/hooks-custom.html). -### Complex components become hard to understand {#complex-components-become-hard-to-understand} +### Сложные компоненты становятся трудными для понимания {#complex-components-become-hard-to-understand} -We've often had to maintain components that started out simple but grew into an unmanageable mess of stateful logic and side effects. Each lifecycle method often contains a mix of unrelated logic. For example, components might perform some data fetching in `componentDidMount` and `componentDidUpdate`. However, the same `componentDidMount` method might also contain some unrelated logic that sets up event listeners, with cleanup performed in `componentWillUnmount`. Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method. This makes it too easy to introduce bugs and inconsistencies. +Нам часто приходилось поддерживать компоненты, которые изначально были простыми, но превратились в неуправляемый беспорядок, состоящий из логики состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут загружать данные в `componentDidMount` и `componentDidUpdate`. Однако тот же метод `componentDidMount` может содержать несвязанную логику, которая добавляет обработчики события с отменой подписки в `componentWillUnmount`. Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно несвязанный код в конечном итоге объединяется в один метод. Из-за этого слишком легко добавить баги и несоответствия в приложение. -In many cases it's not possible to break these components into smaller ones because the stateful logic is all over the place. It's also difficult to test them. This is one of the reasons many people prefer to combine React with a separate state management library. However, that often introduces too much abstraction, requires you to jump between different files, and makes reusing components more difficult. +В некоторых случаях, невозможно разбить компоненты на более мелкие, потому что логика с отслеживанием состояния повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и делает переиспользуемые компоненты более сложными. -To solve this, **Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)**, rather than forcing a split based on lifecycle methods. You may also opt into managing the component's local state with a reducer to make it more predictable. +Чтобы решить эту проблему, **Хуки позволяют вам разделять один компонент на маленькие функции, в зависимости от того, какие части связаны (например, подписка или загрузка данных)**, вместо разделения компонентов на основе методов жизненного цикла. Вы так же можете контролировать локальное состояние с помощью редьюсера, чтобы поведение было более предсказуемым. -We'll discuss this more in [Using the Effect Hook](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). +Мы обсудим это в разделе [использование эффект хуков](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). -### Classes confuse both people and machines {#classes-confuse-both-people-and-machines} +### Классы путают как людей, так и машины {#classes-confuse-both-people-and-machines} -In addition to making code reuse and code organization more difficult, we've found that classes can be a large barrier to learning React. You have to understand how `this` works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable [syntax proposals](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers. +В дополнение к тому, что усложняется организация кода и его переиспользование, мы обнаружили, что классы могут быть большим барьером для изучения React. Вы должны понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Вы должны помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится неоднозначным. Люди могут прекрасно понимать пропсы, стейт и поток данных сверху вниз, но они всё ещё борются с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводит к разногласиям даже между опытными React-разработчиками. -Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path. +Кроме того, React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течении следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, использующие [компиляцию компонентов перед исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеют огромный потенциал в будущем. Особенно, если это не ограничивается шаблонами. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и мы увидели первые многообещающие результаты. -To solve these problems, **Hooks let you use more of React's features without classes.** Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques. +Однако мы заметили, что классовые компоненты могут добавлять непредвиденные шаблоны, которые заставляют оптимизацию возвращаться к более медленным путям. Классы всё ещё являются проблемой для современных инструментов. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и ломает их. Мы хотим предоставить API, который повысит вероятность того, что код можно будет оптимизировать. ->Examples +Для решения этих проблем, **Хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не жертвуют практическим духом React. Хуки предоставляют доступ к запасным выходам и не требуют от вас изучения сложных функциональных или реактивных подходов. + +>Примеры > ->[Hooks at a Glance](/docs/hooks-overview.html) is a good place to start learning Hooks. +>[Обзор хуков](/docs/hooks-overview.html) — хорошее начало для изучения Хуков. -## Gradual Adoption Strategy {#gradual-adoption-strategy} +## Стратегия постепенного внедрения {#gradual-adoption-strategy} ->**TLDR: There are no plans to remove classes from React.** +>**TLDR: Мы не планируем удалять классы из React.** -We know that React developers are focused on shipping products and don't have time to look into every new API that's being released. Hooks are very new, and it might be better to wait for more examples and tutorials before considering learning or adopting them. +Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени, чтобы изучать новый API каждого релиза. Хуки это что-то новое и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение. -We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art. +Мы так же понимаем, что препятствие для добавления новых примитивов в React очень высоко. Для любознательных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), который погружает в детали и предоставляет дополнительные решения и обзоры техник. -**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** We are sharing this experimental API to get early feedback from those in the community who are interested in shaping the future of React — and we will iterate on Hooks in the open. +**Важно понимать, что Хуки работают бок о бок с существущим кодом, поэтому вы можете постепенно внедрять их.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать Хуки в открытую. -Finally, there is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative. +Наконец, нет никакой необходимости переходить на Хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Это требует немного изменить мировоззрение, чтобы начать «мыслить Хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать Хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуйте, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. -We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes. +Мы намерены охватить все возможные варианты использования классов в Хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов на переписывание их. Вместо этого мы начинаем использовать Хуки в новом коде бок о бок с классами. -## Frequently Asked Questions {#frequently-asked-questions} +## Часто задаваемые вопросы {#frequently-asked-questions} -We've prepared a [Hooks FAQ page](/docs/hooks-faq.html) that answers the most common questions about Hooks. +Мы подготовили для вас [FAQ страницу](/docs/hooks-faq.html) с ответами на самые частые вопросы о Хуках. -## Next Steps {#next-steps} +## Следующие шаги {#next-steps} -By the end of this page, you should have a rough idea of what problems Hooks are solving, but many details are probably unclear. Don't worry! **Let's now go to [the next page](/docs/hooks-overview.html) where we start learning about Hooks by example.** +К концу этой страницы вы должны иметь приблизительное представление о том, какие проблемы решают Хуки, но многие детали, возможно, остались непонятны. Не беспокойтесь! **Давайте теперь перейдём на [следующую страницу](/docs/hooks-overview.html), где мы изучим Хуки на примерах.** From 7adac4cf673bbf7d4b4a168cdf472a763a936aec Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Mon, 11 Feb 2019 12:25:25 +0300 Subject: [PATCH 02/20] Fixed hooks naming to lower case --- content/docs/hooks-intro.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index bbc93f2ca..8658a75c5 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -27,15 +27,15 @@ function Example() { Функция `useState` это первый «Хук», который мы изучим и это всего лишь небольшой пример. Не переживайте, если вы пока не понимаете зачем они нужны. -**Вы можете начать изучать Хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили Хуки в React, и как они помогут вам писать приложения лучше. +**Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения лучше. >Примечание > ->React 16.8.0 это первый релиз поддерживающий Хуки. При обновлении версии, не забудьте обновить все зависимости, включая ReactDOM. React Native будет поддерживать Хуки в следующем стабильном релизе. +>React 16.8.0 это первый релиз поддерживающий хуки. При обновлении версии, не забудьте обновить все зависимости, включая ReactDOM. React Native будет поддерживать хуки в следующем стабильном релизе. ## Видео введение {#video-introduction} -На конференции React Conf 2018, Софья Альперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили Хуки, а затем Райн Фроленц (Ryan Florence) показал, как с их помощью переписать ваше приложение. Видео конференции можно посмотреть здесь: +На конференции React Conf 2018, Софья Альперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а затем Райн Фроленц (Ryan Florence) показал, как с их помощью переписать ваше приложение. Видео конференции можно посмотреть здесь:
@@ -43,17 +43,17 @@ function Example() { ## Не нарушая совместимость {#no-breaking-changes} -Перед тем, как мы продолжим, запомните, что Хуки: +Перед тем, как мы продолжим, запомните, что хуки: -* **Полностью на ваше усмотрение.** Вы можете попробовать Хуки в нескольких компонентах, не изменяя код в уже существующих. Нет необходимости учить и использовать Хуки прямо сейчас, если не хотите. -* **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. -* **Доступны прямо сейчас.** Хуки доступны с выходом версии v16.8.0. +* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в нескольких компонентах, не изменяя код в уже существующих. Нет необходимости учить и использовать хуки прямо сейчас, если не хотите. +* **100% обратно совместимы.** хуки не содержат изменений, которые могут поломать ваш существующий код. +* **Доступны прямо сейчас.** хуки доступны с выходом версии v16.8.0. **Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения новых Хуков в [разделе ниже](#gradual-adoption-strategy). -**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, Хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсы, состояние, контексты, рефы, и жизненный цикл. Позже мы покажем вам, что Хуки предоставляют мощный способ для объединения этих концепций. +**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсы, состояние, контексты, рефы, и жизненный цикл. Позже мы покажем вам, что хуки предоставляют мощный способ для объединения этих концепций. -**Если вы хотите начать изучать Хуки, то [переходите на следующую страницу!](/docs/hooks-overview.html)** Вы можете продолжить чтение этой страницы, чтобы узнать больше о том, почему бы добавили Хуки и как мы можем использовать их без переписывания нашего приложения. +**Если вы хотите начать изучать хуки, то [переходите на следующую страницу!](/docs/hooks-overview.html)** Вы можете продолжить чтение этой страницы, чтобы узнать больше о том, почему бы добавили хуки и как мы можем использовать их без переписывания нашего приложения. ## Мотивация {#motivation} @@ -73,7 +73,7 @@ React не позволяет переиспользовать поведени В некоторых случаях, невозможно разбить компоненты на более мелкие, потому что логика с отслеживанием состояния повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и делает переиспользуемые компоненты более сложными. -Чтобы решить эту проблему, **Хуки позволяют вам разделять один компонент на маленькие функции, в зависимости от того, какие части связаны (например, подписка или загрузка данных)**, вместо разделения компонентов на основе методов жизненного цикла. Вы так же можете контролировать локальное состояние с помощью редьюсера, чтобы поведение было более предсказуемым. +Чтобы решить эту проблему, **хуки позволяют вам разделять один компонент на маленькие функции, в зависимости от того, какие части связаны (например, подписка или загрузка данных)**, вместо разделения компонентов на основе методов жизненного цикла. Вы так же можете контролировать локальное состояние с помощью редьюсера, чтобы поведение было более предсказуемым. Мы обсудим это в разделе [использование эффект хуков](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). @@ -85,7 +85,7 @@ React не позволяет переиспользовать поведени Однако мы заметили, что классовые компоненты могут добавлять непредвиденные шаблоны, которые заставляют оптимизацию возвращаться к более медленным путям. Классы всё ещё являются проблемой для современных инструментов. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и ломает их. Мы хотим предоставить API, который повысит вероятность того, что код можно будет оптимизировать. -Для решения этих проблем, **Хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не жертвуют практическим духом React. Хуки предоставляют доступ к запасным выходам и не требуют от вас изучения сложных функциональных или реактивных подходов. +Для решения этих проблем, **хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не жертвуют практическим духом React. Хуки предоставляют доступ к запасным выходам и не требуют от вас изучения сложных функциональных или реактивных подходов. >Примеры > @@ -99,11 +99,11 @@ React не позволяет переиспользовать поведени Мы так же понимаем, что препятствие для добавления новых примитивов в React очень высоко. Для любознательных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), который погружает в детали и предоставляет дополнительные решения и обзоры техник. -**Важно понимать, что Хуки работают бок о бок с существущим кодом, поэтому вы можете постепенно внедрять их.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать Хуки в открытую. +**Важно понимать, что хуки работают бок о бок с существущим кодом, поэтому вы можете постепенно внедрять их.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать хуки в открытую. -Наконец, нет никакой необходимости переходить на Хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Это требует немного изменить мировоззрение, чтобы начать «мыслить Хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать Хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуйте, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. +Наконец, нет никакой необходимости переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Это требует немного изменить мировоззрение, чтобы начать «мыслить Хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуйте, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. -Мы намерены охватить все возможные варианты использования классов в Хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов на переписывание их. Вместо этого мы начинаем использовать Хуки в новом коде бок о бок с классами. +Мы намерены охватить все возможные варианты использования классов в Хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов на переписывание их. Вместо этого мы начинаем использовать хуки в новом коде бок о бок с классами. ## Часто задаваемые вопросы {#frequently-asked-questions} @@ -111,4 +111,4 @@ React не позволяет переиспользовать поведени ## Следующие шаги {#next-steps} -К концу этой страницы вы должны иметь приблизительное представление о том, какие проблемы решают Хуки, но многие детали, возможно, остались непонятны. Не беспокойтесь! **Давайте теперь перейдём на [следующую страницу](/docs/hooks-overview.html), где мы изучим Хуки на примерах.** +К концу этой страницы вы должны иметь приблизительное представление о том, какие проблемы решают хуки, но многие детали, возможно, остались непонятны. Не беспокойтесь! **Давайте теперь перейдём на [следующую страницу](/docs/hooks-overview.html), где мы изучим хуки на примерах.** From f35340a0e846391167c031165691ddc8bbe2286e Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Mon, 11 Feb 2019 16:27:17 +0300 Subject: [PATCH 03/20] Fixed word with count of components --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 8658a75c5..4d7930738 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -57,7 +57,7 @@ function Example() { ## Мотивация {#motivation} -Хуки решают огромное количество, казалось бы несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятки тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, вы должны узнать некоторые из этих проблем. +Хуки решают огромное количество, казалось бы несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятков тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, вы должны узнать некоторые из этих проблем. ### Трудно переиспользовать логику состояний между компонентами {#its-hard-to-reuse-stateful-logic-between-components} From a9c6e0655009990d22b00f615fcdd304a1814ed0 Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Mon, 11 Feb 2019 18:59:34 +0300 Subject: [PATCH 04/20] Fixed part about thinking in Hooks --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 4d7930738..8e2662fb7 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -101,7 +101,7 @@ React не позволяет переиспользовать поведени **Важно понимать, что хуки работают бок о бок с существущим кодом, поэтому вы можете постепенно внедрять их.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать хуки в открытую. -Наконец, нет никакой необходимости переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Это требует немного изменить мировоззрение, чтобы начать «мыслить Хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуйте, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. +Наконец, нет никакой необходимости переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить Хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. Мы намерены охватить все возможные варианты использования классов в Хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов на переписывание их. Вместо этого мы начинаем использовать хуки в новом коде бок о бок с классами. From 0db1d4f89c667155e1a47be7dfec5795b5fdb2f2 Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Tue, 12 Feb 2019 17:12:19 +0300 Subject: [PATCH 05/20] Some fixes after review --- content/docs/hooks-intro.md | 42 ++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 8e2662fb7..8fb870750 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -5,13 +5,13 @@ permalink: docs/hooks-intro.html next: hooks-overview.html --- -*Хуки* это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие возможности React без написания классов. +*Хуки* — это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие возможности React без написания классов. ```js{4,5} import React, { useState } from 'react'; function Example() { - // Объявление переменной состояния, которую мы назовём «count» + // Объявление переменной состояния, которую мы назовём "count" const [count, setCount] = useState(0); return ( @@ -25,29 +25,29 @@ function Example() { } ``` -Функция `useState` это первый «Хук», который мы изучим и это всего лишь небольшой пример. Не переживайте, если вы пока не понимаете зачем они нужны. +Функция `useState` это первый «хук», который мы изучим и это всего лишь небольшой пример. Не переживайте, если вы пока не понимаете зачем они нужны. **Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения лучше. >Примечание > ->React 16.8.0 это первый релиз поддерживающий хуки. При обновлении версии, не забудьте обновить все зависимости, включая ReactDOM. React Native будет поддерживать хуки в следующем стабильном релизе. +>React 16.8.0 это первый релиз поддерживающий хуки. При обновлении версии, не забудьте обновить все зависимости, включая React DOM. React Native будет поддерживать хуки в следующем стабильном релизе. -## Видео введение {#video-introduction} +## Видео-представление {#video-introduction} -На конференции React Conf 2018, Софья Альперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а затем Райн Фроленц (Ryan Florence) показал, как с их помощью переписать ваше приложение. Видео конференции можно посмотреть здесь: +На конференции React Conf 2018, Софи Алперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а затем Райн Флоренс (Ryan Florence) показал, как с их помощью переписать ваше приложение. Видео конференции можно посмотреть здесь:
-## Не нарушая совместимость {#no-breaking-changes} +## Обратная совместимость сохранена {#no-breaking-changes} Перед тем, как мы продолжим, запомните, что хуки: * **Полностью на ваше усмотрение.** Вы можете попробовать хуки в нескольких компонентах, не изменяя код в уже существующих. Нет необходимости учить и использовать хуки прямо сейчас, если не хотите. -* **100% обратно совместимы.** хуки не содержат изменений, которые могут поломать ваш существующий код. -* **Доступны прямо сейчас.** хуки доступны с выходом версии v16.8.0. +* **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. +* **Доступны прямо сейчас.** Хуки доступны с выходом версии v16.8.0. **Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения новых Хуков в [разделе ниже](#gradual-adoption-strategy). @@ -61,17 +61,17 @@ function Example() { ### Трудно переиспользовать логику состояний между компонентами {#its-hard-to-reuse-stateful-logic-between-components} -React не позволяет переиспользовать поведение компонентов (например, передача хранилища). Если вы работали с React какое-то время, то вы должны быть знакомы с такими паттернами как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html) которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), но всё это указывает на более глубокую проблему: необходимость в React более удобного способа для обмена логикой состояния. +В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вы должны быть знакомы с такими паттернами как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html) которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), но всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния. С помощью хуков вы можете извлечь логику состояния из компонента, чтобы протестировать её независимо и повторно использовать. **Хуки позволяют вам переиспользовать логику состояния без изменения структуры компонента.** Это позволяет обмениваться Хуками между компонентами или делиться с сообществом. -Мы обсудим это подробнее в разделе [создание собственных Хуков](/docs/hooks-custom.html). +Мы обсудим это подробнее в разделе [Создание собственных Хуков](/docs/hooks-custom.html). ### Сложные компоненты становятся трудными для понимания {#complex-components-become-hard-to-understand} Нам часто приходилось поддерживать компоненты, которые изначально были простыми, но превратились в неуправляемый беспорядок, состоящий из логики состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут загружать данные в `componentDidMount` и `componentDidUpdate`. Однако тот же метод `componentDidMount` может содержать несвязанную логику, которая добавляет обработчики события с отменой подписки в `componentWillUnmount`. Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно несвязанный код в конечном итоге объединяется в один метод. Из-за этого слишком легко добавить баги и несоответствия в приложение. -В некоторых случаях, невозможно разбить компоненты на более мелкие, потому что логика с отслеживанием состояния повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и делает переиспользуемые компоненты более сложными. +В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика с состоянием раскидана повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов. Чтобы решить эту проблему, **хуки позволяют вам разделять один компонент на маленькие функции, в зависимости от того, какие части связаны (например, подписка или загрузка данных)**, вместо разделения компонентов на основе методов жизненного цикла. Вы так же можете контролировать локальное состояние с помощью редьюсера, чтобы поведение было более предсказуемым. @@ -79,13 +79,11 @@ React не позволяет переиспользовать поведени ### Классы путают как людей, так и машины {#classes-confuse-both-people-and-machines} -В дополнение к тому, что усложняется организация кода и его переиспользование, мы обнаружили, что классы могут быть большим барьером для изучения React. Вы должны понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Вы должны помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится неоднозначным. Люди могут прекрасно понимать пропсы, стейт и поток данных сверху вниз, но они всё ещё борются с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводит к разногласиям даже между опытными React-разработчиками. +В дополнение к тому, что усложняется организация кода и его переиспользование, мы обнаружили, что классы могут быть большим барьером в изучении React. Вы должны понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Вы должны помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится неоднозначным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но они всё ещё разбираются с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводит к разногласиям даже между опытными React-разработчиками. -Кроме того, React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течении следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, использующие [компиляцию компонентов перед исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеют огромный потенциал в будущем. Особенно, если это не ограничивается шаблонами. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и мы увидели первые многообещающие результаты. +React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, использующие [компиляцию компонентов перед исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеют огромный потенциал в будущем. Особенно, если это не ограничивается шаблонами. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и мы увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизацию на нет. Классы всё ещё являются проблемой для современных инструментов. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и ломает их. Мы хотим предоставить API, который повысит вероятность того, что код можно будет оптимизировать. -Однако мы заметили, что классовые компоненты могут добавлять непредвиденные шаблоны, которые заставляют оптимизацию возвращаться к более медленным путям. Классы всё ещё являются проблемой для современных инструментов. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и ломает их. Мы хотим предоставить API, который повысит вероятность того, что код можно будет оптимизировать. - -Для решения этих проблем, **хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не жертвуют практическим духом React. Хуки предоставляют доступ к запасным выходам и не требуют от вас изучения сложных функциональных или реактивных подходов. +Для решения этих проблем, **хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не жертвуют практическим духом React. Хуки предоставляют альтернативный доступ и не требуют от вас изучения сложных функциональных или реактивных подходов. >Примеры > @@ -95,20 +93,20 @@ React не позволяет переиспользовать поведени >**TLDR: Мы не планируем удалять классы из React.** -Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени, чтобы изучать новый API каждого релиза. Хуки это что-то новое и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение. +Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени изучать новый API каждого релиза. Хуки это что-то новое и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение. Мы так же понимаем, что препятствие для добавления новых примитивов в React очень высоко. Для любознательных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), который погружает в детали и предоставляет дополнительные решения и обзоры техник. -**Важно понимать, что хуки работают бок о бок с существущим кодом, поэтому вы можете постепенно внедрять их.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать хуки в открытую. +**Важно понимать, что хуки работают рядом с существущим кодом, поэтому вы можете внедрять их постепенно.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать хуки в открытую. Наконец, нет никакой необходимости переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить Хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. -Мы намерены охватить все возможные варианты использования классов в Хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов на переписывание их. Вместо этого мы начинаем использовать хуки в новом коде бок о бок с классами. +Мы намерены охватить все возможные варианты использования классов в Хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов на переписывание их. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами. ## Часто задаваемые вопросы {#frequently-asked-questions} -Мы подготовили для вас [FAQ страницу](/docs/hooks-faq.html) с ответами на самые частые вопросы о Хуках. +Мы подготовили для вас [страницу с FAQ](/docs/hooks-faq.html) с ответами на самые частые вопросы о Хуках. ## Следующие шаги {#next-steps} -К концу этой страницы вы должны иметь приблизительное представление о том, какие проблемы решают хуки, но многие детали, возможно, остались непонятны. Не беспокойтесь! **Давайте теперь перейдём на [следующую страницу](/docs/hooks-overview.html), где мы изучим хуки на примерах.** +К концу этой страницы вы должны иметь общее представление о том, какие проблемы решают хуки, но многие детали, возможно, остались непонятны. Не беспокойтесь! **Давайте перейдём на [следующую страницу](/docs/hooks-overview.html), где мы изучим хуки на примерах.** From 5bfef489a87e62aa7d8dbd56d5ac462b33416fc4 Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Thu, 14 Feb 2019 10:12:15 +0300 Subject: [PATCH 06/20] Fixed sentences and punctuation errors --- content/docs/hooks-intro.md | 40 ++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 8fb870750..0d38b5807 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -5,7 +5,7 @@ permalink: docs/hooks-intro.html next: hooks-overview.html --- -*Хуки* — это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие возможности React без написания классов. +*Хуки* — новая возможность в React 16.8, которая позволяют использовать состояние и другие возможности React без написания классов. ```js{4,5} import React, { useState } from 'react'; @@ -25,31 +25,31 @@ function Example() { } ``` -Функция `useState` это первый «хук», который мы изучим и это всего лишь небольшой пример. Не переживайте, если вы пока не понимаете зачем они нужны. +Функция `useState` это первый «хук», который мы изучим, и это всего лишь небольшой пример. Не переживайте, если вы пока не понимаете зачем они нужны. **Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения лучше. >Примечание > ->React 16.8.0 это первый релиз поддерживающий хуки. При обновлении версии, не забудьте обновить все зависимости, включая React DOM. React Native будет поддерживать хуки в следующем стабильном релизе. +>React 16.8.0 это первый релиз, поддерживающий хуки. При обновлении версии, не забудьте обновить все зависимости, включая React DOM. React Native будет поддерживать хуки в следующем стабильном релизе. ## Видео-представление {#video-introduction} -На конференции React Conf 2018, Софи Алперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а затем Райн Флоренс (Ryan Florence) показал, как с их помощью переписать ваше приложение. Видео конференции можно посмотреть здесь: +На конференции React Conf 2018, Софи Алперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а затем Райн Флоренс (Ryan Florence) показал, как их использовать в приложении. Видео конференции можно посмотреть здесь:
-## Обратная совместимость сохранена {#no-breaking-changes} +## Полная обратная совместимость {#no-breaking-changes} -Перед тем, как мы продолжим, запомните, что хуки: +Перед тем, как мы продолжим, обратите внимание, что хуки: * **Полностью на ваше усмотрение.** Вы можете попробовать хуки в нескольких компонентах, не изменяя код в уже существующих. Нет необходимости учить и использовать хуки прямо сейчас, если не хотите. * **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. * **Доступны прямо сейчас.** Хуки доступны с выходом версии v16.8.0. -**Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения новых Хуков в [разделе ниже](#gradual-adoption-strategy). +**Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения хуков в [разделе ниже](#gradual-adoption-strategy). **Хуки не меняют ваши знания о концепциях в React.** Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсы, состояние, контексты, рефы, и жизненный цикл. Позже мы покажем вам, что хуки предоставляют мощный способ для объединения этих концепций. @@ -57,15 +57,15 @@ function Example() { ## Мотивация {#motivation} -Хуки решают огромное количество, казалось бы несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятков тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, вы должны узнать некоторые из этих проблем. +Хуки решают множество, казалось бы, несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятков тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, вы можете узнать некоторые из этих проблем. ### Трудно переиспользовать логику состояний между компонентами {#its-hard-to-reuse-stateful-logic-between-components} -В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вы должны быть знакомы с такими паттернами как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html) которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), но всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния. +В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вам могут быть знакомы такие паттерны, как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html), которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), но всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния. -С помощью хуков вы можете извлечь логику состояния из компонента, чтобы протестировать её независимо и повторно использовать. **Хуки позволяют вам переиспользовать логику состояния без изменения структуры компонента.** Это позволяет обмениваться Хуками между компонентами или делиться с сообществом. +С помощью хуков вы можете извлечь логику состояния из компонента, чтобы протестировать её независимо и повторно использовать. **Хуки позволяют вам переиспользовать логику состояния без изменения структуры компонента.** Это позволяет обмениваться хуками между компонентами или делиться с сообществом. -Мы обсудим это подробнее в разделе [Создание собственных Хуков](/docs/hooks-custom.html). +Мы обсудим это подробнее в разделе [Создание собственных хуков](/docs/hooks-custom.html). ### Сложные компоненты становятся трудными для понимания {#complex-components-become-hard-to-understand} @@ -73,21 +73,21 @@ function Example() { В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика с состоянием раскидана повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов. -Чтобы решить эту проблему, **хуки позволяют вам разделять один компонент на маленькие функции, в зависимости от того, какие части связаны (например, подписка или загрузка данных)**, вместо разделения компонентов на основе методов жизненного цикла. Вы так же можете контролировать локальное состояние с помощью редьюсера, чтобы поведение было более предсказуемым. +Чтобы решить эту проблему, **хуки позволяют вам разделять один компонент на маленькие функции, в зависимости от того, какие части связаны (например, подписка или загрузка данных)**, вместо разделения компонентов на основе методов жизненного цикла. Вы также можете контролировать локальное состояние с помощью редюсера, чтобы поведение было более предсказуемым. -Мы обсудим это в разделе [использование эффект хуков](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). +Мы обсудим это в разделе [использование эффект-хуков](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). ### Классы путают как людей, так и машины {#classes-confuse-both-people-and-machines} -В дополнение к тому, что усложняется организация кода и его переиспользование, мы обнаружили, что классы могут быть большим барьером в изучении React. Вы должны понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Вы должны помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится неоднозначным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но они всё ещё разбираются с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводит к разногласиям даже между опытными React-разработчиками. +В дополнение к тому, что усложняется организация кода и его переиспользование, мы обнаружили, что классы могут быть большим барьером в изучении React. Вам нужно понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Вам приходится помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится многословным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но всё равно путаться с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводит к разногласиям даже между опытными React-разработчиками. React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, использующие [компиляцию компонентов перед исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеют огромный потенциал в будущем. Особенно, если это не ограничивается шаблонами. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и мы увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизацию на нет. Классы всё ещё являются проблемой для современных инструментов. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и ломает их. Мы хотим предоставить API, который повысит вероятность того, что код можно будет оптимизировать. -Для решения этих проблем, **хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не жертвуют практическим духом React. Хуки предоставляют альтернативный доступ и не требуют от вас изучения сложных функциональных или реактивных подходов. +Для решения этих проблем, **хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не обесценивают опыт использования React. Хуки предоставляют императивные лазейки и не требуют от вас изучения сложных функциональных или реактивных подходов. >Примеры > ->[Обзор хуков](/docs/hooks-overview.html) — хорошее начало для изучения Хуков. +>[Обзор хуков](/docs/hooks-overview.html) — хорошее начало для изучения хуков. ## Стратегия постепенного внедрения {#gradual-adoption-strategy} @@ -95,17 +95,17 @@ React существует уже около пяти лет и мы хотим Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени изучать новый API каждого релиза. Хуки это что-то новое и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение. -Мы так же понимаем, что препятствие для добавления новых примитивов в React очень высоко. Для любознательных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), который погружает в детали и предоставляет дополнительные решения и обзоры техник. +Мы также понимаем, что планка для добавления новых примитивов в React очень высока. Поэтому для любопытных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), в котором можно найти больше информации о деталях и техниках решения проблем. **Важно понимать, что хуки работают рядом с существущим кодом, поэтому вы можете внедрять их постепенно.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать хуки в открытую. -Наконец, нет никакой необходимости переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить Хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. +Наконец, нет никакой необходимости переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. -Мы намерены охватить все возможные варианты использования классов в Хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов на переписывание их. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами. +Мы намерены охватить все возможные варианты использования классов в хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами. ## Часто задаваемые вопросы {#frequently-asked-questions} -Мы подготовили для вас [страницу с FAQ](/docs/hooks-faq.html) с ответами на самые частые вопросы о Хуках. +Мы подготовили для вас [страницу с FAQ](/docs/hooks-faq.html) с ответами на самые частые вопросы о хуках. ## Следующие шаги {#next-steps} From 6f65ad4eca505f73eefd6ba9c23c48e62196dff7 Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Thu, 14 Feb 2019 12:46:47 +0300 Subject: [PATCH 07/20] Changed text about opt-in information --- content/docs/hooks-intro.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 0d38b5807..02dea7a37 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -45,7 +45,8 @@ function Example() { Перед тем, как мы продолжим, обратите внимание, что хуки: -* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в нескольких компонентах, не изменяя код в уже существующих. Нет необходимости учить и использовать хуки прямо сейчас, если не хотите. +* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в нескольких компонентах, не изменяя код в уже существующих. Если не хотите, то можете не использовать хуки прямо сейчас. + * **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. * **Доступны прямо сейчас.** Хуки доступны с выходом версии v16.8.0. From c04e76b23bd2cbe94d0b9832ab18e5d958063b02 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Fri, 15 Feb 2019 09:17:15 +0300 Subject: [PATCH 08/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 02dea7a37..49a01e5bf 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -48,7 +48,7 @@ function Example() { * **Полностью на ваше усмотрение.** Вы можете попробовать хуки в нескольких компонентах, не изменяя код в уже существующих. Если не хотите, то можете не использовать хуки прямо сейчас. * **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. -* **Доступны прямо сейчас.** Хуки доступны с выходом версии v16.8.0. +* **Доступны прямо сейчас.** Хуки доступны с выходом версии 16.8.0. **Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения хуков в [разделе ниже](#gradual-adoption-strategy). From fa8a6bc6919bdc77065f130c01a00f77198cd82d Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Fri, 15 Feb 2019 09:17:29 +0300 Subject: [PATCH 09/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 49a01e5bf..3cd9f2636 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -106,7 +106,7 @@ React существует уже около пяти лет и мы хотим ## Часто задаваемые вопросы {#frequently-asked-questions} -Мы подготовили для вас [страницу с FAQ](/docs/hooks-faq.html) с ответами на самые частые вопросы о хуках. +Мы подготовили для вас [страницу FAQ](/docs/hooks-faq.html) с ответами на самые частые вопросы о хуках. ## Следующие шаги {#next-steps} From 490cb5ec7da9a4de20b19f529404524d177b535d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 15 Feb 2019 15:19:05 +0000 Subject: [PATCH 10/20] Update hooks-intro.md --- content/docs/hooks-intro.md | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 3cd9f2636..787821bed 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -5,7 +5,7 @@ permalink: docs/hooks-intro.html next: hooks-overview.html --- -*Хуки* — новая возможность в React 16.8, которая позволяют использовать состояние и другие возможности React без написания классов. +*Хуки* — новая возможность в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов. ```js{4,5} import React, { useState } from 'react'; @@ -25,7 +25,7 @@ function Example() { } ``` -Функция `useState` это первый «хук», который мы изучим, и это всего лишь небольшой пример. Не переживайте, если вы пока не понимаете зачем они нужны. +Мы начнём изучение с первого «хука» — функции `useState`. Не беспокойтесь, если этот пример сначала выглядит непонятно. Мы скоро разберёмся, как он работает. **Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения лучше. @@ -45,26 +45,25 @@ function Example() { Перед тем, как мы продолжим, обратите внимание, что хуки: -* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в нескольких компонентах, не изменяя код в уже существующих. Если не хотите, то можете не использовать хуки прямо сейчас. - +* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в некоторых компонентах, не изменяя код в уже существующих. Хуки не обязательно использовать или изучать прямо сейчас. * **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. * **Доступны прямо сейчас.** Хуки доступны с выходом версии 16.8.0. **Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения хуков в [разделе ниже](#gradual-adoption-strategy). -**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсы, состояние, контексты, рефы, и жизненный цикл. Позже мы покажем вам, что хуки предоставляют мощный способ для объединения этих концепций. +**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсов, состояния, контекста, рефов, и жизненного цикла. Мы также рассмотрим, как хуки предоставляют мощный способ по-новому компоновать эти понятия между собой. -**Если вы хотите начать изучать хуки, то [переходите на следующую страницу!](/docs/hooks-overview.html)** Вы можете продолжить чтение этой страницы, чтобы узнать больше о том, почему бы добавили хуки и как мы можем использовать их без переписывания нашего приложения. +**Чтобы начать изучать хуки, [перейдите на следующую страницу!](/docs/hooks-overview.html)** На этой странице мы расскажем о том, зачем нужны хуки, и как их использовать, не переписывая наши приложения. ## Мотивация {#motivation} -Хуки решают множество, казалось бы, несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятков тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, вы можете узнать некоторые из этих проблем. +Хуки решают множество, казалось бы, несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятков тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, эти проблемы наверняка покажутся вам знакомыми. ### Трудно переиспользовать логику состояний между компонентами {#its-hard-to-reuse-stateful-logic-between-components} В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вам могут быть знакомы такие паттерны, как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html), которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), но всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния. -С помощью хуков вы можете извлечь логику состояния из компонента, чтобы протестировать её независимо и повторно использовать. **Хуки позволяют вам переиспользовать логику состояния без изменения структуры компонента.** Это позволяет обмениваться хуками между компонентами или делиться с сообществом. +С помощью хуков вы можете извлечь логику состояния из компонента, чтобы её протестировать или повторно использовать. **Хуки позволяют вам переиспользовать логику состояния, не затрагивая дерево компонентов.** Вы можете использовать одни и те же хуки в разных компонентах или делиться ими с сообществом. Мы обсудим это подробнее в разделе [Создание собственных хуков](/docs/hooks-custom.html). @@ -74,17 +73,17 @@ function Example() { В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика с состоянием раскидана повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов. -Чтобы решить эту проблему, **хуки позволяют вам разделять один компонент на маленькие функции, в зависимости от того, какие части связаны (например, подписка или загрузка данных)**, вместо разделения компонентов на основе методов жизненного цикла. Вы также можете контролировать локальное состояние с помощью редюсера, чтобы поведение было более предсказуемым. +Чтобы решить эту проблему, **хуки позволяют разбить один компонент на маленькие функции по их назначению (например, подписке или загрузке данных)**, а не на основе методов жизненного цикла. Вы также можете контролировать локальное состояние с помощью редюсера, чтобы поведение было более предсказуемым. Мы обсудим это в разделе [использование эффект-хуков](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). ### Классы путают как людей, так и машины {#classes-confuse-both-people-and-machines} -В дополнение к тому, что усложняется организация кода и его переиспользование, мы обнаружили, что классы могут быть большим барьером в изучении React. Вам нужно понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Вам приходится помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится многословным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но всё равно путаться с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводит к разногласиям даже между опытными React-разработчиками. +Вдобавок к усложнению организации кода и его переиспользования, классы создают существенный барьер в изучении React. Нужно понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Приходится помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится многословным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но всё равно путаться с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводят к разногласиям даже между опытными React-разработчиками. -React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, использующие [компиляцию компонентов перед исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеют огромный потенциал в будущем. Особенно, если это не ограничивается шаблонами. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и мы увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизацию на нет. Классы всё ещё являются проблемой для современных инструментов. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и ломает их. Мы хотим предоставить API, который повысит вероятность того, что код можно будет оптимизировать. +Вдобавок, React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, использующие [компиляцию компонентов перед исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеют огромный потенциал в будущем. Особенно, если это не ограничивается шаблонами. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизации на нет. Классы создают сложности для инструментов и сегодня. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и часто ломает их. Наша цель — предоставить API, который повысит вероятность того, что код можно будет оптимизировать. -Для решения этих проблем, **хуки позволяют вам использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не обесценивают опыт использования React. Хуки предоставляют императивные лазейки и не требуют от вас изучения сложных функциональных или реактивных подходов. +Чтобы решить эти проблемы, **хуки позволяют использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не обесценивают опыт использования React. Хуки предоставляют императивные лазейки и не требуют от вас изучения сложных функциональных или реактивных подходов. >Примеры > @@ -94,15 +93,15 @@ React существует уже около пяти лет и мы хотим >**TLDR: Мы не планируем удалять классы из React.** -Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени изучать новый API каждого релиза. Хуки это что-то новое и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение. +Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени изучать новый API каждого релиза. Хуки это что-то новое, и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение. -Мы также понимаем, что планка для добавления новых примитивов в React очень высока. Поэтому для любопытных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), в котором можно найти больше информации о деталях и техниках решения проблем. +Мы также понимаем, что планка для добавления новых примитивов в React очень высока. Поэтому для любопытных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), в котором можно найти больше информации о технических аспектах выбранного дизайна. -**Важно понимать, что хуки работают рядом с существущим кодом, поэтому вы можете внедрять их постепенно.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, в сообществе, кто заинтересован в формировании будущего React и мы будем разбирать хуки в открытую. +**Важно понимать, что хуки работают рядом с существущим кодом, поэтому вы можете внедрять их постепенно.** Мы делимся этим API, чтобы получить раннюю обратную связь от тех, кто заинтересован в формировании будущего React. Вся разработка происходит в открытую. -Наконец, нет никакой необходимости переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. +Наконец, нет спешки переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный. -Мы намерены охватить все возможные варианты использования классов в хуках, но **мы всё ещё будем поддерживать классовые компоненты в ближайшем будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами. +Мы намерены охватить все возможные варианты использования классов в хуках, но **мы всё ещё будем поддерживать классовые компоненты в обозримом будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами. ## Часто задаваемые вопросы {#frequently-asked-questions} From bfc6e12f1d502e30964ce1617f954f04d2328d94 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 15 Feb 2019 15:21:36 +0000 Subject: [PATCH 11/20] Update hooks-intro.md --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 787821bed..842cad2b8 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -27,7 +27,7 @@ function Example() { Мы начнём изучение с первого «хука» — функции `useState`. Не беспокойтесь, если этот пример сначала выглядит непонятно. Мы скоро разберёмся, как он работает. -**Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения лучше. +**Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения. >Примечание > From e7a4f8cfd99b3193ce33271f721bb4ed874711c6 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 22:56:33 +0300 Subject: [PATCH 12/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 842cad2b8..8a9c445f3 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -69,7 +69,7 @@ function Example() { ### Сложные компоненты становятся трудными для понимания {#complex-components-become-hard-to-understand} -Нам часто приходилось поддерживать компоненты, которые изначально были простыми, но превратились в неуправляемый беспорядок, состоящий из логики состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут загружать данные в `componentDidMount` и `componentDidUpdate`. Однако тот же метод `componentDidMount` может содержать несвязанную логику, которая добавляет обработчики события с отменой подписки в `componentWillUnmount`. Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно несвязанный код в конечном итоге объединяется в один метод. Из-за этого слишком легко добавить баги и несоответствия в приложение. +Нам часто приходилось поддерживать компоненты, которые изначально были простыми, но превратились в неуправляемый беспорядок, состоящий из логики состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут загружать данные в `componentDidMount` и `componentDidUpdate`. Однако тот же метод `componentDidMount` может содержать несвязанную логику, которая добавляет обработчики события с отменой подписки в `componentWillUnmount`. Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно несвязанный код в конечном итоге объединяется в один метод. Это легко приводит к багам и несоответствиям в приложении. В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика с состоянием раскидана повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов. From 2066463abaabb34b7faed3e98e847c042a6fe8a1 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 23:05:31 +0300 Subject: [PATCH 13/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 8a9c445f3..9547c4c82 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -35,7 +35,7 @@ function Example() { ## Видео-представление {#video-introduction} -На конференции React Conf 2018, Софи Алперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а затем Райн Флоренс (Ryan Florence) показал, как их использовать в приложении. Видео конференции можно посмотреть здесь: +На конференции React Conf 2018, Софи Алперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а Райн Флоренс (Ryan Florence) показал, как их использовать в приложении. Видео конференции можно посмотреть здесь:
From 24bb2be3507c2c55eeafcd9d99fc3a0f5e9aa908 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 23:11:15 +0300 Subject: [PATCH 14/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 9547c4c82..23ed04fcd 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -71,7 +71,7 @@ function Example() { Нам часто приходилось поддерживать компоненты, которые изначально были простыми, но превратились в неуправляемый беспорядок, состоящий из логики состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут загружать данные в `componentDidMount` и `componentDidUpdate`. Однако тот же метод `componentDidMount` может содержать несвязанную логику, которая добавляет обработчики события с отменой подписки в `componentWillUnmount`. Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно несвязанный код в конечном итоге объединяется в один метод. Это легко приводит к багам и несоответствиям в приложении. -В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика с состоянием раскидана повсюду. Также их сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов. +В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика состояния раскидана повсюду. Такие компоненты сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов. Чтобы решить эту проблему, **хуки позволяют разбить один компонент на маленькие функции по их назначению (например, подписке или загрузке данных)**, а не на основе методов жизненного цикла. Вы также можете контролировать локальное состояние с помощью редюсера, чтобы поведение было более предсказуемым. From f8b24b44b552b901e91f8ffa127304f148d6683d Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 23:13:02 +0300 Subject: [PATCH 15/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 23ed04fcd..52f46f725 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -81,7 +81,7 @@ function Example() { Вдобавок к усложнению организации кода и его переиспользования, классы создают существенный барьер в изучении React. Нужно понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Приходится помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится многословным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но всё равно путаться с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводят к разногласиям даже между опытными React-разработчиками. -Вдобавок, React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, использующие [компиляцию компонентов перед исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеют огромный потенциал в будущем. Особенно, если это не ограничивается шаблонами. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизации на нет. Классы создают сложности для инструментов и сегодня. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и часто ломает их. Наша цель — предоставить API, который повысит вероятность того, что код можно будет оптимизировать. +Вдобавок, React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, [компиляция компонентов перед их исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеет огромный потенциал в будущем. Особенно, если шаблоны не накладывают ограничений. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизации на нет. Классы создают сложности для инструментов и сегодня. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и часто ломает их. Наша цель — предоставить API, который повысит вероятность того, что код можно будет оптимизировать. Чтобы решить эти проблемы, **хуки позволяют использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не обесценивают опыт использования React. Хуки предоставляют императивные лазейки и не требуют от вас изучения сложных функциональных или реактивных подходов. From 9059a014f14ee540e840546edd49687b1de2813d Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 23:18:35 +0300 Subject: [PATCH 16/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 52f46f725..a37b1bef1 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -45,7 +45,7 @@ function Example() { Перед тем, как мы продолжим, обратите внимание, что хуки: -* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в некоторых компонентах, не изменяя код в уже существующих. Хуки не обязательно использовать или изучать прямо сейчас. +* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в одних компонентах, не изменяя код в других. Хуки не обязательно использовать или изучать прямо сейчас. * **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код. * **Доступны прямо сейчас.** Хуки доступны с выходом версии 16.8.0. From e06645271247b42a4c746d477c58eb13f752c5e1 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 23:27:58 +0300 Subject: [PATCH 17/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index a37b1bef1..5332e8718 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -61,7 +61,7 @@ function Example() { ### Трудно переиспользовать логику состояний между компонентами {#its-hard-to-reuse-stateful-logic-between-components} -В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вам могут быть знакомы такие паттерны, как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html), которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), но всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния. +В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вам могут быть знакомы такие паттерны, как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html), которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния. С помощью хуков вы можете извлечь логику состояния из компонента, чтобы её протестировать или повторно использовать. **Хуки позволяют вам переиспользовать логику состояния, не затрагивая дерево компонентов.** Вы можете использовать одни и те же хуки в разных компонентах или делиться ими с сообществом. From ae204ff585279d3388a213745ed2faa941920f9d Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 23:29:09 +0300 Subject: [PATCH 18/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 5332e8718..36058c8cd 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -31,7 +31,7 @@ function Example() { >Примечание > ->React 16.8.0 это первый релиз, поддерживающий хуки. При обновлении версии, не забудьте обновить все зависимости, включая React DOM. React Native будет поддерживать хуки в следующем стабильном релизе. +>React 16.8.0 это первый релиз, поддерживающий хуки. При обновлении версии, не забудьте обновить и все зависимости, включая React DOM. React Native будет поддерживать хуки в следующем стабильном релизе. ## Видео-представление {#video-introduction} From f79b09cce371484eb8a37b4a622d6c6b1a0effcf Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 15 Feb 2019 23:45:30 +0300 Subject: [PATCH 19/20] Update content/docs/hooks-intro.md Co-Authored-By: pavelkeyzik --- content/docs/hooks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 36058c8cd..9bcfbc2e1 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -25,7 +25,7 @@ function Example() { } ``` -Мы начнём изучение с первого «хука» — функции `useState`. Не беспокойтесь, если этот пример сначала выглядит непонятно. Мы скоро разберёмся, как он работает. +Первый хук, который мы изучим, это функция `useState`. Не беспокойтесь, если этот пример будет поначалу неясен. Скоро мы разберёмся, как он работает. **Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения. From 0e6542bb9b530693e01720754db3a84eb399b38d Mon Sep 17 00:00:00 2001 From: Pavel Keyzik Date: Fri, 15 Feb 2019 16:01:41 -0500 Subject: [PATCH 20/20] Fixes after review --- content/docs/hooks-intro.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 9bcfbc2e1..5a3aa500c 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -51,7 +51,7 @@ function Example() { **Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения хуков в [разделе ниже](#gradual-adoption-strategy). -**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсов, состояния, контекста, рефов, и жизненного цикла. Мы также рассмотрим, как хуки предоставляют мощный способ по-новому компоновать эти понятия между собой. +**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсов, состояния, контекста, рефов, и жизненного цикла. Мы также рассмотрим мощный способ компоновать эти понятия с помощью хуков. **Чтобы начать изучать хуки, [перейдите на следующую страницу!](/docs/hooks-overview.html)** На этой странице мы расскажем о том, зачем нужны хуки, и как их использовать, не переписывая наши приложения. @@ -63,7 +63,7 @@ function Example() { В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вам могут быть знакомы такие паттерны, как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html), которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния. -С помощью хуков вы можете извлечь логику состояния из компонента, чтобы её протестировать или повторно использовать. **Хуки позволяют вам переиспользовать логику состояния, не затрагивая дерево компонентов.** Вы можете использовать одни и те же хуки в разных компонентах или делиться ими с сообществом. +С помощью хуков вы можете извлечь логику состояния из компонента, чтобы её протестировать или повторно использовать. **Хуки позволяют вам переиспользовать логику состояния, не затрагивая дерево компонентов.** Благодаря этому, хуки легко использовать в разных компонентах и делиться ими с сообществом. Мы обсудим это подробнее в разделе [Создание собственных хуков](/docs/hooks-custom.html).