【Flutter】ValueListenableBuilder源码剖析

71 阅读1分钟

什么状态管理,什么局部刷新,老夫写代码就是一把梭。一个setState走天下

引言

虽然setState能达到刷新页面效果,但是在一些比较复杂业务场景下,凸显刷新效率低下。毕竟setState会遍历整个元素树,因此局部刷新就很有必要,只刷新该刷新的组件,以减少没必要组件重绘。

局部刷新组件

说到局部刷新,各种第三方局部刷新框架应运而生。但我更喜欢使用flutter framework提供的ValueListenableBuilder。下面逐步剖析该组件内部实现原理,为何能做到局部刷新

ValueNotifier

image.png

  1. 从源码可以清晰看到,该类继承了ChangeNotifier
  2. value值不变,不会触发更新,所以业务侧不需要判断值有没改变
  3. notifyListener方法实现局部更新的关键方法,由于ValueNotifier没有重写该方法,直接查看父类方法

ChangeNotifier

image.png

void notifyListeners() {
    ...
    for (int i = 0; i < end; i++) {
      try {
        _listeners[i]?.call();
      } catch (exception, stack) {
        ...
      }
    }
    ...
}

从实现方法中,该方法实现其实非常简单,遍历_listeners数组,调用该方法,而从类结构addListenerremoveListener可以看出,这个就是一个简单观察者模式

ValueListenableBuilder

image.png

从构造函数中可以看出valueListenable是必传参数,为何要必传,其实就是为了addListener,当值变化时能够监听到,从initState方法可以看出,传递了_valueChanged, 而这方法直接调用了setState build方法回调到外部

总结

整个实现机制其实很简单,即使局部刷新到最后也离不开setState