Jetpack Compose递归树渲染节点增删移动时UI更新异常

这是Jetpack Compose动态子节点diff错位+类稳定性缺失导致的典型问题，和所谓的“缓存”无关：

1. 递归渲染树节点时，你没有给每个Compose节点绑定唯一稳定的标识，Compose默认会按照子节点的位置做复用匹配。删除中间节点、移动节点时，子项位置发生偏移，Compose按位置diff会错误匹配节点实例：删除中间节点时会判定最后一个位置的子项被移除，移动节点时会判定位置上的内容没有变化，直接复用旧的UI内容。
2. 你的IngredientNode类对Compose编译器来说是非稳定类型：类中所有字段都是可变var，且嵌套了可变集合SnapshotStateList，Compose无法可靠订阅字段的变更，增量重组时会跳过部分更新逻辑。导航到其他页面再返回时会触发整棵组件树的全量重组（而非增量diff），所以渲染会暂时恢复正常。
3. 你使用copy()方法全量重写节点的逻辑存在隐患：data class的copy方法默认会直接复用children字段持有的原有SnapshotStateList实例，不会生成新的列表，容易出现新旧节点引用交叉、状态通知错乱的问题。

• 给所有递归渲染的节点绑定唯一稳定key
  用key()方法包裹每个节点的Composable内容，key必须和节点本身强绑定、全局唯一、不随节点位置变化（绝对不能用列表索引作为key），示例代码如下：

  @Composable
  fun RenderIngredientNode(node: IngredientNode) {
      // 假设Ingredient类有唯一业务id字段，用这个id当key
      key(node.ingredient.id) {
          // 这里写当前节点的UI逻辑
          Column {
              // 递归渲染子节点
              node.children.forEach { child ->
                  RenderIngredientNode(child)
              }
          }
      }
  }
  

  如果你用Lazy系列组件渲染树结构，直接给item传入对应的key参数即可，不需要额外套key()方法。这一步可以直接解决节点错位、移动不更新的问题。
• 修正数据类的稳定性
  给类添加@Stable注解，告知Compose编译器该类的变化是可追踪的；尽量用val声明不可变字段，避免随意使用var，如果确实需要可变字段，用MutableState<T>包裹，保证Compose能订阅到字段变化。修正后的数据类参考：

  @Stable
  data class IngredientNode(
      val ingredient: Ingredient,
      @JsonIgnore
      val parent: IngredientNode? = null,
      val children: SnapshotStateList<IngredientNode> = mutableStateListOf()
  )
  

• 替换全量copy整树的更新逻辑
  对节点的增删移操作，直接调用SnapshotStateList自带的可观察API即可，包括add()、removeAt()、move()，这些方法会自动发送精准的位置变更通知，不需要全量复制整棵树生成新对象，还能避免parent引用指向旧节点实例的问题。

修复后所有节点操作都会实时同步到UI，不需要切换页面触发全量重组，删除任意位置节点、移动节点都不会出现错位。

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