#reactjs #performance #performance-testing
#reactjs #Производительность #тестирование производительности
Вопрос:
У меня есть проект ReactJS, и мне интересно, что более производительно:
Предполагая, что у меня есть индексная страница и в ней 3 компонента, для каждого из которых требуются данные из базы данных для отображения и редактирования. Я могу сделать любое из приведенных ниже действий.
Вариант 1
pages/index.js: pass primary key to component1, component2, component3
component1: read data from database with primary key
component2: read data from database with primary key and some additional joins
component3: read data from database with primary key and use only part of the data
Вариант 2
pages/index.js: read data from database with primary key (and some additional joins)
component1: pass data via props
component2: pass joined data via props
component3: pass part of data via props
Какой вариант вы считаете более эффективным для запуска? Или есть даже лучший вариант?
Я предполагаю, что первый быстрее во время выполнения, но требует затрат на дополнительные запросы к базе данных. Второй вариант легче для базы данных, но не уверен, каков максимальный размер объектов, которые вы можете передавать через props. Верно ли мое предположение?
Комментарии:
1. вам нужно было бы сделать и то, и другое, и измерить это, чтобы выяснить .. но я бы предсказал, что в 90% сценариев реального мира вариант 2 будет намного, НАМНОГО быстрее
2. Вы троллируете? Попадание в базу данных является серьезным узким местом в любом потоке синхронного кода, прямо под сетевым вызовом. Props никоим образом не ограничены, как и любой объект JavaScript
Ответ №1:
Я думаю, что вариант 2 будет намного быстрее. В варианте 1 вы делаете много запросов, что снижает производительность серверов (базы данных). Как вы сказали, вы используете react js, вы можете использовать react-redux. получите данные из базы данных и сохраните их в хранилище redux. теперь вы можете использовать его в любом месте вашего проекта.
Ответ №2:
Измерьте оба и посмотрите, какой из них работает лучше. Я бы сказал, что передача props, второй вариант, намного быстрее. Я почти уверен, что узкое место, созданное несколькими обращениями к базе данных, невозможно сравнить с размером объекта javascript.
Короче говоря, выбирайте второй вариант.