改善布局性能

Flex為采用彈性布局的容器。容器內部的所有子元素，會自動參與彈性布局。子元素默認沿主軸排列，子元素在主軸方向的尺寸稱為主軸尺寸。

在單行布局場景下，容器里子組件的主軸尺寸長度總和可能存在不等于容器主軸尺寸長度的情況。例如，三個子組件的寬均為200px，容器寬為500px，當第一個子組件和第二個子組件布局完成后，為了顯示第三個子組件，需要給第二個子組件和第三個子組件設置壓縮屬性flexShrink，此時第二個子組件會被再布局一次，導致布局效率下降。

• 第一次布局子組件主軸尺寸長度總和等于容器主軸尺寸長度，不需要二次布局。

  

• 第一次布局子組件主軸尺寸長度總和小于容器主軸尺寸長度，且包含設置有效的flexGrow屬性的子組件，設置有效的flexGrow屬性的子組件會觸發(fā)二次布局，拉伸布局填滿容器。

  

• 第一次布局子組件主軸尺寸長度總和大于容器主軸尺寸長度，且包含設置有效的flexShrink屬性（flex子組件默認值為1，為有效值）的子組件，設置有效的flexShrink屬性的子組件會觸發(fā)二次布局，壓縮布局填滿容器。

  

子組件存在設置displayPriority屬性，不存在設置layoutWeight屬性。

根據displayPriority從大到小順序，布局每組同displayPriority值的子組件，直到子組件主軸尺寸長度總和最大且不超過容器主軸尺寸長度，舍棄未布局的低優(yōu)先級displayPriority（可能存在一組臨界displayPriority值的子組件布局但未使用的情況）。

• 第一次布局子組件主軸尺寸長度總和等于容器主軸尺寸長度，不需要二次布局。

  

• 第一次布局子組件主軸尺寸長度總和小于容器主軸尺寸長度，且包含設置有效的flexGrow屬性的子組件，設置有效的flexGrow屬性的子組件會觸發(fā)二次布局，拉伸布局填滿容器。

  

• 兩次遍歷都只布局一次組件，不會觸發(fā)二次布局。