函数式响应式范式中，如何在「帧」之间跟踪对象？

API 探路者

2026-5-27

如何在函数式响应式范式中跟踪"帧"间的对象状态

我刚啃Elm和React的时候也被这个问题搞懵过——毕竟每次写view（Elm）或者组件函数（React）都是纯纯的输入输出：给当前状态，返回全新的HTML描述。看起来像是每次界面更新都把所有元素拆了重造，那之前的那些对象（比如输入框的焦点、正在跑的动画进度）怎么能在更新后还保持住呢？别急，这其实是函数式响应式框架最巧妙的地方之一，核心逻辑是：我们不用直接跟踪DOM对象本身，而是跟踪描述对象状态的数据，剩下的交给框架来做映射和持久化。

1. 核心逻辑：用状态数据替代直接操作DOM对象

函数式响应式的本质是状态驱动UI，而不是像传统jQuery那样直接抓DOM对象改属性。你不用手动去记某个按钮被点了几次、输入框里写了啥，而是把这些数据存在你的Model（Elm）或者组件状态（React的useState）里。每次状态变化，view函数会重新执行生成新的UI描述，但框架会自动对比新旧描述，只更新真实DOM里需要变化的部分，那些没变化的元素的DOM对象会被完整保留，它们的内部状态自然也就延续下来了。

举个Elm的实际例子：

-- 我们把输入框的内容存在Model里
type alias Model = { inputText : String }

-- 处理输入事件，更新Model里的状态
update : Msg -> Model -> Model
update msg model =
    case msg of
        InputChanged newText ->
            { model | inputText = newText }

-- View函数拿Model生成输入框的描述
view : Model -> Html Msg
view model =
    input [ type_ "text", value model.inputText, onInput InputChanged ] []

这里你从来没直接碰过输入框这个DOM对象，但每次输入时，inputText状态更新，view重新渲染，Elm的虚拟DOM会对比新旧输入框的描述——发现只有value属性变了，就只更新真实输入框的value值，输入框本身的DOM对象根本没被销毁重建，所以焦点、光标位置这些状态自然就保留住了。

2. 处理"非序列化"对象：用框架提供的工具

有些时候你需要跟踪的不是能存在Model里的简单数据——比如Canvas的上下文、第三方图表库的实例，这些对象没法直接转成纯数据。这时候就需要用框架提供的专门工具来持久化这些引用：

React中的`useRef`

React的useRef就是干这个的：它创建的引用在组件整个生命周期里都不会变，而且修改它不会触发组件重新渲染。比如你要跟踪一个输入框并自动聚焦：

import { useRef, useEffect } from 'react';

function AutoFocusInput() {
  // 创建一个引用，初始值为null
  const inputRef = useRef(null);

  useEffect(() => {
    // 组件挂载后，inputRef.current就是真实的输入框DOM对象
    inputRef.current.focus();
  }, []);

  // 把引用绑定到输入框上
  return <input ref={inputRef} type="text" />;
}

不管组件函数（也就是React里的"view"）执行多少次，inputRef都是同一个引用，你随时能拿到那个输入框对象，不用操心它会不会被重建。

Elm中的Port或自定义指令

Elm是纯函数语言，不允许直接操作DOM对象，所以如果要处理这类非序列化对象，通常会用Port和JavaScript交互——把对象的控制权交给JS，Elm只负责管理需要同步的状态数据，比如图表的数值、Canvas的绘制参数，然后通过Port通知JS更新对象。也可以用社区的自定义指令库（比如elm-dom）来实现类似的功能。

3. 虚拟DOM是幕后功臣

不管是Elm还是React，虚拟DOM都是实现这个逻辑的核心。当view函数返回新的UI描述时，框架会对比新旧虚拟DOM树，找出最小的差异，然后只更新真实DOM中对应的部分。这意味着：

没有变化的元素会被完整保留，它们的DOM对象不会被销毁，内部状态（比如焦点、滚动位置）自然延续。
你只需要关心状态数据的变化，不用手动管理DOM对象的创建、销毁和更新。

总结一下

函数式响应式范式里，你完全不需要手动在"帧"之间跟踪对象——你只需要跟踪描述对象状态的数据，框架会负责把这些数据和真实DOM对象关联起来，并且在状态更新时高效地更新UI，同时保留那些需要持久化的对象状态。如果遇到无法用普通状态表示的对象，就用框架提供的工具（React的useRef、Elm的Port）来处理就行。

内容的提问来源于stack exchange，提问作者N.E.C.

函数式响应式范式中，如何在「帧」之间跟踪对象？

1. 核心逻辑：用状态数据替代直接操作DOM对象 #

2. 处理"非序列化"对象：用框架提供的工具 #

React中的useRef #

Elm中的Port或自定义指令 #

3. 虚拟DOM是幕后功臣 #