react-native - 将原子作为函数参数传递时的试剂性能问题

Question

我使用 Clojurescript 重新框架和试剂处理 react 原生应用程序。我有一个文本输入组件，并且有两个版本的代码:

版本 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 作为参数传递不应导致任何性能问题。

我在这里做错了吗？在这里避免性能损失的最佳方法是什么。

这是一个小例子，使用一个组件而不是两个组件没什么大不了的，但是在一个好的实践中将一个大的组件拆分为多个较小的组件。此处的状态是组件的本地状态，我不想对其使用重新框架。

Answer 1

re-frame/dispatch将您的事件放入队列中以进行重新框架处理，因此在它实际通过之前可能会有一些延迟，并且您的更改将在那里。

听起来您遇到了此处所述的相同问题:https://github.com/day8/re-frame/issues/368

因此，一种解决方法是使用 re-frame.core/dispatch-sync这会强制重新框架直接和同步地处理事件。您可能还需要添加对 reagent.core/flush 的调用强制重新渲染组件。我之前在构建 Web 客户端时不需要刷新，但 React Native 的工作方式似乎有所不同。

您可以在此处阅读有关这两个函数的更多信息:

https://github.com/day8/re-frame/blob/master/src/re_frame/router.cljc#L251-L263

https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/batching.cljs

上面提到的问题也是 https://github.com/Day8/re-com据说这以某种方式解决了这个问题，但我没有仔细研究。

您的解决方案#2 也没有错，它只是为您提供了一种不同的工作方式。因此，例如，如果您需要 app-db 中的数据在每次按键时更新，那么只有更像 #1 的东西才能工作。或者使用解决方案#2，但将原子作为参数传递给您的组件。