Влияет ли useContext / useSelector на производительность по сравнению с передачей через атрибуты?

Question

введите описание изображения здесь

У меня есть компонент, который содержит несколько вложенных дочерних компонентов; этим дочерним элементам требуется информация о родительском компоненте, а также данные из моего хранилища redux. Учитывая их количество, лучше ли использовать хук useSelector один раз в родительском компоненте и передавать его через атрибуты (а не контекст), чем использовать useSelector каждым дочерним элементом? Вдобавок, лучше ли передавать информацию о родительском компоненте через его атрибуты, чем использовать каждый дочерний элемент useContext?

edit: при тестировании скорость прохождения через атрибуты увеличивается на 20%; я предполагаю, что useSelector / useContext более затратный в своем объявлении, чем атрибут? Кто-нибудь может подтвердить, что это правда?

Answer 1

Как видите, react-redux использует контекстный API https://github.com/reduxjs/react-redux/search?q=useContext&unscoped_q=useContext

С точки зрения производительности все вышеперечисленные подходы близки друг к другу.

Лучшим способом решения проблем с производительностью является следующее:

1. Белый код хорошего качества (количество аргументов на функцию, количество строк на модуль, цикломати c сложность, вложение блоков, разветвление / коэффициенты разветвления и так далее). Не принимайте во внимание проблемы с производительностью.
2. Профилируйте и найдите узкие места в вашем качественном коде. Расставьте приоритеты.
3. Исправить найденные проблемы https://en.reactjs.org/docs/optimizing-performance.html

Answer 2

лучше ли использовать хук useSelector один раз в родительском компоненте и передавать его через атрибуты (а не контекст), чем использовать useSelector каждым дочерним элементом?

Второй вариант лучше. У вас будет меньше ненужных повторных отрисовок по сравнению с первым выбором.

В вашем сценарии первого выбора, когда что-то в родительском элементе изменяется, это запускает повторный рендеринг для компонента (это означает,

лучше ли передавать информацию о родительском компоненте через его атрибуты, чем использовать useContext каждым дочерним элементом?

Ответ тот же с указанным выше.