This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge

wedge

Reith is a programmer, the old age is not small, the family is urgent, always urge him to date. But Reese classmate to blind date is not too heart, blind date website cope with like fill in something, and then cut a picture to send his mother, saying that has been on the blind date website hanging out. He didn’t really care — programmers don’t need objects, and now Dart doesn’t even need new. This day, Reese is looking for a bug, just located an object memory allocation problem, is ready to start to change, ding Dong, the phone played a message: “Reese, hello, xiao Fu sent you an invitation to meet, whether to accept?” As He was about to cross out the message, He glanced at his head and, overwhelmed, clicked the “Accept” button. Thus began His first online dating trip.

Preparing for a blind date

Xiao Fu pays great attention to her personal image and is very good at hiding her inner state. She looks like an ordinary girl on the outside, but she has a lot of drama on the inside.

class Xiaofu extends StatefulWidget {
  Xiaofu({Key key}) : super(key: key) {
    print('constructor: small fu');
  }

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

class _XiaofuState extends State<Xiaofu> {
  // This is xiao Fu's inner drama, which cannot be seen on the surface
}
Copy the code

In contrast, Programmer Reese is simple, standard tech guy.

// The simple programmer - Reese
class Leisi extends StatelessWidget {
  Leisi({Key key}) : super(key: key) {
  	print('constructor: lasse'); }}Copy the code

With three hours to go before the date, Fu began to dress up. She had picked out the Reese from a pile of resumes and had to be careful. She always remembered what her mother had taught her — that a woman should be graceful to a man.

@override
void initState() {
  super.initState(); // What mother taught
  print('initState: Fu spent 2 hours making up ');
}
Copy the code

At this point, Reese is still writing code.

The opening line of a blind date

When it was time for their blind date, In keeping with the gentlemanly habits learned from foreign classics, Reese arrived at the restaurant 15 minutes early — a place recommended by the dating website. The restaurant looks nice. I’m guessing it’s expensive. This must be the restaurant that the dating site is working with, and I think it will give them a lot of money back — and that’s what Reese’s Internet platform is thinking about. And Fu, of course, won’t show up until After Reese arrives.

@override
void didUpdateWidget(oldWidget) {
  super.didUpdateWidget(oldWidget);
  print('didUpdateWidget: Fiv is here ');
}
Copy the code

“Hello! Sorry to have kept you waiting!” Fu smiled and waved gracefully to Reese. He didn’t feel embarrassed, just suddenly embarrassed. “You… Hello! Well, it’s all right. I’ve only been here for a while.” Three words floated in Fu’s mind — inexperienced, of course, which Reese could not see.

The process of dating

We’ve met, we’ve said hello, let’s order. “You have it!” Reese continues to be a gentleman. Ladies first! “You come, I don’t know what to eat.” Xiao Fu made a natural and polite excuse. “Oh, well! What do you like to eat?” “Whatever. I’m not particular about my food.” “That I just casually point.” Reese didn’t notice Fu’s emoji and literally ordered two dishes.

@override
Widget build(BuildContext context) {
  print('Build: Reese');
  return Center(
    child: Text('Reese ordered two dishes at random.')); }Copy the code
@override
Widget build(BuildContext context) {
  print('Build: Xiao Fu');
  return Center(
    child: Column(children: [
      Text('expression:$_face'),
      TextButton(
          onPressed: () {
            setState(() {
              _face = 'disappointment';
              print("Fuv's face changed.");
            });
          },
          child: Text('Change your expression')))); }Copy the code

The rest of the process is a little boring, and the result is, of course, to go home.

The ending

“So be it with blind dates.” Reese didn’t think anything of it. He went home, took a shower, and turned the boiling point on gold — it was much more fun than a blind date! But Xiao Fu returned home, still disappointed. She couldn’t figure out why she decided to go on a blind date with this Guy Named Reese on a whim. Programmers were really as boring as rumor had it! It took me quite a while to get over my frustration.

@override
void deactivate() {
  print('Deactivate: Fu gets over it.');
  super.deactivate();
}
Copy the code

Just as Fu was about to remove Reese from her list, she suddenly realized why she had decided to go on a blind date with her. It must be that the name is pronounced the same as her favorite lace. She clicked “Unfollow,” and just like that, Reese disappeared from her list.

@override
void dispose() {
  print('Dispose: Xiao Fu unpays attention to Reese');
  super.dispose();
}
Copy the code

Afterword.

As you can see from the story of Reese and xiao fu’s dating, the StatelessWidget is really simple. The StatefulWidget, as a stateful component, is full of drama. Let’s take a demo page for example.

class StateDemoPage extends StatelessWidget {
  StateDemoPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("The Story of Liz and Liz."), ), body: Column( children: [ Xiaofu(), Leisi(), ], ), ); }}Copy the code

