Chuckle

前端表单详情渲染,历史记录对比,变化部分标记,怎么实现比较好

  •  
  •   Chuckle ·
    qxchuckle · Sep 3, 2025 · 2620 views
    This topic created in 427 days ago, the information mentioned may be changed or developed.
    ===先说说背景
    react ,表单是一个抽象 json ,若干 type ,每种 type 编辑时、详情时各一个组件,对应渲染。

    现在详情时要标记出和上次有变化的部分,颗粒度还比较细,要具体到值变化。
    比如一个多选项,上一次 a 、b ,这次 b 、c ,那 c 就会被标记(标红或者下划线)。

    组件简单点还好说,但是有些表单项,对应的值也是一个复杂的对象,渲染出来是一个按钮,点进去是个弹窗。

    ===我有两个想法
    第一,比较搬砖点,那就是对每种 type 的详情组件单独改造,新旧值拿 isEqual 对比出来一个个插值处做判断和适配。

    但是 type 是随意写的,不一样的表单项,都可以单独起个 type ,维护一个组件,别的地方也会改造表单 json 加点东西,那都得维护这一套,很麻烦。

    第二就是搞个通用组件,新旧值都渲染,旧的 hidden ,然后 dom diff ,自动给有变化的文本节点加 span 标出来,但感觉会比较难搞,和 react 搭配起来、以及性能可能会有问题?

    问问大伙还有啥好想法。
    9 replies  •  2025-09-18 22:00:19 +08:00
    murmur
    murmur
    Sep 3, 2025
    1
    我用的大型 OA ,只保存了历史记录,没有对比功能, 可能的却是太难了
    Shokupanman
    Shokupanman
    Sep 3, 2025
    2
    不用每个都单独写一套,扩展一下你那个最基础组件的功能就行了,isEqual 不也能写到基础组件里面去吗
    hwdq0012
    hwdq0012
    Sep 3, 2025
    3
    这个我在我们属性树上做过, 设计模式 proxy , 原来的数据用包在代理数据里,代理里加状态
    Chuckle
    Chuckle
    OP
    Sep 3, 2025
    4
    @Shokupanman 每种 type 都是独立的组件,要展示的内容、value 数据结构都不同,没法复用
    kamilic
    kamilic
    Sep 9, 2025
    5
    用状态管理那套方法来做?记录所有的操作历史记录,然后做 diff
    Chuckle
    Chuckle
    OP
    Sep 9, 2025
    6
    @kamilic diff 倒是简单,loadsh 都有现成方法,后面我还是用了方案二,写了个通用组件,把新旧数据都渲染一次,然后用 observer api 观察子元素 dom ,dom diff 、算最长公共子序列,把增删改的文本在新 dom 上标记了出来,不过坏处就是只能对文本节点操作,像勾选框之类的就没办法了
    sibusana
    sibusana
    Sep 18, 2025
    7
    直接 diff html 呢?像富文本编辑器那样对比历史记录
    Chuckle
    Chuckle
    OP
    Sep 18, 2025
    8
    @sibusana 最后就是用了第二种方案,直接进行了 dom diff ,差不多是 html diff 的简化版吧,只 diff 了文本,而且 dom 的相对位置一样才是修改,不然就是删除后再添加 够用了,不知道 react 上的 dom diff 有没有现成的库,而且一旦替换了 react 管理的 dom ,react 后续就没法正常更新那个 dom 了,所以必须每次渲染都随机 key ,强制更新整个组件。
    Chuckle
    Chuckle
    OP
    Sep 18, 2025
    9
    @Chuckle #6 用最长子序列搞了字符级的 diff 标记
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   3095 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 11:11 · PVG 19:11 · LAX 03:11 · JFK 06:11
    ♥ Do have faith in what you're doing.