About statefulwidget, you have to know the principle and main points!

Preface

For initial contact  Flutter  For people , Will feel  Flutter  Pretty simple , once “ Make clear ” 了  

StatelessWidget

  and  

StatefulWidget

  After that, I started to develop . In general, this situation is written  Demo  There's no problem at all  ——  Use  

setState

  Just get the interface updated , However, once the page and business logic become complex, they will encounter many performance problems , At this time, we often don't know about such problems and start to solve them . therefore , It is necessary to  

StatefulWidget

  Make an in-depth understanding .

StatefulWidget  The classification of

StatefulWidget

  There are actually two types , That is whether it will call  

setState

  Method to refresh the interface . If you use  

StatefulWidget

  Just because some attributes need to be in  

initState

  Initialize in , So this is  

StatefulWidget

  It's a small expense , You can safely and boldly use . however , If you call frequently  

setState

  Refresh the interface , Then be careful ！ Many performance problems are due to  

setState

  As a result of .

StatefulWidget  The rendering mechanism of

Let's start with ,Flutter  It is rendered frame by frame , So once your interface changes , In fact, the display frame is changed . Of course , For the sake of performance ,Flutter  Will make the most of the previous rendering elements , Render elements, that is  

RenderObject

. We start with a

Official video  ( The tubing ）

A simple example to illustrate the whole  

StatefulWidget

  stay  

setState

  The rendering process changes when .

class ItemCounter extends StatefulWidget {
 ItemCounter({Key? key, required this.name}) : super(key: key);
 final String name;

 @override
 _ItemCounterState createState() => _ItemCounterState();
}

class _ItemCounterState extends State<ItemCounter> {
 int count = 0;
 @override
 Widget build(BuildContext context) {
 return GestureDetector(
 child: Text('${widget.name}: $count'),
 onTap: () {
 setState(() {
 count++;
 });
 },
 );
 }
}


We mentioned in the previous chapter that rendering control is actually through  Element Tree  Accomplished ,Widget Tree  Just provide configuration information . For the example above , actually  State  Objects are not accessible externally , This object is actually  

StatefulElement

  Held .

StatefulElement(StatefulWidget widget)
 : state = widget.createState(),
//...


The corresponding relationship of each element of the whole component is shown in the following figure （ The following pictures are from the original video ）, and  

StatefulElement

  The actual rendered element is also a  

StatelessElement

. The above example is actually  

Text(Tom:0)

Such a rendered component （

GestureDetector

  It's not a rendering element ）, And then  

State

  Medium  

count

  The value of is 0.

Now let's see when we click trigger  

count

  When it's added 1 What was it like when I was . When  

count

  When it changes , We know it will be called again  

build

  Method , There will be a  

Text(Tom: 1)

new  

Widget

, This is the time  Flutter  The old ones will be discarded when the next frame comes  

Text(Tom:0)

, stay  

WidgetTree

  Instead of  

Text(Tom: 1)

Such a new  

Widget

. however , Performance considerations , because  Flutter  Two before and after... Are detected  

Widget

  The corresponding component types are the same , Therefore, it will directly  

StatefulElement

  The update points to the new  

Widget

, Instead of building a new  

StatefulElement

. The following two figures show the whole process .

Here is another thing to pay attention to , That is, if the type of a node in the component tree has not changed ,

But replace the same location with new components of the same type （

Widget

）

, So even if the attribute changes ,Flutter  Will not be removed  

StatefulElement

  Create a new object , Instead, update the original

StatefulElement

  Point to new  

Widget

.  for example , We will  

ItemCounter(name: 'Tom')

Instead of  

ItemCounter (name: 'Dan')

, This change process can be used as follows 4 The picture shows .

This process can be achieved through  

didUpdateWidget

  The life cycle function of .

@override
void didUpdateWidget(covariant ItemCounter oldWidget) {
 super.didUpdateWidget(oldWidget);
}


StatefulWidget  Precautions for use

With the above analysis , Let's take a look at the official response to the need to call  

setState

  Refresh  

StatefulWidget

  It is easy to understand the usage suggestions of ,

Here's the point , Pay attention when developing

.

• Push the state maintenance of the component tree down to the leaf node as much as possible
  . It's easy to understand , The higher the level of state maintenance , It means that the larger the reconstructed component tree . Of course, leaf nodes that place state maintenance at a low level have higher performance . for instance , Suppose you have a clock component that updates regularly every second in your page , Then the maintenance of this time state should draw out a clock component separately , It maintains the time state by itself .

• To minimize the  
  StatefulWidget
    Of  
  State
    in  
  build
    Method to build the number of components
  . Ideally , One  
  StatefulWidget
    There should be only one sub component , And this component corresponds to a  
  RenderObject
  . This may be difficult to meet in reality , But this is a guiding principle , If your  
  StatefulWidget
    Has built too many components , Then the performance will naturally decline . At this time, you should consider using the state management plug-in for local refresh .

• If the sub component tree does not change in the whole life cycle , Then you should consider caching the sub component tree for reuse
  . This will perform much better than rebuilding this subcomponent tree every time . The usual approach is to separate this sub component tree into one  
  Widget
  , Then it is passed to as a sub component  
  StatefulWidget
  .

• Use as much as possible  
  const
    Decorate the sub component construction method . We're talking about  
  const
    when （
  Decrypt  Flutter  Of  const  keyword
  ） There was an introduction to . actually , Use  
  const
    Decoration is equivalent to a caching method .

• Try to avoid changing the level of the sub component tree or the component type in the sub component tree
  . For example, when returning subcomponents , It is possible to return sub components or wrap sub components in  
  IgnorePointer
    in . This method actually changes the hierarchy of the sub component tree . The sub components should be wrapped in  
  IgnorePointer
    in , And then through
  IgnorePointer
    Of
  ignoring
    Attribute to control . This is because , Any operation that changes the depth of the subcomponent tree will need to be rebuilt 、 Rearrange 、 Redraw the entire subcomponent tree . If you only change the attributes of a node , It will narrow the scope of change a lot （ For example, in this example , There is no need to rearrange and redraw ）.

• Suppose you have to change the hierarchy of the subcomponent tree , Then you should consider using the invariant parts of the sub component tree  GlobalKey  Make this part in the whole  
  StatefulWidget
    The life cycle of is consistent
  . If it's not convenient to use  
  GlobalKey
    Words , Then consider using  
  KeyedSubtree
    Component  
  GlobalKey
  .

• If  
  StatefulWidget
    If some of the attributes are unchanged , that   The definition of these attributes should take precedence over  
  Widget
    The definition of , And declare as  
  final
  , instead of  
  State
    in , This can reduce  
  State
    Data to be maintained .

summary

In fact, most of the content of this article comes from official documents and videos , But I guess  Flutter  Not many developers have seen . When we are exposed to a new technology , It is often the first to get through  Demo, Then let's see the routine start to develop . In this way, the initial development speed is really fast , But when you encounter problems, you are often confused . therefore , Yes 3 A suggestion ：

• If time permits , Read more official documents at the beginning 、 Relevant peripheral applications and documentation , This will reduce the subsequent development cost and time —— Especially when performance bottlenecks require reconfiguration .

• If time does not allow , Then don't toss blindly when you encounter problems , Back to the official documents, first read it several times ,Flutter  The official documents of are very detailed , And it is also equipped with many explanation videos , Can solve most of your puzzles .

• Multiple input , Although at home  Flutter  Not many players , But there are still many foreign words , Stick to visiting foreign blogs , Website shows , It can make you less detours .

Welcome to follow individual public number ：

Ma Nong on the island

, Or add this wechat ：

island-coder

.