왜 떨림이 빨라요?

인용문:
지금까지 우리는'Flutter'라는 단어를 들었다. 구글 산하의 크로스 플랫폼이라는 것을 알고 있다. 마치 마이크로소프트의 Xamarin과 페이스북의 React Native와 같다.구글 트렌드(Google Trends)의 한 통계에 따르면 경쟁사에 비해'떨림'(flatter) 키워드가 향하고 있다.

떨림은 단지 다른 틀일 뿐, 그것은 첫 번째 이런 틀이 아니지만, 왜 그것은 추세입니까?
인터넷에서 검색할 때, Flutter를 사용하는 이해득실을 발견할 수 있다.모든 블로그에서 언급한 요점은'flatter가 빠르다'거나'flatter가 UI를 빠르게 보여준다'는 것이지만 이를 설명하는 사람은 없다.그래서 저는 블로그를 써서 예를 들어 설명하고 싶습니다. 이것은 비교하거나 칭찬하는 블로그라고 생각하지 마세요.
구성 요소:
모두가 말한 바와 같이, 나도 이러한 사실에 동의한다. 즉, Flutter에서는 모든 것이 작은 부품이다.하지만 완전히 옳은 것은 아니다.
맞다
우리가 상세하게 소개할 다른 내용도 매우 적다.
우선, 작은 부품은 무엇입니까?
문서에 따라

Widgets are the central class hierarchy in the Flutter framework. A widget is an immutable description of part of a user interface.

정적 또는 변경할 수 없는 UI는 없다는 것을 잘 알고 있습니다.주어진 프로그램이나 웹에서 내용은 변경됩니다.따라서 이것은 가변적이지만, Flutter는 어떻게 변하지 않는 작은 위젯을 사용하여 응용 프로그램을 만듭니까?
실제로 플래터는 세 그루의 나무가 있다
· 소부품
· 원소
· 객체 렌더링
이 트리의 도움으로 Flatter는 구성 요소를 다시 사용하고 더 빠르게 만듭니다.
근데 어떻게 해요?
우선, 우리는 모든 나무를 간단명료하게 묘사하고, 그 나무를 어떻게 실현하는지 보여 드리겠습니다.
문서에 따라
작은 위젯: 요소의 구성을 설명합니다.
요소: 작은 부품의 실례화입니다.(UI 업데이트 및 관리를 담당하는 가변 섹션)
RenderObject: 크기, 레이아웃 및 드로잉을 처리합니다.
다시 말하면 우리도 그것을
· 구성
· 라이프 사이클
· 페인트
각 구성 요소의 백업 성격에 대한 비디오를 볼 시간이 충분하면 다음을 참조하십시오.
여기에서 Flutter에서 렌더링이 어떻게 발생하는지 보여주는 예시 프로그램을 만들었습니다.

이 응용 프로그램은 GitHub에서 복제할 수도 있습니다: https://github.com/NaagAlgates/how_flutter_ui_drawn.git
응용 프로그램의 출력은 매우 간단하다.스크린을 클릭하면 새 작은 위젯 트리 세트를 그립니다.



다음 그림과 같이 Android Studio를 사용하는 경우 진동 검사기 탭을 클릭합니다.

이 탭은 작은 위젯을 작은 트리라고 하는 트리로 배열하는 방법을 보여 줍니다.작은 위젯마다 render Object가 있어야 합니다.모든 물체는 자신의 id를 가지고 있습니다. 이 id를 복사하거나 기록하십시오. 왜냐하면 우리는 그것으로 왜 진동이 더 빨리 과장되었는지 증명해야 하기 때문입니다.
제 예에서 CustomText 소부품의 ID는 #6d2c7, #bcd50이고 SizedBox는 #ab197입니다.
크기 상자 위젯은 두 사용자 정의 텍스트 사이에 공간을 제공하는 데 도움이 됩니다.
CustomText는 일부 텍스트 위젯 속성을 가진 무상태 위젯 클래스입니다.
이제 테스트 목적으로 SizedBox 작은 위젯에 주석을 달고, padding 속성에 주석을 달지 않습니다(코드의 39행 참조)

코드를 실행하거나 코드만 저장하면 출력을 바로 볼 수 있습니다. (열 다시 불러오기 – mac의 명령 +\)너는 무엇이 다른지 알아볼 수 없을 것이다.
이상적인 상황에서 다음에 무슨 일이 일어날까요?
모든 뷰를 삭제하고 전체 뷰를 다시 생성합니다.
그런데 무슨 일이 일어났어요?
SizedBox 제거 및 채우기 추가 외에는 변경되지 않았습니다.
이를 증명하기 위해 새 트리의 renderObject ID를 확인합니다.
트리에서 두 CustomText 위젯 사이의 녹색 채우기 위젯을 볼 수 있습니다.

작은 부품의 ID는 다음과 같습니다.
사용자 정의 텍스트 = #6d2c7
채우기 = #18959
사용자 정의 텍스트 = #bcd50
화면을 클릭했을 때 현재 ID는 다음과 같습니다.
사용자 정의 텍스트 = #6d2c7
SizedBox=#af954
사용자 정의 텍스트 = #bcd50
패딩과 SizedBox의 값이 단독으로 변경되었습니다. 클릭할 때마다 새로운 Render Object를 호출하기 때문에flatter는 화면을 빠르게 그릴 수 있고 조작 원가가 낮습니다.

Nagaraj Alagusundaram

자료 출처: https://www.xam-consulting.com/blog/why-flutter-renders-quickly
LinkedIn:
트위터:
GitHub:https://github.com/NaagAlgates
사이트: https://www.nagaraj.com.au