React Redux · Redux документация на английски
Съдържание
React Redux
Защо компонентът ми не се изобразява повторно? Защо mapStateToProps не работи?
Случайните мутации или директни промени в състоянието са най-честите причини компонентът да не бъде преначертан след изпращане на действие. Redux очаква вашите редуктори да актуализират състоянията си „неизменно“, което на практика означава, че трябва да направите копие на данните и да модифицирате копието. Ако върнете същия обект в редуктор, Redux приема, че нищо не се е променило, дори ако сте променили съдържанието на обекта. По същия начин React Redux се опитва да подобри производителността, като прави плитко сравнение на препратките към входните параметри в shouldComponentUpdate и ако всички препратки останат същите, връща false, пропускайки актуализирането на вашия компонент.
Важно е да запомните, че всеки път, когато актуализирате вложени стойности, трябва също да върнете нови копия на тези стойности в дървото на състоянието си. Ако имате state.a.b.c.d и искате да актуализирате данните в d, ще трябва да върнете и нови копия на c, b, a и state. Диаграма на мутация на дървото на състоянието показва как дълбоката промяна в дървото променя целия път.
Важно е да разберете, че „неизменяемо опресняване на данни“ не означава, че трябва да използвате Immutable.js, въпреки че със сигурност е опция. Можете да правите неизменни актуализации на прости JS обекти и масиви, като използвате няколко различни подхода:
Допълнителна информация
Документация
Статии
Дискусии
Защо компонентът ми препредава твърде често?
Въпреки че масивът може да съхранява абсолютно еднакви препратки всеки път, самият масив има различна препратка, като в този случай плиткото сравнение връща false и React Redux задейства преначертаването на компонента на обвивката.
Надвишаването може да бъде разрешено чрез съхраняване на масива от обекти в състояние с помощта на редуктор, кеширане на съвпадащия масив с помощта на Reselect или ръчно внедряване на shouldComponentUpdate вътре в компонента и извършване на по-задълбочено сравнение на параметри с помощта на функции като _.isEqual. Внимавайте да не направите shouldComponentUpdate () по-скъп от самото изобразяване! Винаги използвайте порфилер, за да тествате вашите предположения за производителност.
За несвързани компоненти можете да проверите кои параметри са предадени. Често срещан проблем е присъствието в родителския компонент на функцията, обвързваща се с контекста във визуализатора, като. Това създава нова функционална зависимост всеки път, когато родителят се преначертае. Счита се за добра практика свързването на функции към контекста веднъж в конструктора на родителския компонент.