memo 相关问题


为什么 Android 上两个组件之间的切换速度如此之慢?

我正在使用 Expo/React Native/Typescript 构建一个类似于填字游戏的小型拼图应用程序。 这是 PuzzleMain 组件的精简版本: const PuzzleMain:React.FC 我正在使用 Expo/React Native/Typescript 构建一个类似于填字游戏的小型拼图应用程序。 这是 PuzzleMain 组件的精简版本: const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => { let puzzle: AcrosticPuzzleData = parseAcrosticPuzzle(PUZZLE_TEXT); const grid = <PuzzleGrid puzzle={puzzle} />; const clueView = <PuzzleCluesView puzzle={puzzle} />; const [index, setIndex] = React.useState(0); return <View style={styles.container}> {index == 0 ? grid : clueView} <View style={styles.keyboardContainer}> <Button onPress={() => setIndex(index == 1 ? 0 : 1)} title={"See " + routes[index == 0 ? "Grid" : "Clues"].key} /> <Keyboard /> </View> </View>; } 总结一下,有“网格”组件和“线索”组件,并通过按钮在它们之间进行切换。 毫不夸张地说,在我用来测试的 Pixel 5 上点击此按钮大约需要 3 秒的时间才能进行更改。我在这里做错了什么?使用Expo在网络上打开这个,它立即发生,所以可能它是Android特有的? 我尝试过的事情: 记住 PuzzleGrid 和 PuzzleCluesView 组件(const PuzzleGrid: React.FC<Props> = memo(({ puzzle }) ...。这基本上没有什么区别。我检查过,在我为备忘录功能制作的自定义拼图比较器中没有打印任何内容,所以我认为它没有重新渲染。 改用 TabView 在组件之间滑动 - 这有效!但说实话,我真的更喜欢两者兼得,而且当我将其合并到 TabView 实现中时,按钮同样很慢。 使用 npx expo start --no-dev 并仅构建一个 apk 并安装 - 这使得速度更快,但仍然可能需要整整一两秒,这太慢了。 正如我所看到的,您正在执行条件渲染,因此每次条件更改时,整个组件都会被创建为新组件。这种方法会使渲染速度变慢,具体取决于组件的重量。 为什么备忘录不起作用? Memo 是一种优化技术,并不能保证性能提升。 现在,提升加载速度 内部优化PuzzleGrid和PuzzleCluesView,比如每个可以接收重复道具的子组件都会被memo覆盖,重型物品会异步加载,使用loader。 使用 InteractionManager 提高加载速度,并帮助显示加载程序而不冻结 UI。 不要卸载组件,而是重叠它们并使用可见性,因为可见性不会卸载组件 而不仅仅是 {index == 0 ? grid : clueView}你可以尝试类似的事情 <View> {grid} <View style={{ // Add height and other required props to make it visible position: 'absolute', visibility: index == 0 ? 'hidden' : 'visible', }}> {clueView} </View> </View>


© www.soinside.com 2019 - 2024. All rights reserved.