Merge pull request #634 from reactjs/sync-16158f19

Sync with reactjs.org @ 16158f1

Author: lex111

README.md

@@ -49,11 +49,9 @@
 
 ### Отправка изменений
 
-1. `git add -A && git commit -m "Мой текст"` (замените `Мой текст` на подходящее сообщение, например `Fix header logo on Android`) для сохранения ваших изменений
-1. `git push my-fork-name the-name-of-my-branch`
-1. Перейдите на [страницу репозитория ru.reactjs.org](https://github.com/reactjs/ru.reactjs.org) — вы должны увидеть вашу веткy.
+1. Перейдите на [страницу репозитория ru.reactjs.org](https://github.com/reactjs/ru.reactjs.org) и вы увидите уведомление с вашей веткой.
 1. Следуйте инструкциям на GitHub.
-1. По возможности добавьте скриншот с наглядными изменениями. Как только вы сделаете PR, автоматически будет создан Netlify-билд, так что люди смогут посмотреть ваши изменения.
+1. По возможности добавьте скриншот с сделанными изменениями. Как только вы сделаете PR, автоматически будет создана версия сайта с вашими изменениями на [Netlify](https://www.netlify.com/).
 
 ## Перевод
 

content/blog/2020-10-20-react-v17.md

@@ -58,7 +58,7 @@ React 17 supports the [new JSX transform](/blog/2020/09/22/introducing-the-new-j
 
 ## React Native {#react-native}
 
-React Native has a separate release schedule. We currently expect the support for React 17 to land in React Native 0.65, but the exact version is subject to change. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases).
+React Native has a separate release schedule. We landed the support for React 17 in React Native 0.64. As always, you can track the release discussions on the React Native Community releases [issue tracker](https://github.com/react-native-community/releases).
 
 ## Installation {#installation}
 

content/community/courses.md

@@ -28,7 +28,7 @@ permalink: community/courses.html
 
 - [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
 
-- [Frontend Masters](https://frontendmasters.com/courses/) - Video courses on React and other frontend frameworks.
+- [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.
 
 - [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.
 

content/community/videos.md

@@ -13,12 +13,12 @@ Videos dedicated to the discussion of React and the React ecosystem.
 ### React Conf 2019 {#react-conf-2019}
 
 A playlist of videos from React Conf 2019.
-<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>
+<iframe title="React Conf 2019" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh" frameborder="0" allowfullscreen></iframe>
 
 ### React Conf 2018 {#react-conf-2018}
 
 A playlist of videos from React Conf 2018.
-<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>
+<iframe title="React Conf 2018" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLPxbbTqCLbGE5AihOSExAa4wUM-P42EIJ" frameborder="0" allowfullscreen></iframe>
 
 ### React.js Conf 2017 {#reactjs-conf-2017}
 

content/docs/code-splitting.md

@@ -42,7 +42,7 @@ console.log(add(16, 26)); // 42
 
 Если вы используете [Create React App](https://create-react-app.dev/), [Next.js](https://github.com/zeit/next.js/), [Gatsby](https://www.gatsbyjs.org/) или похожие инструменты, то у вас уже будет настроенный Webpack для бандлинга приложения.
 
-Иначе, вам нужно будет настроить webpack самостоятельно. Для этого ознакомьтесь со страницами [Установка](https://webpack.js.org/guides/installation/) и [Начало работы](https://webpack.js.org/guides/getting-started/) в документации по Webpack.  
+Иначе, вам нужно будет настроить webpack самостоятельно. Для этого ознакомьтесь со страницами по [установке](https://webpack.js.org/guides/installation/) и [началу работы](https://webpack.js.org/guides/getting-started/) в документации по Webpack.  
 
 ## Разделение кода {#code-splitting}
 

content/docs/concurrent-mode-adoption.md

@@ -20,6 +20,11 @@ next: concurrent-mode-reference.html
 >На странице описаны **экспериментальные функции, которых еще нет в стабильной версии**. Не используйте экспериментальные сборки React в продакшен-приложениях. Эти функции могут значительно измениться без предупреждения перед тем, как попасть в React.
 >
 >Эта документация предназначена для ранних пользователей и интересующихся. Если вы новичок в React, не беспокойтесь об этих возможностях -- вам не нужно изучать их прямо сейчас.
+
+>Предупреждение:
+>
+>"Блокирующий режим" и метод  `createBlockingRoot` были объявлены устаревшими, их не стоит использовать.
+
 </div>
 
 - [Установка](#installation)

content/docs/concurrent-mode-reference.md

@@ -28,7 +28,6 @@ prev: concurrent-mode-adoption.html
 
 - [Включение конкурентного режима](#concurrent-mode)
     - [`createRoot`](#createroot)
-    - [`createBlockingRoot`](#createblockingroot)
 - [API задержек](#suspense)
     - [`Suspense`](#suspensecomponent)
     - [`SuspenseList`](#suspenselist)
@@ -47,18 +46,6 @@ ReactDOM.createRoot(rootNode).render(<App />);
 
 Дополнительную информацию можно узнать в [документации конкурентного режима](/docs/concurrent-mode-intro.html).
 
-### `createBlockingRoot` {#createblockingroot}
-
-```js
-ReactDOM.createBlockingRoot(rootNode).render(<App />)
-```
-
-Заменяет `ReactDOM.render(<App />, rootNode)` и включает [блокирующий режим](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode).
-
-Для реализации конкурентного режима решено сделать семантические изменения в работе React. Это значит, что вы не сможете использовать конкурентный режим лишь для некоторых компонентов проекта. И как следствие, не все приложения можно будет напрямую перевести на конкурентный режим.
-
-Блокирующий режим содержит небольшую часть возможностей конкурентного режима. Он предназначен в качестве промежуточного этапа для приложений, которые нельзя мигрировать напрямую.
-
 ## API задержек {#suspense}
 
 ### `Suspense` {#suspensecomponent}

content/docs/hooks-reference.md

@@ -76,6 +76,7 @@ function Counter({initialCount}) {
 > В отличие от метода `setState`, который вы можете найти в классовых компонентах, `useState` не объединяет объекты обновления автоматически. Вы можете повторить это поведение, комбинируя форму функции обновления с синтаксисом расширения объекта:
 >
 > ```js
+> const [state, setState] = useState({});
 > setState(prevState => {
 >   // Object.assign также будет работать
 >   return {...prevState, ...updatedValues};

content/docs/optimizing-performance.md

@@ -156,32 +156,6 @@ module.exports = {
 
 Помните, что это нужно делать только для продакшен-сборки. Вам не стоит использовать `TerserPlugin` в процессе разработки, потому что тогда скроются вспомогательные предупреждения React и замедлится процесс сборки.
 
-## Анализ производительности компонентов с помощью вкладки Chrome «Performance» {#profiling-components-with-the-chrome-performance-tab}
-
-В режиме **разработки** вы можете видеть как компоненты монтируются, обновляются и размонтируются с помощью инструментов производительности в браузерах, которые их поддерживают. Например:
-
-<center><img src="../images/blog/react-perf-chrome-timeline.png" style="max-width:100%" alt="Компоненты React в графике времени Chrome" /></center>
-
-Для того, чтобы сделать это в Chrome:
-
-1. Временно **отключите все расширения Chrome, особенно React DevTools**. Они могут существенно исказить результаты!
-
-2. Убедитесь, что вы запускаете приложение в режиме разработки.
-
-3. Откройте в инструментах разработчика Chrome вкладку **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** и нажмите **Record**.
-
-4. Выполните действия, которые вы хотите проанализировать на производительность. Не записывайте более 20 секунд, иначе Chrome может зависнуть.
-
-5. Остановите запись.
-
-6. События React будут сгруппированы под меткой **User Timing**.
-
-Для более детального ознакомления, посмотрите [эту статью от Бена Шварца (Ben Schwarz)](https://calibreapp.com/blog/react-performance-profiling-optimization).
-
-Обратите внимание, что **результаты являются относительными и в продакшене рендеринг компонентов будет быстрее**. Всё же это должно помочь вам понять, когда какой-то пользовательский компонент обновляется по ошибке, а также как глубоко и часто обновляется пользовательский интерфейс.
-
-В настоящее время Chrome, Edge и IE единственные браузеры, которые поддерживают данную возможность, но мы используем стандарт [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API), поэтому ожидайте, что больше браузеров добавят его поддержку.
-
 ## Анализ производительности компонентов с помощью инструмента разработки «Profiler» {#profiling-components-with-the-devtools-profiler}
 
 Пакеты `react-dom` версии 16.5+ и `react-native` версии 0.57+ предоставляют расширенные возможности анализа производительности в режиме разработки с помощью инструментов разработчика React Profiler.
@@ -199,6 +173,11 @@ module.exports = {
 > Профилирование продакшен-пакета для `react-dom` также доступно как `react-dom/profiling`.
 > Подробнее о том, как использовать этот пакет, читайте на [fb.me/react-profiling](https://fb.me/react-profiling)
 
+> Примечание
+>
+> До React 17 мы использовали стандартный [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) для профилирования компонентов с помощью вкладки Performance браузера Chrome. 
+> Более подробнее об этом способе можно узнать в [статье Бена Шварца (Ben Schwarz)](https://calibreapp.com/blog/react-performance-profiling-optimization).
+
 ## Виртуализация длинных списков {#virtualize-long-lists}
 
 Если ваше приложение рендерит длинные списки данных (сотни или тысячи строк), мы рекомендуем использовать метод известный как "оконный доступ". Этот метод рендерит только небольшое подмножество строк в данный момент времени и может значительно сократить время, необходимое для повторного рендера компонентов, а также количество создаваемых DOM-узлов.