![\"React](\"/static/d0f767f80866431ccdec18f200ca58f1/0a47e/devtools-prod.png\")
\n \n \n \n React использует несколько умных подходов для минимизации количества дорогостоящих DOM-операций, необходимых для обновления пользовательского интерфейса. Для многих приложений, использование React приведёт к быстрому пользовательскому интерфейсу без особых усилий по оптимизации производительности. Тем не менее, существует несколько способов ускорить React-приложение.
\nЕсли вы испытываете проблемы с производительностью в React-приложении, убедитесь в том, что вы проводите тесты с настройками минифицированной продакшен-сборки.
\nПо умолчанию в React есть много вспомогательных предупреждений, очень полезных при разработке. Тем не менее, они делают React больше и медленнее, поэтому вам обязательно следует использовать продакшен-версию при деплое приложения.
\nЕсли вы не уверены в том, что процесс сборки настроен правильно, вы можете проверить это, установив React Developer Tools for Chrome. Если вы посетите сайт, работающий на React в продакшен-режиме, иконка будет с чёрным фоном:
\n\n \n \n \n \n\n \n \n \n \n \nЕсли вы посетите сайт с React в режиме разработки, у иконки будет красный фон:
\n\n \n \n \n \n![\"React](\"/static/e434ce2f7e64f63e597edf03f4465694/0a47e/devtools-dev.png\")
\n \n \n \n \n \nКак правило, режим разработки используется во время работы над приложением, а продакшен-режим при деплое приложения для пользователей.
\nНиже вы можете найти инструкцию по сборке своего приложения для продакшена.
\nЕсли ваш проект сделан с помощью Create React App, выполните:
\nnpm run buildЭта команда создаст продакшен-сборку вашего приложения в папке build/ вашего проекта.
Помните, что это необходимо только перед деплоем на продакшен. Для обычной разработки используйте npm start.
Мы предлагаем готовые для продакшена версии React и React DOM в виде отдельных файлов:
\n<script src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>Помните, что для продакшена подходят только те файлы, которые заканчиваются на .production.min.js.
Для наиболее эффективной продакшен-сборки с Brunch, установите плагин terser-brunch.
# В случае использования npm\nnpm install --save-dev terser-brunch\n\n# В случае использования Yarn\nyarn add --dev terser-brunchЗатем, для создания продакшен сборки, добавьте флаг -p к команде build:
brunch build -pПомните, что это нужно делать только для продакшен-сборки. Вам не нужно использовать флаг -p или применять этот плагин во время разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
Для наиболее эффективной продакшен-сборки с Browserify, установите несколько плагинов:
\n# В случае использования npm\nnpm install --save-dev envify terser uglifyify \n\n# В случае использования Yarn\nyarn add --dev envify terser uglifyifyПри создании продакшен-сборки, убедитесь, что вы добавили эти пакеты для преобразования (порядок имеет значение):
\nenvify обеспечивает правильную среду для сборки. Сделайте его глобальным (-g).uglifyify удаляет импорты, добавленные при разработке. Сделайте его глобальным (-g).terser для минификации (прочитайте, зачем это нужно).К примеру:
\nbrowserify ./index.js \\\n -g [ envify --NODE_ENV production ] \\\n -g uglifyify \\\n | terser --compress --mangle > ./bundle.jsПомните, что это нужно делать только для продакшен-сборки. Вам не следует использовать эти плагины в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
\nДля наиболее эффективной продакшен-сборки с Rollup, установите несколько плагинов:
\n# В случае использования npm\nnpm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser\n\n# В случае использования Yarn\nyarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terserПри создании продакшен-сборки, убедитесь, что вы добавили эти плагины (порядок имеет значение):
\nreplace обеспечивает правильную среду для сборки.commonjs обеспечивает поддержку CommonJS в Rollup.terser сжимает и оптимизирует финальную сборку.plugins: [\n // ...\n require('rollup-plugin-replace')({\n 'process.env.NODE_ENV': JSON.stringify('production')\n }),\n require('rollup-plugin-commonjs')(),\n require('rollup-plugin-terser')(),\n // ...\n]Полный пример настройки можно посмотреть здесь.
\nПомните, что это нужно делать только для продакшен-сборки. Вам не следует использовать плагин terser или плагин replace со значением 'production' в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
\n\nПримечание:
\nЕсли вы используете Create React App, пожалуйста, следуйте инструкциям выше.
\n
\nЭтот раздел подойдёт для тех, кто самостоятельно настраивает webpack.
Webpack 4.0 и выше по умолчанию минифицирует код в продакшен-режиме.
\nconst TerserPlugin = require('terser-webpack-plugin');\n\nmodule.exports = {\n mode: 'production',\n optimization: {\n minimizer: [new TerserPlugin({ /* additional options here */ })],\n },\n};Вы можете узнать об этом больше в документации webpack.
\nПомните, что это нужно делать только для продакшен-сборки. Вам не стоит использовать TerserPlugin в процессе разработки, потому что тогда скроются вспомогательные предупреждения React и замедлится процесс сборки.
В режиме разработки вы можете видеть как компоненты монтируются, обновляются и размонтируются с помощью инструментов производительности в браузерах, которые их поддерживают. Например:
\n![\"Компоненты](\"/static/64d522b74fb585f1abada9801f85fa9d/1ac66/react-perf-chrome-timeline.png\")
\n \n \n \n \n Для того, чтобы сделать это в Chrome:
\nДля более детального ознакомления, посмотрите эту статью от Бена Шварца (Ben Schwarz).
\nОбратите внимание, что результаты являются относительными и в продакшене рендеринг компонентов будет быстрее. Всё же это должно помочь вам понять, когда не имеющий отношения пользовательский компонент обновляется по ошибке, а также как глубоко и часто обновляется пользовательский интерфейс.
\nВ настоящее время Chrome, Edge и IE единственные браузеры, которые поддерживают данную возможность, но мы используем стандарт User Timing API поэтому ожидайте, что больше браузеров добавят его поддержку.
\nПакеты react-dom версии 16.5+ и react-native версии 0.57+ предоставляют расширенные возможности анализа производительности в режиме разработки с помощью инструментов разработчика React Profiler.\nОбзор профайлера можно найти в посте блога «Введение в React Profiler».\nПошаговое видео-руководство также доступно на YouTube.
Если вы ещё не установили инструменты разработчика React, вы можете найти их здесь:
\n\n\n\nПримечание
\nПрофилирование продакшен-пакета для
\nreact-domтакже доступно какreact-dom/profiling.\nПодробнее о том, как использовать этот пакет, читайте на fb.me/react-profiling
Если ваше приложение рендерит длинные списки данных (сотни или тысячи строк), мы рекомендуем использовать метод известный как «оконный доступ». Этот метод рендерит только небольшое подмножество строк в данный момент времени и может значительно сократить время, необходимое для повторного рендера компонентов, а также количество создаваемых DOM-узлов.
\nreact-window и react-virtualized — это популярные библиотеки для оконного доступа. Они предоставляют несколько повторно используемых компонентов для отображения списков, сеток и табличных данных. Если вы хотите использовать что-то более специфическое для вашего конкретного случая, то вы можете создать собственный компонент с оконным доступом, как это сделано в Twitter.
\nReact создаёт и поддерживает внутреннее представление отображаемого пользовательского интерфейса. Оно также включает React-элементы возвращаемые из ваших компонентов. Это представление позволяет React избегать создания DOM-узлов и не обращаться к текущим без необходимости, поскольку эти операции могут быть медленнее, чем операции с JavaScript-объектами. Иногда его называют «виртуальный DOM», но в React Native это работает точно так же.
\nКогда изменяются пропсы или состояние компонента, React решает нужно ли обновление DOM, сравнивая возвращённый элемент с ранее отрендеренным. Если они не равны, React обновит DOM.
\nНесмотря на то, что React обновляет только изменённые DOM-узлы, повторный рендеринг всё же занимает некоторое время. В большинстве случаев это не проблема, но если замедление заметно, то вы можете всё ускорить, переопределив метод жизненного цикла shouldComponentUpdate, который вызывается перед началом процесса ререндеринга. Реализация этой функции по умолчанию возвращает true, указывая React выполнить обновление:
shouldComponentUpdate(nextProps, nextState) {\n return true;\n}Если вы знаете ситуации, в которых ваш компонент не нуждается в обновлении, вы можете вернуть false из shouldComponentUpdate, чтобы пропустить весь процесс рендеринга, включая вызов render() и так далее ниже по иерархии.
В большинстве случаев вместо того, чтобы писать shouldComponentUpdate() вручную, вы можете наследоваться от React.PureComponent. Это эквивалентно реализации shouldComponentUpdate() с поверхностным сравнением текущих и предыдущих пропсов и состояния.
Вот поддерево компонентов. Для каждого из них SCU указывает что возвратил shouldComponentUpdate, а vDOMEq указывает эквивалентны ли отрендеренные React элементы. Наконец, цвет круга указывает требуется ли согласовать компонент или нет.
![\"Дерево](\"/static/5ee1bdf4779af06072a17b7a0654f6db/cd039/should-component-update.png\")
\n \n \n \n \n Поскольку shouldComponentUpdate возвратил false для поддерева с корнем C2, React не пытался отрендерить C2, следовательно не нужно вызывать shouldComponentUpdate на C4 и C5.
Для C1 и C3 shouldComponentUpdate возвратил true, поэтому React пришлось спуститься к листьям и проверить их. Для C6 shouldComponentUpdate вернул true, и поскольку отображаемые элементы не были эквивалентны, React должен был обновить DOM.
Последний интересный случай — C8. React должен был отрисовать этот компонент, но поскольку возвращаемые им React-элементы были равны ранее предоставленным, ему не нужно обновлять DOM.
\nОбратите внимание, что React должен был делать изменения только для C6. Для C8 этого удалось избежать сравнением отрендеренных React-элементов, а для поддеревьев C2 и C7 даже не пришлось сравнивать элементы, так как нас выручил shouldComponentUpdate и render не был вызван.
Если единственный случай изменения вашего компонента это когда переменная props.color или state.count изменяются, вы могли бы выполнить проверку в shouldComponentUpdate следующим образом:
class CounterButton extends React.Component {\n constructor(props) {\n super(props);\n this.state = {count: 1};\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n if (this.props.color !== nextProps.color) {\n return true;\n }\n if (this.state.count !== nextState.count) {\n return true;\n }\n return false;\n }\n\n render() {\n return (\n <button\n color={this.props.color}\n onClick={() => this.setState(state => ({count: state.count + 1}))}>\n Счётчик: {this.state.count}\n </button>\n );\n }\n}В этом коде shouldComponentUpdate — это простая проверка на наличие каких-либо изменений в props.color или state.count. Если эти значения не изменяются, то компонент не обновляется. Если ваш компонент стал более сложным, вы можете использовать аналогичный паттерн «поверхностного сравнения» между всеми полями props и state, чтобы определить должен ли обновиться компонент. Этот механизм достаточно распространён, поэтому React предоставляет вспомогательную функцию для работы с ним — просто наследуйтесь от React.PureComponent. Поэтому, следующий код — это более простой способ добиться того же самого эффекта:
class CounterButton extends React.PureComponent {\n constructor(props) {\n super(props);\n this.state = {count: 1};\n }\n\n render() {\n return (\n <button\n color={this.props.color}\n onClick={() => this.setState(state => ({count: state.count + 1}))}>\n Счётчик: {this.state.count}\n </button>\n );\n }\n}В большинстве случаев вы можете использовать React.PureComponent вместо написания собственного shouldComponentUpdate. Но он делает только поверхностное сравнение, поэтому его нельзя использовать, если пропсы и состояние могут измениться таким образом, который не сможет быть обнаружен при поверхностном сравнении.
Это может стать проблемой для более сложных структур данных. Например, вы хотите, чтобы компонент ListOfWords отображал список слов, разделённых через запятую, с родительским компонентом WordAdder, который позволяет кликнуть на кнопку, чтобы добавить слово в список. Этот код работает неправильно:
class ListOfWords extends React.PureComponent {\n render() {\n return <div>{this.props.words.join(',')}</div>;\n }\n}\n\nclass WordAdder extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n words: ['словцо']\n };\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n // Данная секция содержит плохой код и приводит к багам\n const words = this.state.words;\n words.push('словцо');\n this.setState({words: words});\n }\n\n render() {\n return (\n <div>\n <button onClick={this.handleClick} />\n <ListOfWords words={this.state.words} />\n </div>\n );\n }\n}Проблема в том, что PureComponent сделает сравнение по ссылке между старыми и новыми значениями this.props.words. Поскольку этот код мутирует массив words в методе handleClick компонента WordAdder, старые и новые значения this.props.words при сравнении по ссылке будут равны, даже если слова в массиве изменились. ListOfWords не будет обновляться, даже если он содержит новые слова, которые должны быть отрендерены.
Лучший способ решения этой проблемы — избегать мутирования значений, которые вы используете как свойства или состояние. К примеру, описанный выше метод handleClick можно переписать с помощью concat следующим образом:
handleClick() {\n this.setState(state => ({\n words: state.words.concat(['словцо'])\n }));\n}ES6 поддерживает синтаксис расширения для массивов, который поможет сделать это проще. Если вы используете Create React App, то этот синтаксис доступен там по умолчанию.
\nhandleClick() {\n this.setState(state => ({\n words: [...state.words, 'словцо'],\n }));\n};Таким же образом вы можете переписать код, который мутирует объекты. К примеру, мы имеем объект с именем colormap и хотим написать функцию, которая изменяет colormap.right на 'blue'. Мы могли бы написать:
function updateColorMap(colormap) {\n colormap.right = 'blue';\n}Чтобы написать это без мутирования исходного объекта, мы можем использовать метод Object.assign:
\nfunction updateColorMap(colormap) {\n return Object.assign({}, colormap, {right: 'blue'});\n}Функция updateColorMap теперь возвращает новый объект, вместо того, чтобы мутировать исходный. Метод Object.assign входит в ES6 и требует полифила.
Синтаксис расширения свойств объекта упрощает обновление объектов без мутаций:
\nfunction updateColorMap(colormap) {\n return {...colormap, right: 'blue'};\n}Этот синтаксис был добавлен в JavaScript в ES2018.
\nЕсли вы используете Create React App, то Object.assign и синтаксис расширения объектов доступны вам по умолчанию.
При работе с глубоко вложенными объектами, постоянное их обновление может запутать. Если вы столкнулись с такой проблемой, обратите внимание на Immer или immutability-helper. Эти библиотеки позволяют писать хорошо читаемый код, не теряя преимуществ иммутабельности.
","frontmatter":{"title":"Оптимизация производительности","next":null,"prev":null},"fields":{"path":"content/docs/optimizing-performance.md","slug":"docs/optimizing-performance.html"}}},"pageContext":{"slug":"docs/optimizing-performance.html"}},"staticQueryHashes":[]}