flutter源码：setState分析
setState方法算是flutter使用最频繁的方法了，每次页面数据有改变，都需要调用这个方法，去触发页面的刷新，展示最新的UI效果，接下来从源码角度解读下setState后具体发生了什么
系统源码部分，会做截取，仅保留跟主题有关的部分，开始吧
void setState(VoidCallback fn) {
// 省略了一大堆的判断代码
final Object? result = fn() as dynamic;
_element!.markNeedsBuild();
}
上面可以看到，回调方法VoidCallback fn是马上会被同步执行，然后调用这个widget对应的element的markNeedsBuild方法
void markNeedsBuild() {
if (dirty)
return;
_dirty = true;
owner!.scheduleBuildFor(this);
}
就是把这个element标记为dirty，如果已经标记过，则忽略，说明连续调用两次setState方法，第二次其实是多余的，然后是调用owner的scheduleBuildFor方法
这里的owner，是BuildOwner，先记住全局只有一个BuildOwner实例，它是在启动的时候创建的，这里先不展开说明，我们先记住全局就一个owner就好
void scheduleBuildFor(Element element) {
if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {
_scheduledFlushDirtyElements = true;
onBuildScheduled!();
}
_dirtyElements.add(element);
element._inDirtyList = true;
}
上面的源码，其实写法上有点不合理，我改下，效果一样，但是更合理些
_dirtyElements.add(element);
element._inDirtyList = true;
if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {
_scheduledFlushDirtyElements = true;
onBuildScheduled!();
}
}
首先，先把当前的element加到一个_dirtyElements的数组里面，_scheduledFlushDirtyElements用于判断有没有调用过刷新dirtyElement，一般会是false，然后调用onBuildScheduled!()方法，这个方法，其实是一个回调方法
VoidCallback? onBuildScheduled;
真正的方法是这个
void _handleBuildScheduled() {
ensureVisualUpdate();
}
void ensureVisualUpdate() {
switch (schedulerPhase) {
case SchedulerPhase.idle:
case SchedulerPhase.postFrameCallbacks:
scheduleFrame();
return;
case SchedulerPhase.transientCallbacks:
case SchedulerPhase.midFrameMicrotasks:
case SchedulerPhase.persistentCallbacks:
return;
}
}
判断当前的状态，然后触发scheduleFrame，计划刷新下一帧
void scheduleFrame() {
ensureFrameCallbacksRegistered();
window.scheduleFrame();
}
这个方法，其实就是让系统触发下一帧的刷新，系统刷新有固定的频率，一般是一秒60帧，内部已经是底层的方法了
// window内方法
void scheduleFrame() => platformDispatcher.scheduleFrame();
void scheduleFrame() native 'PlatformConfiguration_scheduleFrame';
调用到engine层的方法了，告知系统触发下一帧的回调，然后会收到系统下一帧刷新的回调，接收方法在这里
void _handleDrawFrame() {
handleDrawFrame();
}
这个方法被调用，说明已经到下一帧的刷新时间了
void handleDrawFrame() {
_frameTimelineTask?.finish(); // end the "Animate" phase
try {
// PERSISTENT FRAME CALLBACKS
_schedulerPhase = SchedulerPhase.persistentCallbacks;
for (final FrameCallback callback in _persistentCallbacks)
_invokeFrameCallback(callback, _currentFrameTimeStamp!);
// POST-FRAME CALLBACKS
_schedulerPhase = SchedulerPhase.postFrameCallbacks;
final List<FrameCallback> localPostFrameCallbacks =
List<FrameCallback>.of(_postFrameCallbacks);
_postFrameCallbacks.clear();
for (final FrameCallback callback in localPostFrameCallbacks)
_invokeFrameCallback(callback, _currentFrameTimeStamp!);
} finally {
_schedulerPhase = SchedulerPhase.idle;
_frameTimelineTask?.finish(); // end the Frame
}());
_currentFrameTimeStamp = null;
}
}
这个方法有点长，widget的回调其实是在_persistentCallbacks里面，继续走到_invokeFrameCallback方法里
void _invokeFrameCallback(FrameCallback callback, Duration timeStamp) {
try {
callback(timeStamp);
} catch (exception, exceptionStack) {
}
}
这里的callback方法，其实下面这个方法
void _handlePersistentFrameCallback(Duration timeStamp) {
drawFrame();
_scheduleMouseTrackerUpdate();
}
继续调用drawFrame方法
void drawFrame() {
try {
if (renderViewElement != null)
buildOwner!.buildScope(renderViewElement!);
super.drawFrame();
buildOwner!.finalizeTree();
} finally {
}
}
又回到了调用buildOwner的方法了
void buildScope(Element context) {
try {
_dirtyElements.sort(Element._sort);
_dirtyElementsNeedsResorting = false;
int dirtyCount = _dirtyElements.length;
int index = 0;
while (index < dirtyCount) {
final Element element = _dirtyElements[index];
try {
element.rebuild();
} catch (e, stack) {
}
} finally {
for (final Element element in _dirtyElements) {
element._inDirtyList = false;
}
_dirtyElements.clear();
_scheduledFlushDirtyElements = false;
_dirtyElementsNeedsResorting = null;
}
}
先把_dirtyElements做下排序，越靠近root的靠前，先执行刷新，然后调用每个element的rebuild方法，最后再把_dirtyElements数组清空
void rebuild() {
performRebuild();
}
继续往下调用
void performRebuild() {
if (_didChangeDependencies) {
state.didChangeDependencies();
_didChangeDependencies = false;
}
super.performRebuild();
}
然后调用super的performRebuild方法，然后又回调到StatefulElement的build方法
Widget build() => state.build(this);
最终触发的地方，就是在这里了
总结
setState其实就是告诉系统，在下一帧刷新的时候，需要更新当前widget，整个过程，是一个异步的行为，所以下面的三个写法，效果上是一样的
// 写法一
_counter++;
setState(() {});
// 写法二
setState(() {
_counter++;
});
// 写法三
setState(() {});
_counter++;