Jetpack Compose不触发全页面重组如何单独更新指定UI组件？

核心实现原则 #

• 把进度条组件拆成独立的渲染单元，和静态内容的DOM节点完全分离，静态内容的DOM在首次渲染后永远不要触发变更
• 进度更新仅修改进度条自身的渲染属性，不要修改上层公共父节点的任何属性

1. 原生JS实现方案 #

给进度条单独分配独立的DOM容器，不要和静态内容共享父级的可变属性，每秒更新时仅修改进度条对应的DOM属性，比如Canvas绘制参数、SVG的stroke-dashoffset属性，或者CSS变量即可。
示例代码：

<!-- 静态内容 渲染后完全不改动 -->
<div class="static-content">
  <h1>页面标题</h1>
  <p>其他静态说明文字</p>
</div>
<!-- 独立的进度条容器 -->
<svg id="circular-progress" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
  <circle id="progress-bar" cx="50" cy="50" r="40" stroke="#3b82f6" stroke-width="8" fill="none"
    stroke-dasharray="251.2" stroke-dashoffset="0" transform="rotate(-90 50 50)"/>
</svg>

const totalLength = 2 * Math.PI * 40; // 对应圆的周长
let progress = 0;
setInterval(() => {
  progress = (progress + 1) % 100;
  const offset = totalLength * (1 - progress / 100);
  // 仅修改进度条自身的属性，完全不涉及其他DOM节点
  document.querySelector('#progress-bar').setAttribute('stroke-dashoffset', offset);
}, 1000);

2. React实现方案 #

• 把进度条封装为独立组件，用useState单独管理进度状态，不要把进度状态提升到包含静态内容的上层组件
• 可以用React.memo包裹进度条组件，进一步避免不必要的重渲染，只要状态不放在上层，上层的静态组件本身就不会重渲染
  示例代码：

// 静态内容组件，没有任何状态，首次渲染后永远不会重渲染
const StaticContent = () => {
  return <div>
    <h1>页面标题</h1>
    <p>其他静态说明文字</p>
  </div>
}
// 独立的进度条组件，自己管理进度状态
const CircularProgress = () => {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress(prev => (prev + 1) % 100);
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  const totalLength = 2 * Math.PI * 40;
  const offset = totalLength * (1 - progress / 100);
  return <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
    <circle cx="50" cy="50" r="40" stroke="#3b82f6" stroke-width="8" fill="none"
      stroke-dasharray={totalLength} stroke-dashoffset={offset} transform="rotate(-90 50 50)"/>
  </svg>
}
// 父组件只负责组合，没有任何会更新的状态，自身也不会重渲染
export default function Page() {
  return <div>
    <StaticContent />
    <CircularProgress />
  </div>
}

3. Vue实现方案 #

• 进度条封装为单独组件，进度状态放在组件内部，不要放在父组件的响应式状态里
• 静态内容单独拆分，没有绑定响应式变量，首次渲染后不会触发更新
  示例代码：

<!-- CircularProgress.vue 独立组件 -->
<template>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
    <circle cx="50" cy="50" r="40" stroke="#3b82f6" stroke-width="8" fill="none"
      :stroke-dasharray="totalLength" :stroke-dashoffset="offset" transform="rotate(-90 50 50)"/>
  </svg>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
const progress = ref(0)
const totalLength = 2 * Math.PI * 40
const offset = computed(() => totalLength * (1 - progress.value / 100))
let timer
onMounted(() => {
  timer = setInterval(() => {
    progress.value = (progress.value + 1) % 100
  }, 1000)
})
onUnmounted(() => clearInterval(timer))
</script>

父组件直接引用即可：

<template>
  <!-- 静态内容 无响应式绑定 不会重渲染 -->
  <div>
    <h1>页面标题</h1>
    <p>其他静态说明文字</p>
  </div>
  <CircularProgress />
</template>

优化补充点 #

• 尽量用CSS/原生属性更新进度，不要操作innerHTML或者修改整个组件的结构，避免不必要的DOM回流
• 可以用Chrome开发者工具的「性能」面板录制渲染过程，确认更新时只有进度条对应的DOM节点被重绘，其他区域没有渲染标记

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