前言
平常在使用flutter的控件时我们都知道，要刷新页面那么只需要调用setState()方法即可，当调用此方法后，该页面会重新build，然后重新构建Tree。那么使用setState()方法时有哪些注意事项呢？调用当前页面的setState()方法会将当前页面的所有子控件都刷新，如何实现局部刷新呢？最后一个疑问就是setState()的刷新机制和刷新原理到底是怎样的呢？今天，带着这些疑问，逐步学习和了解。
使用setState()的注意事项
了解一个方法的注意事项，最好的方式就是看方法说明文档和源码了，这里截取最重要的setState()方法的源码及注释
.....省略的注释
/// The provided callback is immediately called synchronously. It must not
/// return a future (the callback cannot be `async`), since then it would be
/// unclear when the state was actually being set.
.....省略的注释
/// Generally it is recommended that the `setState` method only be used to
/// wrap the actual changes to the state, not any computation that might be
/// associated with the change.
void setState(VoidCallback fn) {
.....省略的源码
final dynamic result = fn() as dynamic;
....省略的源码
_element.markNeedsBuild();
}
这里说明如下：
1、回调方法不能是async修饰的，从源码可以看到，这里的回调方法fn是同步执行的，所以如果换成async可能会导致不同步了，实际上仔细查看源码也可以发现如果是async的方法assert()会抛出异常。
2、回调方法内最好只做跟build相关的改变的代码，为什么呢？因为从setState()函数中可以看到它先同步执行回调函数，最后一句将State标记为可以build的状态，等到下一个Vsync信号到来时才进行build和重新渲染，如果这个回调方法里面有很长的耗时任务，那么最后一句迟迟不能执行，所以就会导致build延迟了。为此，官方也给出了使用示例，如下：
Future<void> _incrementCounter() async {
setState(() {
_counter++;
});
Directory directory = await getApplicationDocumentsDirectory();
final String dirName = directory.path;
await File('$dir/counter.txt').writeAsString('$_counter');
}
这里就将刷新和保存数据的工作分开进行了
3、官方推荐的写法为：setState(() { _myState = newValue; });通过前面分析可以知道_myState = newValue;setState(() {});效果是一样的，但是官方的写法明显更加优雅，所以推荐。
实现局部刷新
首先通过一张流程图了解一下setState()的工作机制
image.png
总结起来就是，调用一个Widget的setState()方法，它会将当前Widget及其所有子Widget都标记要重新刷新的状态，等待下一个Vsync刷新信号到来时重新刷新所有这些标记为刷新状态的控件。也就是调用他们的build方法，这里通过如下段代码验证一下：
import 'package:flutter/material.dart';
void main(){
runApp(StudyApp());
}
class StudyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}
class MyText extends StatefulWidget {
final String text;
MyText(this.text)
@override
State<StatefulWidget> createState() => _MyTextState();
}
class _MyTextState extends State<MyText> {
@override
Widget build(BuildContext context) {
print("刷新了呀2");
return Text(widget.text);
}
}
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _HomePageState();
}
class _HomePageState extends State<StatefulWidget> {
int title = 0;
@override
Widget build(BuildContext context) {
print("刷新了呀1");
return Scaffold(
appBar:AppBar(title:Text("flutter学习")),
body:Center(child:Column(crossAxisAlignment:CrossAxisAlignment.center,children: [
FlatButton(onPressed:(){
setState(() {
title += 1;
});
},child:Text("dart语法"),color:Colors.grey),
MyText("$title")
])
));
}
}
点击按钮后，控制台输出结果为：
flutter: 刷新了呀1
flutter: 刷新了呀2
实际项目中可能会遇到这样的场景，比如一个新闻列表页，每一个列表项为一个新闻的摘要，列表项有点赞按钮，用户点击按钮后，点赞按钮的状态发生改变。再比如一个商品详情页，里面包括大量的图片介绍信息，以及其它说明信息，里面有一个收藏按钮，用户点击收藏后改变收藏按钮的状态。等等很多类似需求，那么还按照上面类似的做法吗？我觉得不能，可能会造成不必要的性能问题，那么有没有一种办法做局部刷新呢，就是我只是调用点赞按钮或者收藏按钮的setState()方法，答案是有的。还是以上面代码为例，经过改造后如下：
import 'package:flutter/material.dart';
void main(){
runApp(StudyApp());
}
class StudyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new HomePage(),
);
}
}
class MyText extends StatefulWidget {
final String text;
MyText(Key theKey,this.text):super(key:theKey);
@override
State<StatefulWidget> createState() => _MyTextState();
}
class _MyTextState extends State<MyText> {
@override
Widget build(BuildContext context) {
print("刷新了呀2");
return Text(widget.text);
}
}
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _HomePageState();
}
class _HomePageState extends State<StatefulWidget> {
int title = 0;
GlobalKey<_MyTextState> _txtKey = GlobalKey();
@override
Widget build(BuildContext context) {
print("刷新了呀1");
return Scaffold(
appBar:AppBar(title:Text("flutter学习")),
body:Center(child:Column(crossAxisAlignment:CrossAxisAlignment.center,children: [
FlatButton(onPressed:(){
_txtKey.currentState.setState(() {
title += 1;
});
},child:Text("dart语法"),color:Colors.grey),
MyText(_txtKey,"$title")
])
));
}
}
再次点击按钮，发现输出为：
flutter: 刷新了呀2
对，没错，只有指定的控件MyText的build执行的刷新，这里是通过保存GlobalKey这样一个对象来实现的。那么这里就有疑问了，GlobalKey是什么？这个东西和要刷新的Widget又是如何绑定的呢？为了了解其机制，这里仍然是去阅读源码了。
abstract class Widget extends DiagnosticableTree {
const Widget({ this.key });
.....省略注释
final Key key;
...省略源码
}
可以看到Key作为Widget的成员变量存在，GlobalKey是Key的一个子类。接下来看一下GlobalKey的源码
abstract class GlobalKey<T extends State<StatefulWidget>> extends Key {
/// Creates a [LabeledGlobalKey], which is a [GlobalKey] with a label used for
/// debugging.
///
/// The label is purely for debugging and not used for comparing the identity
/// of the key.
factory GlobalKey({ String debugLabel }) => LabeledGlobalKey<T>(debugLabel);
/// Creates a global key without a label.
///
/// Used by subclasses because the factory constructor shadows the implicit
/// constructor.
const GlobalKey.constructor() : super.empty();
static final Map<GlobalKey, Element> _registry = <GlobalKey, Element>{};
static final Set<Element> _debugIllFatedElements = HashSet<Element>();
// This map keeps track which child reserves the global key with the parent.
// Parent, child -> global key.
// This provides us a way to remove old reservation while parent rebuilds the
// child in the same slot.
static final Map<Element, Map<Element, GlobalKey>> _debugReservations = <Element, Map<Element, GlobalKey>>{};
static void _debugRemoveReservationFor(Element parent, Element child) {
assert(() {
assert(parent != null);
assert(child != null);
_debugReservations[parent]?.remove(child);
return true;
}());
}
void _register(Element element) {
assert(() {
if (_registry.containsKey(this)) {
assert(element.widget != null);
assert(_registry[this].widget != null);
assert(element.widget.runtimeType != _registry[this].widget.runtimeType);
_debugIllFatedElements.add(_registry[this]);
}
return true;
}());
_registry[this] = element;
}
void _unregister(Element element) {
assert(() {
if (_registry.containsKey(this) && _registry[this] != element) {
assert(element.widget != null);
assert(_registry[this].widget != null);
assert(element.widget.runtimeType != _registry[this].widget.runtimeType);
}
return true;
}());
if (_registry[this] == element)
_registry.remove(this);
}
.....省略源码
T get currentState {
final Element element = _currentElement;
if (element is StatefulElement) {
final StatefulElement statefulElement = element;
final State state = statefulElement.state;
if (state is T)
return state;
}
return null;
}
GlobaKey里面有一个_registry静态成员变量，它是一个Map类型，保存着key和它关联的Element，为什么是Element呢？这就是巧妙之处了，因为Element才是flutter的最终渲染所需的实例对象，只有这个实例对象有改变了才会重新去渲染，而且通过Element也可以拿到它绑定的State以及Widget。而且这里_registry为静态变量也避免了重复创建对象。那GlobalKey和Element是什么时候关联和解除关联的呢？请看如下源码：
void mount(Element parent, dynamic newSlot) {
assert(_debugLifecycleState == _ElementLifecycle.initial);
assert(widget != null);
assert(_parent == null);
assert(parent == null || parent._debugLifecycleState == _ElementLifecycle.active);
assert(slot == null);
assert(depth == null);
assert(!_active);
_parent = parent;
_slot = newSlot;
_depth = _parent != null ? _parent.depth + 1 : 1;
_active = true;
if (parent != null) // Only assign ownership if the parent is non-null
_owner = parent.owner;
final Key key = widget.key;
if (key is GlobalKey) {
key._register(this);
}
_updateInheritance();
assert(() {
_debugLifecycleState = _ElementLifecycle.active;
return true;
}());
}
void unmount() {
assert(_debugLifecycleState == _ElementLifecycle.inactive);
assert(_widget != null); // Use the private property to avoid a CastError during hot reload.
assert(depth != null);
assert(!_active);
// Use the private property to avoid a CastError during hot reload.
final Key key = _widget.key;
if (key is GlobalKey) {
key._unregister(this);
}
assert(() {
_debugLifecycleState = _ElementLifecycle.defunct;
return true;
}());
}
即当Element首次被挂载到渲染树中时通过GlobalKey的_register()方法关联了起来，当Element被解除挂载时候通过GlobalKey的_unregister()解除关联
setState()的刷新机制及原理
为什么调用setState()方法之后，State的build()方法就会被执行，这整个流程是怎样的呢？通过阅读源码一步一步来了解(为了简洁，下面只有关键代码)
1、setState()方法源码
void setState(VoidCallback fn) {
_element.markNeedsBuild();
}
- 该方法调用State对应的Element对象(前面了解到这才是真正的渲染对象)的markNeedsBuild()方法
2、markNeedsBuild()
void markNeedsBuild() {
if (!_active)
return;
if (dirty)
return;
_dirty = true;
owner.scheduleBuildFor(this);
}
- 将Element的_dirty变量置为true，只有该变量为true那么当下一次Vsync信号来到时Element才会被重新build。同时将该Elemnt加入到owner中，owner代表该Element的父Element(一个Element可能有多个子控件组成)
3、scheduleBuildFor()
void scheduleBuildFor(Element element) {
if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {
_scheduledFlushDirtyElements = true;
onBuildScheduled();
}
_dirtyElements.add(element);
element._inDirtyList = true;
}
- 在父Element中将该Element标记为dirty，因为build的调用是从父控件到子控件逐层调用的，每一个父控件通过BuildOwner对象来管理它的子控件，接下来再调用onBuildScheduled();方法，注意这里的onBuildScheduled是一个回调方法，它在flutter启动时通过WidgetsBinding被初始化，具体的回调函数为_handleBuildScheduled
4、_handleBuildScheduled
mixin WidgetsBinding on BindingBase, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
void _handleBuildScheduled() {
ensureVisualUpdate(); //[见小节2.5]
}
}
5、ensureVisualUpdate()
void ensureVisualUpdate() {
switch (schedulerPhase) {
case SchedulerPhase.idle:
case SchedulerPhase.postFrameCallbacks:
scheduleFrame(); //[见小节2.6]
return;
case SchedulerPhase.transientCallbacks:
case SchedulerPhase.midFrameMicrotasks:
case SchedulerPhase.persistentCallbacks:
return;
}
}
6、接下来是scheduleFrame()
void scheduleFrame() {
if (_hasScheduledFrame || !framesEnabled)
return;
assert(() {
if (debugPrintScheduleFrameStacks)
debugPrintStack(label: 'scheduleFrame() called. Current phase is $schedulerPhase.');
return true;
}());
ensureFrameCallbacksRegistered();
window.scheduleFrame();
_hasScheduledFrame = true;
}
void scheduleFrame() native 'PlatformConfiguration_scheduleFrame';
这里会调用native方法scheduleFrame()，此方法内部最终会注册Vsync信号回调函数，当下一个Vsync信号来临时，这个回调函数最终又调用dart层的drawFrame()方法，如下：
7、handleBeginFrame()方法
mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
/// Pump the build and rendering pipeline to generate a frame.
///
/// This method is called by [handleDrawFrame], which itself is called
/// automatically by the engine when it is time to lay out and paint a
/// frame.
///
/// Each frame consists of the following phases:
///
/// 1. The animation phase: The [handleBeginFrame] method, which is registered
/// with [Window.onBeginFrame], invokes all the transient frame callbacks
/// registered with [scheduleFrameCallback], in
/// registration order. This includes all the [Ticker] instances that are
/// driving [AnimationController] objects, which means all of the active
/// [Animation] objects tick at this point.
///
/// 2. Microtasks: After [handleBeginFrame] returns, any microtasks that got
/// scheduled by transient frame callbacks get to run. This typically includes
/// callbacks for futures from [Ticker]s and [AnimationController]s that
/// completed this frame.
///
/// After [handleBeginFrame], [handleDrawFrame], which is registered with
/// [Window.onDrawFrame], is called, which invokes all the persistent frame
/// callbacks, of which the most notable is this method, [drawFrame], which
/// proceeds as follows:
///
/// 3. The build phase: All the dirty [Element]s in the widget tree are
/// rebuilt (see [State.build]). See [State.setState] for further details on
/// marking a widget dirty for building. See [BuildOwner] for more information
/// on this step.
///
/// 4. The layout phase: All the dirty [RenderObject]s in the system are laid
/// out (see [RenderObject.performLayout]). See [RenderObject.markNeedsLayout]
/// for further details on marking an object dirty for layout.
///
/// 5. The compositing bits phase: The compositing bits on any dirty
/// [RenderObject] objects are updated. See
/// [RenderObject.markNeedsCompositingBitsUpdate].
///
/// 6. The paint phase: All the dirty [RenderObject]s in the system are
/// repainted (see [RenderObject.paint]). This generates the [Layer] tree. See
/// [RenderObject.markNeedsPaint] for further details on marking an object
/// dirty for paint.
///
/// 7. The compositing phase: The layer tree is turned into a [Scene] and
/// sent to the GPU.
///
/// 8. The semantics phase: All the dirty [RenderObject]s in the system have
/// their semantics updated (see [RenderObject.assembleSemanticsNode]). This
/// generates the [SemanticsNode] tree. See
/// [RenderObject.markNeedsSemanticsUpdate] for further details on marking an
/// object dirty for semantics.
///
/// For more details on steps 4-8, see [PipelineOwner].
///
/// 9. The finalization phase in the widgets layer: The widgets tree is
/// finalized. This causes [State.dispose] to be invoked on any objects that
/// were removed from the widgets tree this frame. See
/// [BuildOwner.finalizeTree] for more details.
///
/// 10. The finalization phase in the scheduler layer: After [drawFrame]
/// returns, [handleDrawFrame] then invokes post-frame callbacks (registered
/// with [addPostFrameCallback]).
//
// When editing the above, also update rendering/binding.dart's copy.
@override
void drawFrame() {
assert(!debugBuildingDirtyElements);
assert(() {
debugBuildingDirtyElements = true;
return true;
}());
TimingsCallback firstFrameCallback;
if (_needToReportFirstFrame) {
assert(!_firstFrameCompleter.isCompleted);
firstFrameCallback = (List<FrameTiming> timings) {
assert(sendFramesToEngine);
if (!kReleaseMode) {
developer.Timeline.instantSync('Rasterized first useful frame');
developer.postEvent('Flutter.FirstFrame', <String, dynamic>{});
}
SchedulerBinding.instance.removeTimingsCallback(firstFrameCallback);
firstFrameCallback = null;
_firstFrameCompleter.complete();
};
// Callback is only invoked when [Window.render] is called. When
// [sendFramesToEngine] is set to false during the frame, it will not
// be called and we need to remove the callback (see below).
SchedulerBinding.instance.addTimingsCallback(firstFrameCallback);
}
try {
if (renderViewElement != null)
buildOwner.buildScope(renderViewElement);
super.drawFrame();
buildOwner.finalizeTree();
} finally {
assert(() {
debugBuildingDirtyElements = false;
return true;
}());
}
if (!kReleaseMode) {
if (_needToReportFirstFrame && sendFramesToEngine) {
developer.Timeline.instantSync('Widgets built first useful frame');
}
}
_needToReportFirstFrame = false;
if (firstFrameCallback != null && !sendFramesToEngine) {
// This frame is deferred and not the first frame sent to the engine that
// should be reported.
_needToReportFirstFrame = true;
SchedulerBinding.instance.removeTimingsCallback(firstFrameCallback);
}
}
}
这个函数的注释解释了每一渲染的步骤，可以看到在执行build函数之前会优先执行动画相关代码，和microtask中的相关任务，所以如果microtask中任务过重，那有可能影响页面流畅度
这个函数内部通过buildOwner.buildScope(renderViewElement);调用进入Widgets的build函数流程，点进去这个函数看看
void buildScope(Element context, [ VoidCallback callback ]) {
....省略
Timeline.startSync('Build', arguments: timelineArgumentsIndicatingLandmarkEvent);
....省略
}
可以看到它是通过Timeline调用了Build，然后native又从c++层回调到dart层的build方法的
至此，setState()调用后再如何回调到State的build函数的整个流畅就分析清楚了
网友评论