Обновлено содержание 2018-09-10-introducing-the-react-profiler.md. Добавлены запятые.

Author: SmolinPavel

content/blog/2018-09-10-introducing-the-react-profiler.md

@@ -36,8 +36,8 @@ DevTools покажет вкладку «Profiler» для приложений,
 
 ![Click "record" to start profiling](../images/blog/introducing-the-react-profiler/start-profiling.png)
 
-После того, как вы начали запись, DevTools будет автоматически собирать информацию о производительности при каждом рендеринге вашего приложения.
-Используйте свое приложение, как обычно.
+После того как вы начали запись, DevTools будет автоматически собирать информацию о производительности при каждом рендеринге вашего приложения.
+Используйте свое приложение как обычно.
 Когда вы закончили профилирование, нажмите кнопку «Stop».
 
 ![Click "stop" when you are finished profiling](../images/blog/introducing-the-react-profiler/stop-profiling.png)
@@ -50,16 +50,16 @@ DevTools покажет вкладку «Profiler» для приложений,
 ### Просмотр коммитов {#browsing-commits}
 Концептуально React выполняет работу в два этапа:
 
-* Этап **рендеринга** определяет, какие изменения необходимо внести, например в DOM. На этом этапе React вызывает `render` а затем сравнивает результат с предыдущим рендером.
-* Этап **коммита (фиксации)** это когда React применяет любые изменения. (В случае React DOM это когда React вставляет, обновляет и удаляет узлы DOM.) На этом этапе React также вызывает методы жизненного цикла, такие как `componentDidMount` и `componentDidUpdate`.
+* Этап **рендеринга** определяет какие изменения необходимо внести, например в DOM. На этом этапе React вызывает `render`, а затем сравнивает результат с предыдущим рендером.
+* Этап **коммита (фиксации)** -- это когда React применяет любые изменения. (В случае React DOM -- это когда React вставляет, обновляет и удаляет узлы DOM.) На этом этапе React также вызывает методы жизненного цикла такие, как`componentDidMount` и `componentDidUpdate`.
 
 Профилировщик DevTools группирует информацию о производительности по коммитам.
 Коммиты отображаются на гистограмме в верхней части профилировщика:
 
 ![Bar chart of profiled commits](../images/blog/introducing-the-react-profiler/commit-selector.png)
 
 Каждый столбец на диаграмме представляет собой отдельный коммит, черным цветом помечен текущий выбранный коммит.
-Вы можете кликать по столбцам (или по кнопкам со стрелками влево/вправо) чтобы выбрать другой коммит.
+Вы можете кликать по столбцам (или по кнопкам со стрелками влево/вправо), чтобы выбрать другой коммит.
 
 Цвет и высота каждого столбца соответствуют тому, сколько времени потребовалось для рендеринга этого коммита.
 (Более высокие желтые столбцы занимали больше времени, чем короткие синие.)
@@ -77,26 +77,26 @@ DevTools покажет вкладку «Profiler» для приложений,
 
 Flame chart диаграмма представляет состояние вашего приложения для конкретного коммита.
 Каждый столбец в диаграмме представляет React-компонент (например `App`, `Nav`).
-Размер и цвет столбца показывают, сколько времени потребовалось для рендера компонента и его дочерних компонентов.
-(Ширина столбца показывает, сколько времени было потрачено _при последнем рендере_. Цвет показывает, сколько времени было потрачено _как часть текущего коммита_.)
+Размер и цвет столбца показывают сколько времени потребовалось для рендера компонента и его дочерних компонентов.
+(Ширина столбца показывает сколько времени было потрачено _при последнем рендере_. Цвет показывает сколько времени было потрачено _как часть текущего коммита_.)
 
 ![Example flame chart](../images/blog/introducing-the-react-profiler/flame-chart.png)
 
 > Примечание:
 >
-> Ширина столбца указывает, сколько времени потребовалось для рендера компонента (и его дочерних компонентов) при последнем рендере.
+> Ширина столбца указывает сколько времени потребовалось для рендера компонента (и его дочерних компонентов) при последнем рендере.
 > Если компонент не подвергался ререндеру как часть этого коммита, время представляет предыдущий рендер.
 > Чем больше компонент, тем больше времени требуется на рендер.
 > 
-> Цвет столбца указывает, сколько времени потребовалось компоненту (и его дочерним компонентам) для рендера в выбранном коммите.
+> Цвет столбца указывает сколько времени потребовалось компоненту (и его дочерним компонентам) для рендера в выбранном коммите.
 > Желтые компоненты занимали больше времени, синие компоненты - меньше времени, а серые компоненты вообще не рендерелись во время текущего коммита.
 
 Например, показанный выше коммит занял в общей сложности 18.4мс для рендера.
 Компонент `Router` оказался «самым дорогим» для рендера (занял 18.4мс).
 Большая часть этого времени была связана с двумя его дочерними компонентами, `Nav` (8.4мс) и `Route` (7.9мс).
 Остальное время было разделено между оставшимися дочерними компонентами или потрачено на собственный метод рендера компонента.
 
-Вы можете увеличивать или уменьшать масштаб диаграммы, кликая на компоненты:
+Вы можете кликать на компоненты, чтобы увеличивать или уменьшать масштаб диаграммы:
 ![Click on a component to zoom in or out](../images/blog/introducing-the-react-profiler/zoom-in-and-out.gif)
 
 Клик по компоненту также выберет его и отобразит информацию на правой боковой панели, которая включает его `props` и `state` на момент этого коммита.
@@ -138,7 +138,7 @@ Flame chart диаграмма представляет состояние ва
 На диаграмме выше показано, что компонент `List` был отрендерен 11 раз.
 Он также показывает, что каждый раз при рендере это был самый «дорогой» компонент в коммите (это означает, что он занимал больше всего времени).
 
-Чтобы просмотреть эту диаграмму дважды кликните на компонент, _либо_ выберите компонент и кликните на значок синей гистограммы на правой панели сведений.
+Чтобы просмотреть эту диаграмму, дважды кликните на компонент, _либо_ выберите компонент и кликните на значок синей гистограммы на правой панели сведений.
 Вы можете вернуться к предыдущей диаграмме, нажав кнопку «x» на правой панели деталей.
 Вы также можете дважды кликнуть по определенному столбцу, чтобы просмотреть дополнительную информацию об этой коммите.
 
@@ -159,15 +159,15 @@ React недавно добавил еще один [экспериментал
 Каждая строка представляет отслеживаемое взаимодействие.
 Цветные точки в строке обозначают коммиты, связанные с этим взаимодействием.
 
-Вы также можете увидеть, какие взаимодействия были отслежены для конкретного коммита, на flame chart диаграмме и в отображении ранжированной диаграммы:
+Вы также можете увидеть какие взаимодействия были отслежены для конкретного коммита на flame chart диаграмме и в отображении ранжированной диаграммы:
 
 ![List of interactions for a commit](../images/blog/introducing-the-react-profiler/interactions-for-commit.png)
 
 Вы можете перемещаться между взаимодействиями и коммитами, нажимая на них:
 
 ![Navigate between interactions and commits](../images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif)
 
-API трассировки все еще новый, и мы расскажем о нем более подробно в одном из следующих постах.
+API трассировки все еще новый и мы расскажем о нем более подробно в одном из следующих постах.
 
 ## Исправление проблем {#troubleshooting}