diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 959332976..d2cb2a185 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -1,93 +1,93 @@ --- id: optimizing-performance -title: Optimizing Performance +title: Оптимізація продуктивності permalink: docs/optimizing-performance.html redirect_from: - "docs/advanced-performance.html" --- -Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application. +React за лаштунками використовує кілька розумних підходів для мінімізації кількості вартісних DOM-операцій, необхідних для оновлення користувацького інтерфейсу. Для більшості додатків, використання React дозволить мати швидкий інтерфейс без докладання особливих зусиль для оптимізації продуктивності. Не дивлячись на це, існує кілька шляхів для прискорення швидкодії вашого React-додатку. -## Use the Production Build {#use-the-production-build} +## Використання продакшн-збірки {#use-the-production-build} -If you're benchmarking or experiencing performance problems in your React apps, make sure you're testing with the minified production build. +Якщо ви оцінюєте чи маєте проблеми зі швидкодією ваших React-додатків, впевніться в тому, що ви тестуєте мініфіковану продакшн-збірку. -By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app. +React включає багато корисних попереджень за замовчуванням. Вони є надзвичайно корисними при розробці, але в той самий час роблять React більшим та повільнішим. Саме тому ви маєте бути певними, що використовуєте продакшн-версію при розгортанні додатку. -If you aren't sure whether your build process is set up correctly, you can check it by installing [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). If you visit a site with React in production mode, the icon will have a dark background: +Якщо ви не впевнені у правильному налаштуванні процесу збірки, ви можете перевірити це, встановивши [інструменти розробника React для Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). Якщо ви відвідаєте сайт на React у продакшн-режимі, іконка матиме темний фон: -React DevTools on a website with production version of React +React DevTools на сайті, що використовує продакшн-версію React -If you visit a site with React in development mode, the icon will have a red background: +Якщо ви відвідаєте сайт, що використовує React у режимі розробки, то іконка матиме червоний фон: -React DevTools on a website with development version of React +React DevTools на сайті, що використовує версію React для розробки -It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users. +Як правило ви маєте використовувати режим розробки під час роботи над додатком і продакшн-режим при його розгортанні. -You can find instructions for building your app for production below. +Нижче ви можете знайти інструкції по збірці вашого додатку для продакшну. ### Create React App {#create-react-app} -If your project is built with [Create React App](https://github.com/facebookincubator/create-react-app), run: +Якщо ви використали [Create React App](https://github.com/facebookincubator/create-react-app) для створення проекту, запустіть: ``` npm run build ``` -This will create a production build of your app in the `build/` folder of your project. +Ця команда створить продакшн-збірку у папці `build/` вашого додатку. -Remember that this is only necessary before deploying to production. For normal development, use `npm start`. +Пам'ятайте, що це необхідно лише перед розгортанням на продакшн. Для звичайної розробки використовуйте `npm start`. -### Single-File Builds {#single-file-builds} +### Однофайлові збірки {#single-file-builds} -We offer production-ready versions of React and React DOM as single files: +Ми пропонуємо готові для продакшу версії React та React DOM у вигляді окремих файлів: ```html ``` -Remember that only React files ending with `.production.min.js` are suitable for production. +Пам'ятайте, що для продакшну підходять тільки ті файли React, що закінчуються на `.production.min.js`. ### Brunch {#brunch} -For the most efficient Brunch production build, install the [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch) plugin: +Для найефективнішої продакшн-збірки з використанням Brunch, встановіть плагін [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch): ``` -# If you use npm +# Якщо ви користуєтесь npm npm install --save-dev uglify-js-brunch -# If you use Yarn +# Якщо ви користуєтесь Yarn yarn add --dev uglify-js-brunch ``` -Then, to create a production build, add the `-p` flag to the `build` command: +Потім створіть продакшн-збірку, додавши прапорець `-p` до команди `build`: ``` brunch build -p ``` -Remember that you only need to do this for production builds. You shouldn't pass the `-p` flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower. +Пам'ятайте, що це потрібно робити лише для продакшн-збірок. Ви не повинні передавати прапорець `-p` чи застосовувати цей плагін під час розробки, тому що це приховає корисні попередження від React та сповільнить процес збірки. ### Browserify {#browserify} -For the most efficient Browserify production build, install a few plugins: +Для найефективнішої продакшн-збірки з використанням Brunch, встановіть декілька плагінів: ``` -# If you use npm -npm install --save-dev envify uglify-js uglifyify +# Якщо ви користуєтесь npm +npm install --save-dev envify uglify-js uglifyify -# If you use Yarn -yarn add --dev envify uglify-js uglifyify +# Якщо ви користуєтесь Yarn +yarn add --dev envify uglify-js uglifyify ``` -To create a production build, make sure that you add these transforms **(the order matters)**: +Щоб створити продакшн-збірку, впевніться, що ви додали наступні перетворення **(у представленому порядку)**: -* The [`envify`](https://github.com/hughsk/envify) transform ensures the right build environment is set. Make it global (`-g`). -* The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`). -* Finally, the resulting bundle is piped to [`uglify-js`](https://github.com/mishoo/UglifyJS2) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)). +* Плагін [`envify`](https://github.com/hughsk/envify) гарантує правильність встановленого середовища для збірки. Зробіть його глобальним (`-g`). +* Плагін [`uglifyify`](https://github.com/hughsk/uglifyify) видаляє необхідні для розробки імпорти. Зробіть його глобальним також (`-g`). +* Нарешті, отримана збірка передається до [`uglify-js`](https://github.com/mishoo/UglifyJS2) для мініфікації ([прочитайте навіщо](https://github.com/hughsk/uglifyify#motivationusage)). -For example: +Наприклад: ``` browserify ./index.js \ @@ -96,30 +96,30 @@ browserify ./index.js \ | uglifyjs --compress --mangle > ./bundle.js ``` ->**Note:** +>**Примітка:** > ->The package name is `uglify-js`, but the binary it provides is called `uglifyjs`.
->This is not a typo. +>Пакунок називається `uglify-js`, але виконуваний файл, котрий він надає, зветься `uglifyjs`.
+>Це не одрук. -Remember that you only need to do this for production builds. You shouldn't apply these plugins in development because they will hide useful React warnings, and make the builds much slower. +Пам'ятайте, що це потрібно робити лише для продакшн-збірок. Ви не повинні використовувати ці плагіни під час розробки, тому що це приховає корисні попередження від React та сповільнить процес збірки. ### Rollup {#rollup} -For the most efficient Rollup production build, install a few plugins: +Для найефективнішої продакшн-збірки з використанням Rollup, встановіть декілька плагінів: ``` -# If you use npm -npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify +# Якщо ви користуєтесь npm +npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify -# If you use Yarn -yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify +# Якщо ви користуєтесь Yarn +yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify ``` -To create a production build, make sure that you add these plugins **(the order matters)**: +Щоб створити продакшн-збірку, впевніться, що ви додали наступні плагіни **(у представленому порядку)**: -* The [`replace`](https://github.com/rollup/rollup-plugin-replace) plugin ensures the right build environment is set. -* The [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) plugin provides support for CommonJS in Rollup. -* The [`uglify`](https://github.com/TrySound/rollup-plugin-uglify) plugin compresses and mangles the final bundle. +* Плагін [`replace`](https://github.com/rollup/rollup-plugin-replace) гарантує правильність встановленого середовища для збірки. +* Плагін [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) надає підтримку CommonJS у Rollup. +* Плагін [`uglify`](https://github.com/TrySound/rollup-plugin-uglify) стискає та мініфікує фінальну збірку. ```js plugins: [ @@ -133,18 +133,18 @@ plugins: [ ] ``` -For a complete setup example [see this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). +Для більш повного зразку налаштування [перегляньте цей gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). -Remember that you only need to do this for production builds. You shouldn't apply the `uglify` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower. +Пам'ятайте, що це потрібно робити лише для продакшн-збірок. Ви не повинні використовувати плагін `uglify` чи `replace` із значенням `'production'` під час розробки, тому що це приховає корисні попередження від React та сповільнить процес збірки. ### webpack {#webpack} ->**Note:** +>**Примітка:** > ->If you're using Create React App, please follow [the instructions above](#create-react-app).
->This section is only relevant if you configure webpack directly. +>Якщо ви використовуєте Create React App, то використовуйте [інструкції вище](#create-react-app).
+>Цей розділ потрібен, якщо ви самі налаштовуєте webpack. -For the most efficient webpack production build, make sure to include these plugins in your production configuration: +Для найефективнішої продакшн-збірки з використанням Rollup, додайте наступні плагіни до вашої продакшн-конфігурації: ```js new webpack.DefinePlugin({ @@ -153,84 +153,84 @@ new webpack.DefinePlugin({ new webpack.optimize.UglifyJsPlugin() ``` -You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production-build/). +Ви можете дізнатися про це більше у [документації webpack](https://webpack.js.org/guides/production-build/). -Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower. +Пам'ятайте, що це потрібно робити лише для продакшн-збірок. Ви не повинні використовувати `UglifyJsPlugin` чи `DefinePlugin` із значенням `'production'` під час розробки, тому що це приховає корисні попередження від React та сповільнить процес збірки. -## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab} +## Профілювання компонентів з використанням вкладки Chrome "Performance" {#profiling-components-with-the-chrome-performance-tab} -In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example: +У режимі **розробки**, ви можете візуалізувати процес монтування, оновлення і демонтування компонентів, використавши інструменти продуктивності у браузерах, що їх підтримують. Наприклад: -
React components in Chrome timeline
+
React-компоненти на графіку часу в Chrome
-To do this in Chrome: +Щоб зробити це в Chrome: -1. Temporarily **disable all Chrome extensions, especially React DevTools**. They can significantly skew the results! +1. Тимчасово **вимкніть всі розширення Chrome, особливо React DevTools**. Вони можуть істотно спотворити резульати! -2. Make sure you're running the application in the development mode. +2. Впевніться, що додаток запущений в режимі розробки. -3. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**. +3. Відкрийте Chrome DevTools, оберіть вкладку **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** та натисніть **Record**. -4. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang. +4. Виконайте дії, які потрібно профілювати. Не записуйте більше 20 секунд, інакше Chrome може зависнути. -5. Stop recording. +5. Зупиніть запис. -6. React events will be grouped under the **User Timing** label. +6. Події React будуть згруповані під міткою **User Timing**. -For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/2017-11-28-debugging-react/). +Для більш детальних інструкцій перегляньте [цю статтю Бена Шварца (Ben Schwarz)](https://calibreapp.com/blog/2017-11-28-debugging-react/). -Note that **the numbers are relative so components will render faster in production**. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur. +Зверніть увагу на те, **що ці значення відносні і компоненти в продакшні будуть рендеритись швидше**. Проте це допоможе вам зрозуміти, коли не пов'язані між собою частини інтерфейсу оновлюються через помилку та як глибоко і часто ці оновлення вібдуваються. -Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it. +Наразі Chrome, Edge та IE є єдиними браузерами, котрі підтримують цю функціональність, але ми використовуємо стандарт [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API), а тому очікуємо, що більше браузерів додадуть її підтримку. -## Profiling Components with the DevTools Profiler {#profiling-components-with-the-devtools-profiler} +## Профілювання компонентів з профайлером DevTools {#profiling-components-with-the-devtools-profiler} -`react-dom` 16.5+ and `react-native` 0.57+ provide enhanced profiling capabilities in DEV mode with the React DevTools Profiler. -An overview of the Profiler can be found in the blog post ["Introducing the React Profiler"](/blog/2018/09/10/introducing-the-react-profiler.html). -A video walkthrough of the profiler is also [available on YouTube](https://www.youtube.com/watch?v=nySib7ipZdk). +`react-dom` 16.5+ та `react-native` 0.57+ надають додаткові можливості профілювання в режимі розробки з використанням профайлера React DevTools. +Огляд профайлера можна знайти в пості блогу ["Знайомство з React Profiler"](/blog/2018/09/10/introducing-the-react-profiler.html). +Відео-посібник також [доступний на YouTube](https://www.youtube.com/watch?v=nySib7ipZdk). -If you haven't yet installed the React DevTools, you can find them here: +Якщо ви ще не встановили React DevTools, ви можете знайти їх тут: -- [Chrome Browser Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -- [Firefox Browser Extension](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/) -- [Standalone Node Package](https://www.npmjs.com/package/react-devtools) +- [Розширення браузера Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +- [Розширення браузера Firefox](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/) +- [Окремий пакунок Node](https://www.npmjs.com/package/react-devtools) -> Note +> Примітка > -> A production profiling bundle of `react-dom` is also available as `react-dom/profiling`. -> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling) +> Продакшн-збірка профілювання для `react-dom` також доступна як `react-dom/profiling`. +> Докладніше про її використання ви можете дізнатись за посиланням [fb.me/react-profiling](https://fb.me/react-profiling) -## Virtualize Long Lists {#virtualize-long-lists} +## Віртуалізація довгих списків {#virtualize-long-lists} -If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created. +Якщо ваш додаток рендерить довгі списки даних (сотні чи тисячі рядків), ми радимо використовувати підхід під назвою "віконний доступ". Цей підхід рендерить лише невелику підмножину ваших рядків у будь-який момент часу і може значно зменшити час, потрібний для повторного рендеру компонентів та кількість створених DOM-вузлів. -[react-window](https://react-window.now.sh/) and [react-virtualized](https://bvaughn.github.io/react-virtualized/) are popular windowing libraries. They provide several reusable components for displaying lists, grids, and tabular data. You can also create your own windowing component, like [Twitter did](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), if you want something more tailored to your application's specific use case. +[react-window](https://react-window.now.sh/) та [react-virtualized](https://bvaughn.github.io/react-virtualized/) — це популярні бібліотеки для віконного доступу. Вони надають кілька компонентів для відображення списків, сіток та табличних даних. Якщо ваш додаток потребує іншого підходу, то ви можете створити власний компонент для віконного доступу, як це зроблено в [Twitter](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3). -## Avoid Reconciliation {#avoid-reconciliation} +## Уникнення узгодження {#avoid-reconciliation} -React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a "virtual DOM", but it works the same way on React Native. +React створює і підтримує внутрішній стан відображуваного користувацького інтерфейсу. Він також включає React-елементи, які ви повертаєте з ваших компонентів. Це дозволяє React уникати створення нових DOM-вузлів та доступу до вже існуючих без необхідності, тому що ці операції можуть бути повільнішими за операції зі звичайними JavaScript-об'єктами. Іноді цей стан називають "віртуальний DOM", але в React Native він працює так само. -When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. +Коли пропси чи стан компонента змінюються, React вирішує чи необхідне оновлення DOM, порівнюючи новий повернутий елемент з вже відрендереним. Якщо вони не рівні, то React оновить DOM. -You can now visualize these re-renders of the virtual DOM with React DevTools: +Ви можете візуалізувати повторні рендери віртуального DOM-у, використавши React DevTools: -- [Chrome Browser Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -- [Firefox Browser Extension](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/) -- [Standalone Node Package](https://www.npmjs.com/package/react-devtools) +- [Розширення браузера Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +- [Розширення браузера Firefox](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/) +- [Окремий пакунок Node](https://www.npmjs.com/package/react-devtools) -In the developer console select the **Highlight Updates** option in the **React** tab: +У консолі розробника оберіть параметр **Highlight Updates** на вкладці **React**: -
How to enable highlight updates
+
Як увімкнути підсвічування оновлень
-Interact with your page and you should see colored borders momentarily appear around any components that have re-rendered. This lets you spot re-renders that were not necessary. You can learn more about this React DevTools feature from this [blog post](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833) from [Ben Edelstein](https://blog.logrocket.com/@edelstein). +Взаємодіючи з вашою сторінкою, ви помітите, що навколо компонентів, які повторно відрендерились, з'являються кольорові границі. Це дозволить вам виявляти зайві повторні рендери. Ви можете дізнатися більше про цю можливість React DevTools у [цьому пості](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833) в блозі [Бена Едельштейна (Ben Edelstein)](https://blog.logrocket.com/@edelstein). -Consider this example: +Розглянемо такий приклад: -
React DevTools Highlight Updates example
+
Приклад підсвічування оновлень з використанням React DevTools
-Note that when we're entering a second todo, the first todo also flashes on the screen on every keystroke. This means it is being re-rendered by React together with the input. This is sometimes called a "wasted" render. We know it is unnecessary because the first todo content has not changed, but React doesn't know this. +Зверніть увагу, що коли ви вводите другу задачу, то перша також підсвічується на екрані при кожному натисненню на клавіші. Це означає, що React повторно рендерить її разом з полем вводу. Часом це називається "даремним" рендером. Ми знаємо, що в цьому не було необхідності, тому що вміст першої задачі не змінився, але React про це не знає. -Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it's not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the lifecycle function `shouldComponentUpdate`, which is triggered before the re-rendering process starts. The default implementation of this function returns `true`, leaving React to perform the update: +Незважаючи на те, що React оновлює тільки змінені вузли DOM, повторний рендер все ж займає певний час. У більшості випадків це не проблема, але якщо ви помітите, що швидкодія зменшиться, то ви можете прискорити все, перевизначивши метод життєвого циклу `shouldComponentUpdate`, котрий викликається перед початком процесу повторного рендерингу. За замовчуванням, реалізація цієї функції повертає `true`, змушуючи React здійснити оновлення: ```javascript shouldComponentUpdate(nextProps, nextState) { @@ -238,27 +238,27 @@ shouldComponentUpdate(nextProps, nextState) { } ``` -If you know that in some situations your component doesn't need to update, you can return `false` from `shouldComponentUpdate` instead, to skip the whole rendering process, including calling `render()` on this component and below. +Якщо ви знаєте, що в певних ситуаціях ваш компонент не повинен оновлюватись, то ви можете повернути `false` з `shouldComponentUpdate`, щоб пропустити весь процес рендерингу, включно з викликом `render()` поточного компонента та компонентів нижче. -In most cases, instead of writing `shouldComponentUpdate()` by hand, you can inherit from [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). It is equivalent to implementing `shouldComponentUpdate()` with a shallow comparison of current and previous props and state. +У більшості випадків, замість написання `shouldComponentUpdate()` вручну, ви можете наслідуватись від [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). Це еквівалентно реалізації `shouldComponentUpdate()` з поверховим порівнянням поточних та попередніч пропсів та стану. -## shouldComponentUpdate In Action {#shouldcomponentupdate-in-action} +## shouldComponentUpdate в дії {#shouldcomponentupdate-in-action} -Here's a subtree of components. For each one, `SCU` indicates what `shouldComponentUpdate` returned, and `vDOMEq` indicates whether the rendered React elements were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not. +На рисунку зображено піддерево компонентів. Для кожного з них `SCU` позначає значення, повернуте `shouldComponentUpdate`, і `vDOMEq` позначає чи були відрендерені React-елементи рівними. Нарешті, колір кола позначає те, чи має компонент бути узгодженим, чи ні.
-Since `shouldComponentUpdate` returned `false` for the subtree rooted at C2, React did not attempt to render C2, and thus didn't even have to invoke `shouldComponentUpdate` on C4 and C5. +Оскільки `shouldComponentUpdate` повернув `false` для піддерева з коренем в C2, React не буде намагатися відрендерити C2 і навіть викликати `shouldComponentUpdate` для C4 і C5. -For C1 and C3, `shouldComponentUpdate` returned `true`, so React had to go down to the leaves and check them. For C6 `shouldComponentUpdate` returned `true`, and since the rendered elements weren't equivalent React had to update the DOM. +Для C1 і C3 `shouldComponentUpdate` повернув `true`, тому React має перейти вниз до листів дерева і перевірити їх. Для C6 `shouldComponentUpdate` повернув `true` і, оскільки значення відрендерених елементів не було еквівалентним, React має оновити DOM. -The last interesting case is C8. React had to render this component, but since the React elements it returned were equal to the previously rendered ones, it didn't have to update the DOM. +Останнім цікавим випадком є C8. React має відрендерити цей компонент, але оскільки повернуті React-елементи були рівні попереднім, то DOM не буде оновлений. -Note that React only had to do DOM mutations for C6, which was inevitable. For C8, it bailed out by comparing the rendered React elements, and for C2's subtree and C7, it didn't even have to compare the elements as we bailed out on `shouldComponentUpdate`, and `render` was not called. +Зверніть увагу на те, що React повинен був здійснити зміну DOM лише для C6, що було неминучим. Для C8 він уникнув змін завдяки порівнянню відрендерених React-елементів, а для піддерева C2 та C7 не потрібно було навіть виконувати це порівняння, оскільки процес рендерингу зупинився у методі `shouldComponentUpdate` і метод `render` не був викликаний. -## Examples {#examples} +## Приклади {#examples} -If the only way your component ever changes is when the `props.color` or the `state.count` variable changes, you could have `shouldComponentUpdate` check that: +Якщо ваш компонент має змінюватись лише тоді, коли змінюються змінні `props.color` чи `state.count`, ви можете виконати цю перевірку в `shouldComponentUpdate`: ```javascript class CounterButton extends React.Component { @@ -282,14 +282,14 @@ class CounterButton extends React.Component { ); } } ``` -In this code, `shouldComponentUpdate` is just checking if there is any change in `props.color` or `state.count`. If those values don't change, the component doesn't update. If your component got more complex, you could use a similar pattern of doing a "shallow comparison" between all the fields of `props` and `state` to determine if the component should update. This pattern is common enough that React provides a helper to use this logic - just inherit from `React.PureComponent`. So this code is a simpler way to achieve the same thing: +У цьому коді `shouldComponentUpdate` лише перевіряє наявні зміни в `props.color` чи `state.count`. Якщо ці значення не змінились, то компонент не оновиться. Якщо ваш компонент буде більш складним, ви можете використати схожий шаблон і зробити "поверхове порівняння" всіх полей `props` і `state`, щоб визначити, чи має компонент оновитись. Цей шаблон трапляється часто, а тому React надає допоміжну функцію для цієї логіки — просто унаслідуйтесь від `React.PureComponent`. Наступний код показує простіший шлях для досягнення цього ефекту: ```js class CounterButton extends React.PureComponent { @@ -303,16 +303,16 @@ class CounterButton extends React.PureComponent { ); } } ``` -Most of the time, you can use `React.PureComponent` instead of writing your own `shouldComponentUpdate`. It only does a shallow comparison, so you can't use it if the props or state may have been mutated in a way that a shallow comparison would miss. +У більшості випадків ви можете використовувати `React.PureComponent` замість написання власного методу `shouldComponentUpdate`. Він робить лише поверхове порівняння, а тому ви не можете використати його, якщо пропси чи стан можуть змінитись таким чином, що поверхове порівняння пропустить цю зміну. -This can be a problem with more complex data structures. For example, let's say you want a `ListOfWords` component to render a comma-separated list of words, with a parent `WordAdder` component that lets you click a button to add a word to the list. This code does *not* work correctly: +Це може бути проблемою для більш складних структур даних. Наприклад, ви хочете, щоб компонент `ListOfWords` рендерив список слів розділених комами з батьківським компонентом `WordAdder`, що дає можливість натиснути на кнопку і додати слово в список. Цей код працює *неправильно*: ```javascript class ListOfWords extends React.PureComponent { @@ -325,15 +325,15 @@ class WordAdder extends React.Component { constructor(props) { super(props); this.state = { - words: ['marklar'] + words: ['марклар'] }; this.handleClick = this.handleClick.bind(this); } handleClick() { - // This section is bad style and causes a bug + // Даний метод є поганим стилем і спричиняє помилку const words = this.state.words; - words.push('marklar'); + words.push('марклар'); this.setState({words: words}); } @@ -348,31 +348,31 @@ class WordAdder extends React.Component { } ``` -The problem is that `PureComponent` will do a simple comparison between the old and new values of `this.props.words`. Since this code mutates the `words` array in the `handleClick` method of `WordAdder`, the old and new values of `this.props.words` will compare as equal, even though the actual words in the array have changed. The `ListOfWords` will thus not update even though it has new words that should be rendered. +Проблема в тому, що `PureComponent` зробить просте порівняння старого значення `this.props.words` з новим. Оскільки цей код змінює масив `words` у методі `handleClick` класу `WordAdder`, то нове та старе значення `this.props.words` будуть вважатися однаковими як посилання, хоча вміст масиву і змінився. `ListOfWords` не оновиться, хоч він і містить нові слова, що мають бути відрендерені. -## The Power Of Not Mutating Data {#the-power-of-not-mutating-data} +## Сила незмінності даних {#the-power-of-not-mutating-data} -The simplest way to avoid this problem is to avoid mutating values that you are using as props or state. For example, the `handleClick` method above could be rewritten using `concat` as: +Найпростішим шляхом уникнення цієї проблеми є уникнення зміни значень, які ви використовуєте як пропси чи стан. Наприклад, метод `handleClick` вище, міг би бути переписаний з використанням `concat`: ```javascript handleClick() { this.setState(state => ({ - words: state.words.concat(['marklar']) + words: state.words.concat(['марклар']) })); } ``` -ES6 supports a [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) for arrays which can make this easier. If you're using Create React App, this syntax is available by default. +ES6 підтримує [синтаксис розпакування](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Operators/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80_%D1%80%D0%BE%D0%B7%D0%BF%D0%B0%D0%BA%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F) для масивів, щоб спростити цю задачу. Якщо ви використовуєте Create React App, цей синтаксис доступний за замовчуванням. ```js handleClick() { this.setState(state => ({ - words: [...state.words, 'marklar'], + words: [...state.words, 'марклар'], })); }; ``` -You can also rewrite code that mutates objects to avoid mutation, in a similar way. For example, let's say we have an object named `colormap` and we want to write a function that changes `colormap.right` to be `'blue'`. We could write: +Ви також можете подібним чином переписати код, що змінює об'єкти. Наприклад, у нас є об'єкт `colormap` і ми хочемо написати функцію, що змінить `colormap.right` на `'blue'`. Ми могли б написати: ```js function updateColorMap(colormap) { @@ -380,7 +380,7 @@ function updateColorMap(colormap) { } ``` -To write this without mutating the original object, we can use [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) method: +Щоб переписати це без зміни оригінального об'єкта, ми можемо використати метод [Object.assign](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Object/assign): ```js function updateColorMap(colormap) { @@ -388,9 +388,9 @@ function updateColorMap(colormap) { } ``` -`updateColorMap` now returns a new object, rather than mutating the old one. `Object.assign` is in ES6 and requires a polyfill. +`updateColorMap` тепер повертає новий об'єкт, а не змінює старий. `Object.assign` — це ES6 і для його роботи потрібен поліфіл. -There is a JavaScript proposal to add [object spread properties](https://github.com/sebmarkbage/ecmascript-rest-spread) to make it easier to update objects without mutation as well: +Існує пропозиція щодо внесення в JavaScript [розпакування властивостей об'єкта](https://github.com/sebmarkbage/ecmascript-rest-spread), щоб зробити простішим оновлення об'єктів без їхньої зміни: ```js function updateColorMap(colormap) { @@ -398,17 +398,17 @@ function updateColorMap(colormap) { } ``` -If you're using Create React App, both `Object.assign` and the object spread syntax are available by default. +Якщо ви використовуєте Create React App, то `Object.assign` та розпакування об'єктів доступні за замовчуванням. -## Using Immutable Data Structures {#using-immutable-data-structures} +## Використання незмінних структур даних {#using-immutable-data-structures} -[Immutable.js](https://github.com/facebook/immutable-js) is another way to solve this problem. It provides immutable, persistent collections that work via structural sharing: +[Immutable.js](https://github.com/facebook/immutable-js) — це інший шлях вирішення цієї проблеми. Він надає незмінні та стійкі колекції, що працюють за принципом структурного обміну: -* *Immutable*: once created, a collection cannot be altered at another point in time. -* *Persistent*: new collections can be created from a previous collection and a mutation such as set. The original collection is still valid after the new collection is created. -* *Structural Sharing*: new collections are created using as much of the same structure as the original collection as possible, reducing copying to a minimum to improve performance. +* *Незмінність*: колекція не може бути зміненою після створення. +* *Стійкість*: нові колекції створюються з уже існуючих та змінюються спеціальними методами, такими як set. Оригінальна колекція залишається доступною після створення нової. +* *Структурний обмін*: нові колекції створюються з використанням якомога більшої частини структури оригінальної колекції, зводячи копіювання до мінімуму для покращення продуктивності. -Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code: +Незмінність робить відслідковування змін дешевим. Зміна завжди повертає новий об'єкт, а тому нам потрібно лише перевірити чи змінилось посилання на об'єкт. Наприклад, у цьому звичайному JavaScript-коді: ```javascript const x = { foo: 'bar' }; @@ -417,7 +417,7 @@ y.foo = 'baz'; x === y; // true ``` -Although `y` was edited, since it's a reference to the same object as `x`, this comparison returns `true`. You can write similar code with immutable.js: +Хоч `y` і змінився, але оскільки він посилається на той самий об'єкт `x`, це порівняння поверне `true`. Ви можете написати схожий код з immutable.js: ```javascript const SomeRecord = Immutable.Record({ foo: null }); @@ -428,8 +428,8 @@ x === y; // false x === z; // true ``` -In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`. +У цьому випадку, оскільки після зміни `x` повертається нове посилання, ми можемо перевірити посилання на рівність `(x === y)`, щоб впевнитись у тому, що нове значення, збережене в `y`, відрізняється від оригінального значення, збереженого в `x`. -Other libraries that can help use immutable data include [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper), and [seamless-immutable](https://github.com/rtfeldman/seamless-immutable). +Існуюють інші бібліотеки, що допоможуть з використанням незмінних даних: [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper) та [seamless-immutable](https://github.com/rtfeldman/seamless-immutable). -Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost. +Незмінні дані надають вам дешевий спосіб відслідковування змін в об'єктах і це саме те, що нам потрібно для реалізації `shouldComponentUpdate`. У більшості випадків це надасть вам непоганий приріст продуктивності.