3、渲染优化：setData机制详解、避免频繁setData、使用自定义组件优化渲染

3.1 setData 到底在干什么？

说实话，很多同学写了两年小程序，对 setData 的理解还停留在「改数据、刷新页面」这个层面。但你要知道，setData 的本质是跨线程通信。

小程序的逻辑层跑在 JSCore 里，渲染层跑在 WebView 里。你每次调用 setData，逻辑层都得把数据序列化成字符串，通过 Native 层转发给渲染层，渲染层再反序列化、执行 diff、更新 DOM。这一套流程下来，开销比你想象中大得多。

我记得刚接手一个电商项目时，发现首页有个商品列表，每次滚动加载更多都会卡顿。一查日志，好家伙，一次 setData 传了 200 多 KB 的数据。说白了，你把整个列表都塞进去了，能不卡吗？

3.2 setData 的机制详解

我们来拆解一下 setData 的内部流程。你想想看，当你写下 this.setData({ name: '张三' }) 时，发生了什么：

1. 序列化：逻辑层把数据对象转成 JSON 字符串
2. 传输：通过 Native 桥接层发送到渲染层
3. 反序列化：渲染层把 JSON 字符串转回 JS 对象
4. 虚拟 DOM diff：对比新旧数据，找出变化部分
5. 更新真实 DOM：只修改变化的部分

这里有个坑很多人不知道——序列化和反序列化本身就很耗时。尤其是当你的数据里包含大量嵌套对象、数组时，JSON.stringify 和 JSON.parse 的 CPU 消耗会直线上升。

3.3 避免频繁 setData

嗯，这里要重点讲。很多新手喜欢在 onPageScroll 或 touchmove 里疯狂 setData，觉得「反正数据变了就得更新」。但你要知道，渲染帧率只有 60fps，也就是 16.6ms 一帧。如果你在 16ms 内调了 3 次 setData，那只有最后一次能赶上当前帧，前两次都白费了。

我建议你记住这几个原则：

• 合并 setData 调用：把多次 setData 合并成一次，比如 this.setData({ a: 1, b: 2, c: 3 }) 而不是三次分开调
• 只传变化的数据：不要传整个 data 对象，只传你需要更新的字段
• 控制频率：高频事件（如滚动、触摸）里，用节流或防抖控制 setData 调用
• 避免大数据量：单次 setData 的数据量建议控制在 64KB 以内

来看一个反面教材：

// ❌ 错误做法：每次滚动都 setData 整个列表
onPageScroll(e) {
  this.setData({
    scrollTop: e.scrollTop,
    list: this.data.list // 整个列表又传了一遍！
  })
}

// ✅ 正确做法：只传变化的数据，并做节流
let ticking = false
onPageScroll(e) {
  if (!ticking) {
    requestAnimationFrame(() => {
      this.setData({ scrollTop: e.scrollTop })
      ticking = false
    })
    ticking = true
  }
}

3.4 使用自定义组件优化渲染

这是抖音小程序性能优化的一个大杀器。为什么自定义组件能优化渲染？因为自定义组件有自己的渲染上下文。

说白了，当你用自定义组件时，组件的 setData 只会触发组件自身的更新，不会影响页面其他部分。这就像把一个大房间隔成几个小房间，哪个房间脏了打扫哪个，不用每次都把整个房子翻一遍。

我举个例子你就明白了。假设你有一个商品卡片列表，每个卡片上有个「收藏」按钮。如果不用自定义组件，点击收藏时，整个列表都得重新渲染。但如果你把每个卡片做成自定义组件，点击收藏时，只有那个卡片组件自己更新。

使用自定义组件时，有几个要点要注意：

• 合理拆分粒度：不是越细越好。一个页面拆成几十个组件，反而会增加组件通信的开销。我一般建议一个页面拆 5-10 个组件
• 使用 Component 构造器：抖音小程序里，用 Component 而不是 Page 来定义组件
• 控制组件间通信：父子组件传参用 properties，兄弟组件通信用事件总线或全局状态
• 利用 behaviors：公共逻辑抽成 behavior，避免重复代码

// 商品卡片组件示例
Component({
  properties: {
    item: {
      type: Object,
      value: {}
    }
  },
  methods: {
    onCollect() {
      // 只更新当前组件的数据
      this.setData({
        'item.isCollected': !this.data.item.isCollected
      })
      // 通知父组件
      this.triggerEvent('collect', { id: this.data.item.id })
    }
  }
})

3.5 总结一下

渲染优化说白了就三件事：

1. 理解 setData 的代价——它不是赋值，是跨线程通信
2. 减少 setData 的频率和数据量——合并调用、增量更新、节流控制
3. 用自定义组件隔离渲染范围——谁变化谁更新，别拖累整个页面

你想想看，如果你的小程序能做到「每次 setData 只更新必要的节点、只传必要的数据」，那性能问题基本就解决了一大半。剩下的就是网络请求、图片加载这些了，我们后面章节再聊。