从 React Native 0.28 开始，JavaScript 代码运行在主线程之外的 JavaScriptCore 线程中，这意味着布局计算和渲染会阻塞主线程，导致应用变慢。在本篇文章中，我们将分享一些让你的 React Native 应用更快的布局优化技巧。
Flexbox
React Native 采用了 Flexbox 布局模型，因此熟悉 Flexbox 的基础知识对于 React Native 的布局优化至关重要。
使用 Flexbox 布局： flexDirection，justifyContent 和 alignItems
在 React Native 中，我们可以使用 Flexbox 布局模型来定义和排列组件。在设置容器（例如 <View>）时，你可以设置它们的 flexDirection，justifyContent 和 alignItems 等属性来改变不同元素的排列方向、对齐方式和对齐方式。
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<Text style={{fontSize: 16, fontWeight: 'bold'}}>Left Text</Text>
<Text style={{fontSize: 16, color: 'grey'}}>Right Text</Text>
</View>使用 Flex： flexGrow，flexShrink 和 flexBasis
Flex 属性包括： flex-grow，flex-shrink 和 flex-basis。 flex-grow 控制组件的扩展量， flex-shrink 控制组件的缩小量， flex-basis 控制组件的空间基础量。通过这些属性，我们可以调整组件之间的间隙和间距。
避免使用 Flexbox 的继承
当一个父容器有一个改变了的 flexDirection 属性，所有子元素都会受到影响。这样可以方便地实现连续项目。但是，当将多个大型容器放入相同的父容器时，每个组件都会受到布局更改的影响，从而导致应用性能的下降。最好避免使用 Flexbox 的继承。
-- -------------------- ---- -------
------
----- ---------------------- -------- --- ---- - ------- -- ---
---------- --------
---------- --------
-------
----- ---------------------- ----------- --- ---- - ------- -- ---
---------- --------
---------- --------
-------
-------优化嵌套
嵌套过多的组件树可能会影响应用的渲染性能。当嵌套过多的容器时，浏览器会通过执行大量的重绘和回流操作来渲染组件树。这可能会对 JavaScript 线程的性能造成严重影响，并导致应用变慢。因此，我们应该优化嵌套容器，以减少 Repaints、 Reflows 和 Layout 。
使用 Virtualized List
如果你需要在 React Native 中渲染大量数据，Virtualized List 是个好选择。除了只渲染可见部分之外，Virtualized List 还会延迟加载，例如在滚动时预加载未显示的数据。
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------------ ------------- --------- ----- ---- ---------------
----- --- - -- -- -
----- ------ -------- - ---------
----------
---------
-------- -- -- ------ ------- ------ ----- ---------
--
------ -
------------- -------------------------
---------
-----------
-------------------- -- -
----- ---------------------------------------
--
------------------ -- ---------
--
---------------
--
--
----- ------ - -------------------
---------- -
----- --
---------- ---
--
----- -
---------------- ----------
-------- ---
--------------- --
----------------- ---
--
---
------ ------- ----使用 shouldComponentUpdate
shouldComponentUpdate 是 React Native 中的生命周期方法，用于判断当前状态（state）和属性（props）是否应该触发重新渲染。使用 shouldComponentUpdate 的一个好处是可以减少不必要的重渲染和更新。例如，在滚动时，使用 shouldComponentUpdate 方法可以避免不必要的渲染，从而提高应用程序的速度。
-- -------------------- ---- -------
------ ------ ---------- ---------- ---- --------
------ ------ ----- --------- ---- ---------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- ----------
---------
-------- -- -- ------ ------- ------ ----- ---------
--
-
-------------------------------- ---------- -
------ ------ -- ------
-
---------- - -------- -- -
----- ---------------- ------------------------
--
-------- -
------ -
------
---------
----------------------
----------------------------
-------------------- ------ -- -----------------
--
-------
--
-
-
------ ------- ----使用 PureComponent
PureComponent 是 React Native 中的一个组件。它使用 shouldComponentUpdate 来浅层比较任何更改后的 prop 和 state。如果不进行更改，则不会重新渲染。因此，使用 PureComponent 也可以提高应用程序的速度。
-- -------------------- ---- -------
------ ------ --------------- ---- --------
------ ------ ----- --------- ---- ---------------
----- --- ------- ------------- -
------------------ -
-------------
---------- - -
----- ----------
---------
-------- -- -- ------ ------- ------ ----- ---------
--
-
---------- - -------- -- -
----- ---------------- ------------------------
--
-------- -
------ -
------
---------
----------------------
----------------------------
-------------------- ------ -- -----------------
--
-------
--
-
-
------ ------- ----优化渲染 Props
在 React Native 中，组件经常接收 Props。但是，当 Props 被频繁更改时，应用程序的渲染速度也会下降。因此，我们需要进一步优化以保持应用程序的性能。
避免使用传递函数
每次 setState 状态更改时，都会触发应用程序的重新渲染和布局。因此，当组件频繁使用回调函数作为 Prop 时，应用程序的性能会受到影响。
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ -------- ---- ---------------
----- --- ------- --------- -
------------------ -
-------------
-
----------- - -- -- -
-- ----
-
-------- -
------ -
------- ------------- -------------------------- --
--
-
-
------ ------- ----可以改为：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ -------- ---- ---------------
----- --- ------- --------- -
------------------ -
-------------
-
-------- -
------ -
------- ------------- ----------- -- --------------------- --
--
-
-
------ ------- ----避免传递大量的 Props
当一个 Component 接收大量的 Props 时，每当 props 更改时，组件的所有子组件都将重新渲染。因此，我们不应该将多个 Props 传递给组件，而应该尽可能地使用少量的 Props。
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------ ----- ---- ---------------
----- --- ------- --------- -
------------------ -
-------------
-
-------- -
------ -
------
---------------------------------- --- ----- ---
----------------------------------
-------------------------------------
--- ---- ---------- ---
-------
--
-
-
------ ------- ----可以改为：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------ ----- ---- ---------------
----- --- ------- --------- -
------------------ -
-------------
-
-------- -
----- ------- --------- ------------ - ----------- -- ------ -----
------ -
------
--------------------
-----------------------
--------------------------
-------
--
-
-
------ ------- ----总结
React Native 中的布局优化是应用程序性能提高的关键，特别是在使用 Virtualized List 和优化渲染 Props 等技术方面。希望这篇文章对你的 React Native 应用程序优化有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648917ad48841e9894763965