卸载组件好还是用 CSS 隐藏组件好？

Question

我的 React Native 应用程序中有一个标头组件，当用户键盘打开时，它会滑出屏幕。这样我就可以创造更多的空间。动画完成后，我可以卸载该组件（使用 Redux 及其父组件）或通过应用flex: 0.

哪种方法更好？还是没有区别？

Answer 1

有两件事需要考虑：

• 您是否需要在隐藏/显示标题之间保留数据？
• 当标题隐藏时，您是否需要屏幕阅读器读取标题？

如果标头包含任何需要保留的状态，则最好使用 css 隐藏元素而不是卸载。举个例子，假设你的标题有一个从 0 开始的计数，并且对用户在页面上的每一秒进行计数。如果您在标头消失时卸载标头，则计数将从 0 重新开始。如果您使用 css 隐藏该元素，则当它重新出现时，计数将继续存在。

如果标题在被键盘隐藏时需要由屏幕阅读器读取，请务必使用 css 隐藏它。隐藏时屏幕仍应拾取元素，但卸载后它们将不可见，因为元素将从页面中有效删除。

如果您的项目中不关心这些，那么任一选项都可以。