Хорошим примером "борьбы" со "сложностью" является проблема мемоизации в state management.
Это прям ОЧЕНЬ фундаментальная проблема, затрагивающая практически любой аспект
- Начнем с #Redux - он без мемоизации банально не работает. Просто потому что таковы "правила игры".
Reselect, с его cacheSize==1 решением НЕ является. Он сам по себе проблема.
Было много попыток улететь - re-reselect, или engineered redux-views
github.com/reduxjs/resele…
Были и есть еще более over-engeneered варианты, в частности Proxy based, которые решила 99% селекторов, кроме одной:
github.com/theKashey/memo…
github.com/dai-shi/reacti…
github.com/reduxjs/react-…
"Одна проблема" - это именно хранение "одного"(последнего) значения "внутри" себя
React.hooks в этом плане сильно лучше - он хранит свое значение в React Fiber.
Для не-реакта можно использовать kashe(cache+@thekashey) - простое решение на основе WeakMaps
dev.to/thekashey/memo…
Есть другие варианты решения. Просто ДРУГИЕ - например @ReatomJS или XState, где мемоизация вообще не нужна.
Ну или MobX, опять же, хотя он из рода proxy-based вариантов.
(и кто-то сказал VueJS?)
Давайте остановимся на proxy варианте, потому как на нем легко обьяснить почему "разделение" важно.
Работает он просто - state оборачивается в proxy, трекается в какие дебри вы залезли, и результат будет пересчитываться только если изменилось что-то что было "использовано"
- было a.b.c
- вы сказали if(a.b.c)...
- это значит что
a и b были "промежуточными", и "ненужны"
- а вот c важно.
Логично? Давайте немного изменим код- if(a.b.c) return a.b;
^ внезапно получается что
b тоже важен, это именно то что функция возвращает!
И что-бы это понять должна быть функция, которая должна что-то возвращать!
Логично? Давайте немного изменим кодДавайте заинлайним все это в компонент!
const MyComponent = ({a}) => (
a.b.c
? <OtherComponet data={a.b} />
: <OtherComponent data={a.d} />
);
a.b пройдет незамеченным, только если не распарсить ответ render, что я делать не советую
- Поэтому с reactive-react-redux/useTrackedSelector можно выстрелить себе в ногу (там хуки, все в куче )
- А с connect-based beautiful-react-redux все будет окей
Банально потому что есть "забор".
Больше разделения == больше контроля.
habr.com/ru/post/350562/
Упс, оказывается полностью перевести статью на русский я немного поленился.
Самая полная версия сейчас живет на dev.to
dev.to/thekashey/how-…
The word "complex" is often misused when describing software. If something is difficult to understand, it is "complicated", not complex. If something introduces exponentially many more possible ways it can interact with other things, it is "complex". en.wikipedia.org/wiki/Programmi…