When you first go to this page, you print out the following: initState and didChangeDependencies. This means that stateful components go through two additional steps:

  • initState: The initialization state, called after the object is inserted into the component tree. The framework binds a state to a component between state creation and state initializationBuildContext. This is usually where we request data needed by the network or other interfaces.
  • didChangeDependencies: called when a state dependent object changes (e.gInheritedWidgetIs changed), wheninitStateThis method is called immediately after completion (that is, once initialization is complete). This method is called after it is calledbuildRebuild the component tree. Because it’s called every time a state dependency changesbuildMethod, so there is usually no need for subclasses to override this method, unless some overloaded task (such as a single network request) does not want to do it every timebuildWhen the call.
It took her 2 hours to put on her makeup. DidChangeDependencies: Little V flutter: build: Little V flutter: build: LaiseCopy the code

Then there’s the build method, which is available on both stateless and stateful components. In stateful components, this is called when initialization is complete or when setState is called, such as when Fu’s expression changes.

There are no further methods for stateless components, but there are four methods for stateful components:

  • reassembleThis is usually called during a hot reload (when we modify the code, save it directly and the interface will be updated). Hot overloading rebuilds the component, but does not initialize the state. It’s just called after the build is completedidUpdateWidget, informing the component that the update is complete.
  • didUpdateWidget: called when the component configuration changes. This method is called on stateful children in the tree when the parent component is rebuilt. A new component and key of the same type are displayed. The framework updates the component’s state to point to the new component, then calls the method and passes the old component to the method. The build method is always called after this method call. It is usually in this method that actions such as animation of a component removal are done.
Fluff flutter: reassemble: fluff flutter: constructor: Fluff flutter: constructor: Fluff flutter: didUpdateWidget Liz's mood was restored, her flutter was removed from the attention listCopy the code
  • deactivate: Is called when a component is removed from the component tree, but sometimes when a component is removed and reinserted into another part of the component, the build method is called to rebuild the component tree. Is called later if it is completely removed from the component treedisposeDestroy the component. Most objects can be dereferenced in this method, freeing resources untildisposeRelease all resources after the call.
  • dispose: This method is called when the stateful component will never call build again (usually the exit page), where some reference objects (such as timers, animations that have not finished) can be eliminated to free up resources. The following figure shows the state switching process for a stateful component.
stateDiagram-v2 [*] --> Constructor Constructor --> createState createState --> didChangeDependencies DidChangeDependencies -->build build--> deactivate: Exit build-->build: setState build-->reassemble: Hot reload reassemble--> constructor -->didUpdateWidget -->build deactivate --> Dispose dispose --> [*]

Looking at the comparison between stateful and stateless components, a stateful component has several more lifecycle functions to maintain, which naturally consumes more resources in terms of performance, so it is recommended to use a stateless component when it is not necessary. In the next chapter we will look at the actual rendering process of the component.

I am the island code farmer, wechat public account with the same name. This is a column on The Introduction and practice of Flutter.

👍🏻 : feel a harvest please point to encourage!

🌟 : Collect articles, convenient to read back!

💬 : Comment exchange, mutual progress!