Flutter 6.1 - How flutter build widget ?

 

1, How flutter, rebuilds or repaints the screen:

Giải thích nôm na cho dễ hiểu :v chứ để hiểu rõ thì khó giải thích bằng văn bản @@

Khi build flutter app, flutter sẽ build ra 3 loại tree bao gồm : widget tree, element tree, render tree.

Widget tree: code thuần túy của bạn

Element tree: liên kết các widget với các object,... tạm hiểu là chuyển ngôn ngữ code sang ngôn ngữ máy.

Render tree: Render những liên kết ở element tree lên màn hình.

Example: 

- Trong widget tree có những object nào thì khi build element tree và render tree cũng có những object đó.

- Widget tree: khi bạn setSate() ở MyStateful  thì widget tree sẽ tạo ra 1 đối tượng MyStateful mới. Tuy nhiên, element tree sẽ ko tạo ra 1 MyStateful  mới mà sẽ xem xét những gì thay đổi sau khi setSate() và update lại vào element tree => Render tree.

*Khi các object, value thay đổi => widget tree đều phải tạo ra 1 đối tượng mới và elemen tree sẽ xem xét sự thay đổi của widget tree => update lại lên element tree. Vì vậy, để tối ưu hiệu năng, nếu các biến mà bạn biết chắc chắn value của nó sẽ không bao giờ thay đổi => hãy khai báo biến đó là const. Vd: const Text('...') , const EdgeInsets....

Tất nhiên, điều này k làm app performance tốt hơn gấp đôi :v nhưng nên làm như vậy ...

2, Good code

Để "good code" chúng ta cần :

- Bản thân và người khác phải dễ đọc, dễ hiểu, dễ bảo trì. Hãy nghĩ đến các tính năng có thể trong tương lai để có thể viết code dễ bảo trì, phát triển,... Hãy sử dụng comments, coding convention,.. để 1 tháng, nửa năm đọc lại vẫn dễ hiểu.

- Good performace: vd: khai báo const để tránh việc rebuild object,... Cố gắng cải thiện performance dù chỉ một chút. (Có thể phương án này ko gây lag,... vì device quá tốt,... nhưng vẫn cần cải thiện performance nếu có thể. Mỗi lần bỏ qua việc cải thiện performace => app của bạn sẽ chậm đi 1 chút T.T ).