Блог

Итак, хотя виртуальный dom и diffing — это то, что делает React быстрым по сравнению с прямым управлением dom, я читал, что если вы не модулируете свои компоненты, это вызовет ненужные рендеры, потому что он повторно отобразит все родительские компоненты, от которых он получил свои реквизиты, даже если их пользовательский интерфейс не изменился. Это один из самых больших недостатков производительности React.

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

Что, если я создам какой-нибудь компонент более высокого порядка (например, redux’s connect), который обернет весь мой основной компонент (который содержит все мои компоненты) и рекурсивно создаст фрагмент состояния для каждого отдельного компонента, который содержит только необходимые ему реквизиты? Таким образом, он может сохранить принцип сингулярности, подобный redux, и удобство сопровождения кода, избегая при этом ненужных повторных рендерингов.

Я думаю, что его, возможно, придется использовать в сочетании с redux, чтобы иметь доступ ко всем реквизитам одновременно где-нибудь, но, возможно, его можно использовать и без. Таким образом, разделение кода и отложенная загрузка компонентов будут легко реализованы (возможно, установка максимального количества одновременных запросов к серверу для уменьшения накладных расходов). Я бы также запомнил реквизиты, чтобы уменьшить количество запросов.

Я думал об этом как о потенциальной идее для побочного проекта, но я не знаю, возможно ли это или решает ненужную проблему рендеринга. Я думаю об этом как о какой-то библиотеке npm, которую можно использовать поверх redux.