改善布局性能

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

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

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

  

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

  

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

  

子組件存在設(shè)置displayPriority屬性，不存在設(shè)置layoutWeight屬性。

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

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

  

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

  

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