Question

我在组件上看到很长的渲染时间，并且想知道是否可以更有效地实现相同的效果，或者它是否只是两个很多元素/ React Native的计算量太多。

布局如下：

<View style={{flex: 1, flexDirection: 'row', alignItems: 'stretch'}}>
    <View style={{width: 250}} />
    <View style={{flex: 1}}>
        <View style={{height: 50}} />
        <View style={{flex: 1}}>
            <Grid columns={15} rows={40} />
        </View>
    </View>
</View>

Grid组件只使用columns呈现rows列的网格，其中包含宽度/高度相等的每个flex行。以下是a link的完整示例。

在模拟器和全新设备上，dev标志关闭，我看到渲染时间在1.5到3.5秒之间，这似乎很多。如果我添加一个按钮来切换左侧面板，布局也需要花时间来更新。

我已尝试不使用flex并使用Dimensions.get('window')预先计算两个州的所有值，但结果相似。

systrace（可用here）显示所有工作都在UI和渲染线程中完成，并且还显示一些警告：Long View#draw()。

我是否认为在这一点上React Native的元素太多或者布局过于复杂？如果有的话，是否有任何替代技术，可能类似于浏览器的Canvas，以绘制所有这些元素？如果不是我做错了什么？

非常感谢你的帮助。

Answer 1

如果您不需要在单元格中打印任何内容，只需要显示网格，则可以渲染列，然后在其上呈现绝对定位的行。

这意味着对于x * y网格，您需要x + y Views而不是x * y：效率更高！

组件的render方法的性能似乎直接取决于所涉及的原生Views的数量，这就是Android上存在collapsable道具的原因：它允许减少数量本地Views的一部分，通过不渲染仅布局的那些。

如果你做需要渲染所有Views，那么在今天的反应原生中加速过程可能没什么用，但我很乐意被证明是错的！

在React-Native中可以更有效地实现这种网格布局吗？

1 个答案: