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

[Chuckle]

===先说说背景
react ，表单是一个抽象 json ，若干 type ，每种 type 编辑时、详情时各一个组件，对应渲染。

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

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

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

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

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

问问大伙还有啥好想法。

[murmur]

我用的大型 OA ，只保存了历史记录，没有对比功能， 可能的却是太难了

[Shokupanman]

不用每个都单独写一套，扩展一下你那个最基础组件的功能就行了，isEqual 不也能写到基础组件里面去吗

[hwdq0012]

这个我在我们属性树上做过， 设计模式 proxy ， 原来的数据用包在代理数据里，代理里加状态

[Chuckle]

@Shokupanman 每种 type 都是独立的组件，要展示的内容、value 数据结构都不同，没法复用

[kamilic]

用状态管理那套方法来做？记录所有的操作历史记录，然后做 diff

[Chuckle]

@kamilic diff 倒是简单，loadsh 都有现成方法，后面我还是用了方案二，写了个通用组件，把新旧数据都渲染一次，然后用 observer api 观察子元素 dom ，dom diff 、算最长公共子序列，把增删改的文本在新 dom 上标记了出来，不过坏处就是只能对文本节点操作，像勾选框之类的就没办法了

[sibusana]

直接 diff html 呢？像富文本编辑器那样对比历史记录

[Chuckle]

@sibusana 最后就是用了第二种方案，直接进行了 dom diff ，差不多是 html diff 的简化版吧，只 diff 了文本，而且 dom 的相对位置一样才是修改，不然就是删除后再添加 够用了，不知道 react 上的 dom diff 有没有现成的库，而且一旦替换了 react 管理的 dom ，react 后续就没法正常更新那个 dom 了，所以必须每次渲染都随机 key ，强制更新整个组件。

[Chuckle]

@Chuckle #6 用最长子序列搞了字符级的 diff 标记