Reagent传递Atom作为参数时的React Native性能问题排查

我之前在React Native + Reagent项目里也碰到过一模一样的问题！虽然Reagent文档说传递r/atom作为组件参数是没问题的，但在高频输入这种场景下，确实会出现你说的延迟和闪烁，核心原因在于Reagent对组件依赖的追踪逻辑：

为什么版本1会有性能问题？ #

当你把value这个r/atom直接传给todo-input组件时，Reagent会把这个atom本身当作组件的一个依赖项。每次输入内容变化时，虽然atom的引用没变，但Reagent会重新计算todo-input的参数，触发整个子组件的重新渲染。而在React Native里，频繁的组件重渲染（哪怕是小组件）在快速输入时就会积累成可见的延迟和闪烁。

反观版本2，text-input直接在todo-screen内部渲染，Reagent可以更精准地追踪局部状态的变化，只更新text-input这个底层原生组件，不会触发额外的组件层级重计算，所以性能更流畅。

保持组件拆分同时避免性能损失的方案 #

方案1：传递状态值+更新函数（最推荐） #

不要把整个atom传给子组件，而是传递当前的字符串值和更新函数。这样Reagent只会在值真正变化时更新子组件，避免了atom引用带来的额外追踪开销：

(defn todo-input [value on-change]
  [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 on-change}])

(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 #(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：将子组件转为React风格的纯组件 #

用r/reactify-component把todo-input转换成标准React组件，让Reagent的渲染优化更高效：

;; 定义成接收props的纯组件
(def todo-input
  (r/reactify-component
   (fn [{:keys [value on-change]}]
     [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 on-change}])))

(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 @value :on-change #(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]]))

方案3：用r/memo缓存组件（需谨慎） #

如果一定要传递atom，可以用r/memo来缓存组件，只有当atom的内容变化时才重新渲染。不过需要自定义比较函数，因为默认浅比较会认为atom引用没变而不更新：

(def todo-input
  (r/memo
   (fn [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 %)}])
   ;; 自定义比较：比较两个atom的当前值
   (fn [old-val new-val]
     (= @old-val @new-val))))

这个方案可行但不如前两种简洁，所以优先推荐前两个方案。

总结 #

传递r/atom本身不是错误，但在React Native的高频交互场景下，会触发不必要的组件重渲染。保持组件拆分的最佳实践下，传递状态值+更新函数是最简洁高效的方式，既符合组件职责分离，又能避免性能问题，完全不用把本地状态交给re-frame管理。

内容的提问来源于stack exchange，提问作者Marko