Status Mobile 项目中的 React 组件开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00945/article/details/148550246

Status Mobile 项目中的 React 组件开发指南

status-mobile a free (libre) open source, mobile OS for Ethereum 项目地址: https://gitcode.com/gh_mirrors/st/status-mobile

前言

在移动应用开发领域，React 已经成为构建用户界面的主流选择。Status Mobile 项目采用 ClojureScript 结合 React 技术栈，形成了一套独特的开发范式。本文将深入解析 Status Mobile 项目中 React 组件的最佳实践，帮助开发者理解从传统类组件到现代函数式组件的演进过程。

组件演进：从 Reagent 到 React Hooks

技术背景

Status Mobile 项目最初选择了 Reagent 库作为基础，当时 React Hooks 尚未出现，Reagent 结合 Re-frame 提供了完整的解决方案。但随着 React 生态的演进，函数组件和 Hooks 成为主流，Status 2.0 开始逐步采用这些现代特性。

新旧对比

传统 Reagent 组件示例：

(defn- view-internal
  [_ _]
  (let [pressed? (reagent/atom false)]
    (fn
      [{:keys [theme on-press on-long-press icon]}]
      [rn/pressable
       {:style               (style/main @pressed? theme)
        :on-press            on-press
        :on-press-in         #(reset! pressed? true)
        :on-press-out        #(reset! pressed? nil)
        :on-long-press       on-long-press}
       [quo.icons/icon icon]])))

(def view (theme/with-theme view-internal))

现代函数组件示例：

(defn view
  [{:keys [on-press on-long-press icon]}]
  (let [[pressed? set-pressed] (rn/use-state false)
        theme                  (context/use-theme)
        on-press-in            (rn/use-callback #(set-pressed true))
        on-press-out           (rn/use-callback #(set-pressed nil))]
    [rn/pressable
     {:style               (style/main pressed? theme)
      :on-press            on-press
      :on-press-in         on-press-in
      :on-press-out        on-press-out
      :on-long-press       on-long-press}
     [quo.icons/icon icon]]))

关键改进点

简化组件结构：不再需要匿名渲染函数，降低了认知负担
状态管理现代化：使用 use-state 替代 reagent/atom
主题获取简化：直接使用 use-theme 钩子，无需包装组件
回调函数优化：使用 use-callback 避免不必要的重新渲染

状态管理最佳实践

全局状态管理

Status Mobile 采用 Re-frame 订阅机制管理全局状态：

(defn view
  [{:keys [selected-tab]}]
  (let [collectible-list (rf/sub [:wallet/all-collectibles])
        on-collectible-press (rn/use-callback
                              (fn [{:keys [id]}]
                               (rf/dispatch [:wallet/get-collectible-details id])))]
    [rn/view {:style style/container}
     (case selected-tab
       :assets       [assets/view]
       :collectibles [collectibles/view {:collectibles         collectible-list
                                         :on-collectible-press on-collectible-press}])
       [activity/view]]))

原子(atom)使用规范

对于需要保持引用的可变值，应使用 use-ref-atom：

(defn view
  []
  (let [focused? (rn/use-ref-atom false)
        on-clear (rn/use-callback #(set-status (if @focused? :active :default)))
        on-focus (rn/use-callback #(reset! focused? true))
        on-blur  (rn/use-callback #(reset! focused? false))]))

组件生命周期管理

挂载与卸载

(defn view
  [{:keys []}]
  (let [opacity (reanimated/use-shared-value 0)]
    (rn/use-mount #(reanimated/animate opacity 1))
    [rn/view
     {:style (style/opacity opacity)}]))

(defn view
  [{:keys []}]
  (let []
    (rn/use-unmount #(rn/dispatch [:unmounted]))
    [rn/view]))

副作用使用警示

避免将副作用作为状态变化的响应机制，这会导致难以追踪的数据流。正确的做法是将状态变更逻辑集中处理。

性能优化策略

组件创建优化

减少不必要的包装元素，直接通过属性传递样式：

(defn view
  []
  (let []
    [quo/button {:container-style {:padding-top 20}}]))

组件更新优化

精细控制状态订阅，避免不必要的重新渲染：

(defn component
  []
  (let [label (rf/sub [:screen-params-label])]
    [rn/text label]))

(defn component2
  []
  (let [label2 (rf/sub [:screen-params-label2])]
    [rn/text label2]))