Я работаю над собственным приложением реакции, используя перекадровку Clojurescript и реагент. У меня есть один компонент ввода текста, и у меня есть две версии кода:
Версия 1 : входной текст является отдельным компонентом, и атом состояния передается в качестве аргумента, так же, как рекомендуется в документах и примерах библиотеки реагентов.
(defn todo-input [value]
[rn/text-input
{:style (styles :textInput) :multiline true
:placeholder "What do you want to do today?" :placeholder-text-color "#abbabb"
:value @value
:on-change-text #(reset! value %)}]
)
(defn todo-screen []
(let [value (r/atom nil)]
[rn/view {:style (styles :container)}
[rn/text {:style (styles :header)} "Todo List"]
[rn/view {:style (styles :textInputContainer)}
[todo-input value]
[rn/touchable-opacity
{:on-press (fn [] (rf/dispatch [:add-todo @value]) (reset! value nil))}
[icon {:name "plus" :size 30 :color "blue" :style {:margin-left 15}}]]]
[todos]
]))
Версия 2 : все в одном компоненте.
(defn todo-screen []
(let [value (r/atom nil)]
[rn/view {:style (styles :container)}
[rn/text {:style (styles :header)} "Todo List"]
[rn/view {:style (styles :textInputContainer)}
[rn/text-input
{:style (styles :textInput) :multiline true
:placeholder "What do you want to do today?" :placeholder-text-color "#abbabb"
:value @value
:on-change-text #(reset! value %)}]
[rn/touchable-opacity
{:on-press (fn [] (rf/dispatch [:add-todo @value]) (reset! value nil))}
[icon {:name "plus" :size 30 :color "blue" :style {:margin-left 15}}]
]]
[todos]]))
Проблема заключается в том, что первая версия имеет производительность проблема при наборе текста, поскольку при попытке быстрого набора текста возникает большая задержка и мерцание. В версии 2 проблем нет, и я могу печатать так быстро, как только могу.
Согласно документации по реагентам, передача r / atom в качестве параметра не должна вызывать проблем с производительностью.
Я что-то здесь не так делаю? Что было бы лучшим способом избежать снижения производительности здесь.
Это небольшой пример, и наличие одного компонента вместо двух не представляет особой проблемы, но разделение одного большого на несколько меньших компонентов в хорошей практике. Состояние здесь является локальным для компонента, и я не хочу использовать для него re-frame.